1

How do I conditionally alternate a button icon displayed through a lightning-datatable? I would like to change the button icon based on data coming from the Apex method? The AccountContactRelation.Roles field specifically. So if that field contains a certain Role I want to change the button icon (iconName) from utility:add to standard:task2. All suggestions are appreciated. Thanks ahead of time!

enter image description here

acr.js

import { LightningElement, wire, track, api } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import { getRecord, getRecordNotifyChange } from 'lightning/uiRecordApi';
import getpeople from '@salesforce/apex/controller.getpeople'; 
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACR_OBJECT from '@salesforce/schema/AccountContactRelation';
import saveACR from '@salesforce/apex/controller.saveACRTaxInvoiceRole';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class TaxRelatedACRs extends LightningElement {

    @api recordId;
    @track people = [];
    @track hasACRs = false;

    @track columns = [
        {
            label: 'Action',
            type: 'button-icon',
            initialWidth: 75,
            typeAttributes: {
                iconName: 'utility:add',
                title: 'Assign',
                variant: 'border-filled',
                alternativeText: 'Assign'
            }
        },
        {
            label: 'Name',
            fieldName: 'contactname',
            type: 'text',
            sortable: false
        },
        {
            label: 'Email',
            fieldName: 'contactemail',
            type: 'text',
            sortable: false
        },
        {
            label: 'Roles',
            fieldName: 'roles',
            type: 'text',
            sortable: false
        }

    ];

    @wire(getObjectInfo, { objectApiName: ACR_OBJECT })
    objectInfo;
    
    @wire(getpeople,{recordId:'$recordId'}) 
    wiredPeople(result){
        this.wiredPeopleResults = result;
        let {data, error} = result;
        if(data){
            console.log('data-->'+JSON.stringify(result.data));
            this.people = data;
            this.error = undefined;

        } else if (error) {
            this.people = undefined;
            this.error = error;

        }
    }

    // Row Action event to update the AccountContactRelation record
    handleRowAction(event) {
        let row = event.detail.row;
        console.log('row-->'+JSON.stringify(row)); 
        this.record = row;
        this.isLoading = true;

        saveACR({jsonObject: JSON.stringify(this.record)}).then(res =>{ 

            console.log(res); 
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: 'Person Assigned',
                    variant: 'success'
                })
            );

            return refreshApex(this.wiredPeopleResults);

        }).catch(err => {
            console.log(err); 

        });
        
    }

}

acr.html

<template>

    <lightning-card title="Related Contacts" icon-name="standard:people"> 

        <lightning-datatable data={people} 
                             columns={columns} 
                             key-field="id"
                             onrowselection={handleRowSelection}
                             hide-checkbox-column="true"
                             onrowaction={handleRowAction}
                             ></lightning-datatable>

                              
    </lightning-card> 

</template>
1

Change:

            iconName: 'utility:add',

To:

            iconName: { fieldName: 'rowIcon' },

And then add the attribute to each row:

this.people = data.map(item => ({ ...item, rowIcon: item.Role == 'Some Value'?'standard:task2':'utility:add' }));
3
  • thank you for the quick response. The third part in that is where I struggle to get my mind around. Does that go in the wired service? Also what does the "..." represent? Is that saying I want that to happen on each row?
    – user891859
    Sep 24 '20 at 15:25
  • @user891859 Yes, replace the this.people = data; with the new version. The ... operator is the spread syntax. It's used for a few things, one of which is to copy an object's properties to a new object. We do this because the data object is immutable (cannot be modified), so we need to copy it to add a new value to it.
    – sfdcfox
    Sep 24 '20 at 15:31
  • This worked great - thank you for your help! Much appreciated.
    – user891859
    Sep 24 '20 at 15:42

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.