0

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.

3

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.

  • Thank you so much, this is exactly what I need, it is working perfectly in playground but in real time I am not able to see percentage property in line Item array , you have already done a lot but I request you to please look into it one more time and please suggest what i am missing, I have updated the question thank you so much again. – gs650x Nov 1 at 12:35
  • instead of returning the list of sobject in apex I even tried creating the wrapper class and created a property name percentage but still not able to get the percentage value from the page, I also tried this.lineItem = {...data} or Object.assign({}, data but still no luck, please suggest. – gs650x Nov 1 at 13:36
  • It should not be {...}, it should be [...data]. Added in answer. :) – salesforce-sas Nov 1 at 14:36
  • Still it doesn't make any difference, I am getting below error – gs650x Nov 1 at 15:01
  • Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'percentage' throws – gs650x Nov 1 at 15:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.