[SalesForce] How to use input field value in LWC

I have below table in lwc, size of the lineItem list is 11 records and accordingly it created 11 input fields now whenever I add anything on one column it shows on all 11 but the the requirement is add different values in all 11 fields and on a click of a button get all different values.

Button:

<lightning-button label="Apply %" variant="brand" onclick={applyPercentage}></lightning-button>

table:

<template if:true={lineItemData}>
              <template for:each={lineItemData} for:item="lineItem">
                <tr key={lineItem.key}>
                  <td>
                    <lightning-input type="checkbox" variant="label-hidden">
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden"
                      value={lineItem.Apttus_Config2__AttributeValueId__r.APTS_Storage_Category__c}>
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden" value={lineItem.Apttus_Config2__ProductId__r.Name}>
                    </lightning-input>
                  </td>
                  <td>
                    <lightning-input variant="label-hidden" type="number" data-key={lineItem.Id} label="percentageValue" onchange={percentageChange}>
                    </lightning-input>
                  </td>
                </tr>
              </template>
            </template>

JS:

percentageChange(event) {
    this.lineItemData
        .find(item => item.Id === event.currentTarget.dataset.key)
        .percentage = event.target.value;
}

applyPercentage() {
    console.log(JSON.stringify(this.lineItemData));
}
    }

@wire(getIlineItemData, { productConfigId: '$productConfigId' })
LineItemData({ data }) {
    if (data) {
        this.lineItemData = data;
    }
}

Apex:

@AuraEnabled(cacheable=true)
public static List<Apttus_Config2__LineItem__c> getIlineItemData(Id productConfigId) {

    Apttus_Config2__LineItem__c[] uniqueLineItemList = new Apttus_Config2__LineItem__c[0];
    string[] uniqueStringList = new string[0];



    for(Apttus_Config2__LineItem__c lineItem : [SELECT Id,Apttus_Config2__ProductId__r.name, Apttus_Config2__AttributeValueId__r.APTS_Storage_Category__c, Apttus_Config2__ConfigurationId__r.Apttus_QPConfig__Proposald__c
                                                FROM Apttus_Config2__LineItem__c WHERE (Apttus_Config2__ProductId__r.Family='Test'  OR Apttus_Config2__ProductId__r.Family='Storage')
                                                and Apttus_Config2__ConfigurationId__c =:productConfigId]) {
        if(!uniqueStringList.contains(lineItem.Apttus_Config2__ProductId__r.name)) {
            uniqueStringList.add(lineItem.Apttus_Config2__ProductId__r.name);
            uniqueLineItemList.add(lineItem);

        }
    }
    return uniqueLineItemList;
}

lineItem console log:

{"Id":"a4e6E000000Bob9QAC","Apttus_Config2__ProductId__c":"01tw0000005KLpBAAW","Apttus_Config2__AttributeValueId__c":"a4y6E000000NWOGQA4","Apttus_Config2__ConfigurationId__c":"a516E000000HdtqQAC","Apttus_Config2__ProductId__r":{"Name":"1045-Collagen
IV","Id":"01tw0000005KLpBAAW"},"Apttus_Config2__AttributeValueId__r":{"APTS_Storage_Category__c":"Frozen","Id":"a4y6E000000NWOGQA4"},"Apttus_Config2__ConfigurationId__r":{"Apttus_QPConfig__Proposald__c":"a3l6E000000BfKoQAK","Id":"a516E000000HdtqQAC"}},{"Id":"a4e6E000000BobAQAS","Apttus_Config2__ProductId__c":"01tw0000005KKoyAAG","Apttus_Config2__AttributeValueId__c":"a4y6E000000NWOHQA4","Apttus_Config2__ConfigurationId__c":"a516E000000HdtqQAC","Apttus_Config2__ProductId__r":{"Name":"10-V-Plex
MSD Pro-Inflammatory Panel-RFTS
493","Id":"01tw0000005KKoyAAG"},"Apttus_Config2__AttributeValueId__r":{"APTS_Storage_Category__c":"Ambient","Id":"a4y6E000000NWOHQA4"},"Apttus_Config2__ConfigurationId__r":{"Apttus_QPConfig__Proposald__c":"a3l6E000000BfKoQAK","Id":"a516E000000HdtqQAC"}},

I have updated my question as suggested below, but still I don't see the percentage property in the lineitem array, I request you to please look into it one more time.

Best Answer

The reason you are not able to get percentage is because the wired data is immutable. So, you can get the clone as below after which it should work:

if (data) {
    this.lineItemData = [...data];
}

I assume data here is the list of records and so using [...]

  1. You do not need key on all tds .
  2. Even if you use label-hidden variant, you need to put label for lightning-input .
  3. You do not need value on the column percentageValue as you should collect and modify corresponding row in lineItemData .
  4. You should use some identifier like data-key to know which row is being modified. Then in the change handler you can assign to exactly that row data field .

HTML:

<td>
    <lightning-input variant="label-hidden" data-key={lineItem.key} label="percentageValue" type="number" onchange={PercentageChange}>
    </lightning-input>
</td>

JS:

PercentageChange(event) {
    this.lineItemData
        .find(item => item.key === event.currentTarget.dataset.key)
        .percentage = event.target.value;
}

Here is the playground link that I created for you.

Related Topic