2

My requirement is to pass selected accounts on Opportunity Record page to Opportunity Product Record Page. I have two LWC created for each page. From Opportunity Record page I'm storing the selected Accounts in local storage and then retrieving it on Opportunity Product Page.

Please find the code:

Opportunity LWC:

export default class OpportunityLWC extends NavigationMixin(LightningElement) {
   
    //Get Selected Checkbox for SAP Accounts 
    handleRowSelection(event) {
        var selectedRows=event.detail.selectedRows;
        this.selectedSapAccounts = JSON.stringify(selectedRows); 
        
        console.log('selectedSAPAccounts------>' + this.selectedSapAccounts);

        //Set LocalStorage 
        localStorage.setItem('SelectedSAPAccountsDetails', this.selectedSapAccounts);
    
        if(selectedRows.length === 0){
            this.disabled = true;
        }else{
            this.disabled = false;
        }
    }

}

Opportunity Product LWC JS:

export default class OpportunityProductLWC extends LightningElement {
    
//Need help here to display the JSON stored in this.localStorageSelectedSAPAccountDetails to display in lightning datatable

accountColumns = [
        {
            label: 'SAP Account Name',
            fieldName: 'sapAccount',
            type: 'url',
            typeAttributes: {label: { fieldName: 'sapAccname' }, target: '_blank'}
        },
        { label: 'SAP Account Number', fieldName: 'sapAccountNumber', type: 'string'},
        { label: 'Quantity', type: 'text', fieldName: 'splitQuantityValue'}
    ];

 connectedCallback(){
 //Retrieve the localStorage Values 
        this.retrieveLocalStorage();
}

retrieveLocalStorage(){
        
        if(localStorage.getItem('SelectedSAPAccountsDetails')){
            //An Id key is in the local Storage
            this.localStorageSelectedSAPAccountDetails = localStorage.getItem('SelectedSAPAccountsDetails');

            //Retrieve the data and parse it back to JSON
            console.log('localstorage--->' + this.localStorageSelectedSAPAccountDetails);
            
            this.sapAccounts = this.localStorageSelectedSAPAccountDetails;

            //Clear local storage after getting the values
            localStorage.clear();
        }

         
    }

}

Opportunity Product HTML

<template>
    <div>
        <lightning-card title="">
          <div class="slds-p-around_xx-small">
              <lightning-datatable
                  key-field="Id"
                  data={sapAccounts}
                  onrowselection={handleRowSelection}
                  onsave={handleSave}
                  draft-values={saveDraftValues}
                  hide-checkbox-column="true" 
                  show-row-number-column="true"
                  columns={accountColumns}>
              </lightning-datatable>
          </div>
        </lightning-card>
      </div>
</template>

Please find the JSON stored in local storage which is retrieved on Opportunity Product Page:

[{"Id":"a055e000005IpoOAAS","Name":"COUNTRY OVEN BAKERY - CU","Type__c":"Ship-To","Division__c":"68","Account__c":"0015e00000cWZmMAAW","AccountName":"/a055e000005IpoOAAS"},{"Id":"a055e000005IpoPAAS","Name":"COUNTRY OVEN BAKERY","Type__c":"Ship-To","Division__c":"74","Account__c":"0015e00000cWZmMAAW","AccountName":"/a055e000005IpoPAAS"}]

I'm new to LWC and would need help to display the JSON in the lightning datatable.

Any kind of help is appreciated.

Thank you.

1 Answer 1

2

You are storing the rows as a string - and you even turn the rows into a string here:

this.selectedSapAccounts = JSON.stringify(selectedRows); 

So you need to turn that string back to an Array on retrieval:

let localDetails = localStorage.getItem('SelectedSAPAccountsDetails');
this.sapAccounts = JSON.parse(localDetails);
1
  • 1
    Thank you @CasparHarmer for your reply. I tried with the suggested solution and it worked.
    – Rose
    Commented Nov 3, 2022 at 20:46

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .