0

I am working on a simple app to retrieve field permissions and then trying to update back. However, if I change the data using UI, I don't see the changed data in the log. I see this blog by @sfdcfox mentioned that wired data is immutable and we have to clone it. In my case, it is not wired data and I am calling apex method using a button, but still, I cloned the data and try to use it.

The data is reading properly, but no updates are manipulating the data.

HTML table:

<tbody>                
                                 <template if:true={permissionData}>  
                                        <template for:each={permissionData} for:item="perm"> 
                                            <tr key={perm.key}> 
                                                <td key={perm.key}>  
                                                    <lightning-input type="checkbox" ></lightning-input>                                                                          
                                                </td>                   
                                                <td key={perm.key}>  
                                                    <div class="slds-truncate" title="Name"> {perm.key}  </div>                      
                                                </td>                        
                                                <template for:each={perm.value} for:item="permActions">
                                                    <td key={permActions.Id}> 
                                                        {permActions.profilename}
                                                        <lightning-input type="checkbox" label="Read" checked={permActions.readvalue} onchange={statusChanged}></lightning-input>   
                                                        <lightning-input type="checkbox" label="Edit" checked={permActions.editvalue} onchange={statusChanged}></lightning-input> 
                                                    </td>
                                                </template>
                                            </tr>
                                          </template>
                                  </template>
                            </tbody>

JS:

 fetchPermissions({ sObjectName: 'Account', fieldList: JSON.stringify(this.selectedOptionsList)})
            .then(data => {
                this.permissionData =[];                
                let mutableData = Object.assign({},data);               

                for(let key in mutableData) {
                    // Preventing unexcepted data
                    if (mutableData.hasOwnProperty(key)) { // Filtering the data in the loop
                        this.permissionData.push({value:mutableData[key], key:key});
                    }
                }


                let recordsCount = this.permissionData.length;  
                this.totalrecords = recordsCount;  
                    if (recordsCount !== 0 && !isNaN(recordsCount)) {  
                    this.totalpages = Math.ceil(recordsCount / this.pagesize)
                    }
            })
            .catch(error => {
                this.error = error;
            }); 

Screenshot: enter image description here

Error: If you see the screenshot, after loading the data I unchecked the Read and Write input checkbox, however in the console it is still showing both "true".

Note: The reason, I was not able to use data table is that the data is complex which I was not able not to fit into the data table. For example, having two checkboxes in the same cell.

handle update:

 handleUpdate(){
        window.console.log('Updated List: '+JSON.stringify(this.permissionData));
    }
  • how are you handling statusChanged? – salesforce-sas Jul 30 at 19:11
0

LWC is not 2-way binding and so value or checked mentioned in lightning-input will not get automatically updated.

You need to update the intended value manually in onchange method handler.

<lightning-input type="checkbox" label="Read" checked={permActions.readvalue} onchange={statusChanged}>
  </lightning-input>

For this, you need below:

statusChanged(event) {
    this.permActions.readvalue = event.target.checked;
}

and then when you check permActions, it will be updated.

NOTE: The value or checked attribute you use in lightning-input can be used only for setting default value.

-----added------

You can have data- attributes inside iteration to update correct object. Example:

<lightning-input type="checkbox" label="Read" checked={permActions.readvalue} 
                   data-mid="some_reference"
                   onchange={statusChanged}>
</lightning-input>

and in JS:

statusChanged(event) {
    if (event.target.dataset.mid === 'some_reference') this.permActions.readvalue = event.target.checked;
}

You can pass record Id or any other identifiable property in data- attribute.

  • I understand that, however, how do we update the value to the specific row, we need row details with index to match the record? and also what if I do mass update for all the rows? – Ajay Jul 30 at 19:33
  • added in answer – salesforce-sas Jul 30 at 19:41
0

I've found the best way to handle creating a list dynamically is to have a separate component representing the row, enabling you to reference the row in the onchange handlers.

  • maybe, I would do this so that I can get the row details and update that row with the changed values? – Ajay Jul 30 at 19:39

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.