2

How to disable inline Edit for certain profiles.

      <lightning:datatable 
                         keyField="Id" 
                         aura:id="subscriberTable" 
                         data="{! v.data }" 
                         columns="{! v.columns }" 
                         hideCheckboxColumn="true" 
                         showRowNumberColumn="false" 
                         initialRows="{! v.recordsToDisplay}" sortedBy="{! v.sortedBy }" 
                         sortedDirection="{! v.sortedDirection }" 
                         onsort="{! c.updateColumnSorting}" 
                         draftValues="{! v.draftValues }" 
                         onsave="{! c.handleSaveEdition }" />
</div>

Js side:

     component.set('v.columns', [{
            label: 'Name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label: 'Alias',
            fieldName: 'Alias__c',
            type: 'text',
            sortable: true
        },
        {
            label: 'Point of Contact(Email)',
            fieldName: 'Email__c',
            type: 'text',
            sortable: true,
            editable: true
        },
        {
            label: 'Active',
            fieldName: 'Active__c',
            type: 'boolean',
            sortable: true,
            editable: true
        },
        {
            label: 'Portal Access',
            fieldName: 'Portal_Access__c',
            type: 'boolean',
            sortable: true,
            editable: true,

        },


    ]);

How to set "Active" field editable to false for these 2 profiles (Test1,Test2).In normal Table we can use aura:if but Iam not sure how to do this here.

//I have tried this approach but it works but a lot of code

JS side:

  helper.userEditAccess(component,event,helper);

Helper:

   userEditAccess: function(component, event, helper) {
    var action = component.get("c.canUserEdit");
    action.setCallback(this, function(a) {
        var state = a.getState();
        if (state === 'SUCCESS') {
            if (a.getReturnValue() == true) {
                component.set('v.columns', [{
                        label: 'Name',
                        fieldName: 'Name',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Alias',
                        fieldName: 'Alias__c',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Point of Contact(Email)',
                        fieldName: 'Email__c',
                        type: 'text',
                        sortable: true,
                        editable: true
                    },
                    {
                        label: 'Active',
                        fieldName: 'Active__c',
                        type: 'boolean',
                        sortable: true,
                        editable: false
                    },
                    {
                        label: 'Portal Access',
                        fieldName: 'Portal_Access__c',
                        type: 'boolean',
                        sortable: true,
                        editable: false,

                    },


                ]);
            } else if (a.getReturnValue() == false) {
                component.set('v.columns', [{
                        label: 'Name',
                        fieldName: 'Name',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Alias',
                        fieldName: 'Alias__c',
                        type: 'text',
                        sortable: true
                    },
                    {
                        label: 'Point of Contact(Email)',
                        fieldName: 'Email__c',
                        type: 'text',
                        sortable: true,
                        editable: true
                    },
                    {
                        label: 'Active',
                        fieldName: 'Active__c',
                        type: 'boolean',
                        sortable: true,
                        editable: true
                    },
                    {
                        label: 'Portal Access',
                        fieldName: 'Portal_Access__c',
                        type: 'boolean',
                        sortable: true,
                        editable: true,

                    },


                ]);
            }
        } 
    });
    // enqueue the action 
    $A.enqueueAction(action);
}

Apex class:

@AuraEnabled(cacheable=true)
public static Boolean canUserEdit() {
    List<string>profileNameList=new List<string>();
    List<user>userList=[SELECT ID,PROFILE.NAME,PROFILE.Id FROM USER where profile.name='Test-Admin'];
    for(User us:userList){
        profileNameList.add(us.PROFILE.Id);
    }
    Id profileId = UserInfo.getProfileId();
    if(profileNameList.contains(profileId)){
        return true;
    }else{
        return false;
    }
}
1
  • Assign a custom permission to both profiles check whether the user has custom permission or not during init of component based on that set editable "true" or "false"
    – User6670
    Mar 19, 2020 at 13:42

1 Answer 1

2

With the usage of Apex

Assuming this is your Controller:

public class TestController {

    public  static final Set<Id> EDIT_ALLOWED_PROFILE_IDS = new Set<Id> {
        '00e2o000001XMNaAAO',
        '00e2o000001XMNaBCS'
    };

    @AuraEnabled(cacheable=true)
    public static Boolean canUserEdit() {
        Id profileId = UserInfo.getProfileId();
        return EDIT_ALLOWED_PROFILE_IDS.contains(profileId);
    }
}

EDIT_ALLOWED_PROFILE_IDS can be of course initialized via Custom Settings, Custom Metadata and so on.

Then use this method in your JS code and assign its result to the editable property.

LWC version

HTML:

<template>
    <div style="height: 300px;">
        <lightning-datatable
                key-field="id"
                data={data}
                show-row-number-column
                row-number-offset={rowOffset}
                suppress-bottom-bar
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

JS:

import { LightningElement, wire, track } from 'lwc';
import canUserEdit from '@salesforce/apex/TestController.canUserEdit';

const columns = [
    { label: 'Label', fieldName: 'name'},
    { label: 'Website', fieldName: 'website', type: 'url'},
    { label: 'Phone', fieldName: 'phone', type: 'phone'},
    { label: 'CloseAt', fieldName: 'closeAt', type: 'date'},
    { label: 'Balance', fieldName: 'amount', type: 'currency'}
];

export default class TestLwcComponent extends LightningElement {

    connectedCallback() {
        canUserEdit()
            .then(result => {
                this.columns.forEach(function (item, index) {
                    item.editable = result
                });
                this.columns = [...this.columns];
            })
            .catch(error => {
                console.log(error);
            })
        this.data = [
            {
                "name":"Maddison Emard",
                "email":"[email protected]",
                "website":"https://jennings.org",
                "amount":"134.01",
                "phone":"803.854.4656 x4777",
                "closeAt":"2020-04-22T22:31:35.941Z",
                "id":"1baf5e28-f839-4ddd-84ee-e71f0bcca59d"
            },
            {
                "name":"Lilla Stamm",
                "email":"[email protected]",
                "website":"http://princess.net",
                "amount":"306.11",
                "phone":"1-753-685-9600 x9132",
                "closeAt":"2020-05-29T10:20:59.730Z",
                "id":"4d38f892-0c6e-42c1-beb3-a41faae1c501"
            },
            {
                "name":"Pauline Labadie",
                "email":"San[email protected]",
                "website":"https://mafalda.name",
                "amount":"57.54",
                "phone":"860.982.3835 x2136",
                "closeAt":"2021-01-08T23:48:57.409Z",
                "id":"ad225ea1-8a64-4a05-99e9-bba42c865d45"
            }
        ];
    }

    @track columns = columns;
    @track data = [];
    @track rowOffset = 0;
}

Aura version

Component:

<aura:component controller="TestController" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="errors" type="Object" default="[]"/>
    <aura:attribute name="draftValues" type="Object" default="[]"/>

    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <div class="slds-p-around_medium">
        <h1 class="slds-text-heading_large">Inline edit playground</h1>
    </div>

    <div style="height: 300px">
        <lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            keyField="id"
            errors="{! v.errors }"
            draftValues="{! v.draftValues }"
        />
    </div>
</aura:component>

Controller:

({
    init: function (cmp, event, helper) {
        var action = cmp.get("c.canUserEdit");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var canEdit = response.getReturnValue();
                cmp.set('v.columns', [
                    { label: 'Label', fieldName: 'name', editable: canEdit},
                    { label: 'Website', fieldName: 'website', type: 'url', editable: canEdit},
                    { label: 'Phone', fieldName: 'phone', type: 'phone', editable: canEdit},
                    { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: canEdit},
                    { label: 'Balance', fieldName: 'amount', type: 'currency', editable: canEdit}
                ]);
            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " + errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);

        cmp.set('v.data', [
            {
                "name":"Maddison Emard",
                "email":"[email protected]",
                "website":"https://jennings.org",
                "amount":"134.01",
                "phone":"803.854.4656 x4777",
                "closeAt":"2020-04-22T22:31:35.941Z",
                "id":"1baf5e28-f839-4ddd-84ee-e71f0bcca59d"
            },
            {
                "name":"Lilla Stamm",
                "email":"[email protected]",
                "website":"http://princess.net",
                "amount":"306.11",
                "phone":"1-753-685-9600 x9132",
                "closeAt":"2020-05-29T10:20:59.730Z",
                "id":"4d38f892-0c6e-42c1-beb3-a41faae1c501"
            },
            {
                "name":"Pauline Labadie",
                "email":"[email protected]",
                "website":"https://mafalda.name",
                "amount":"57.54",
                "phone":"860.982.3835 x2136",
                "closeAt":"2021-01-08T23:48:57.409Z",
                "id":"ad225ea1-8a64-4a05-99e9-bba42c865d45"
            }
        ]);
    }
});

Without the usage of Apex

Aura version

Instead of the Apex controller, you can use a Lightning Data Service.

Component:

<aura:component controller="TestController" implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="errors" type="Object" default="[]"/>
    <aura:attribute name="draftValues" type="Object" default="[]"/>

    <aura:attribute type="String" name="permittedProfiles" default="{!join('','00e2o0000022wBLAAY,', '00e2o000001XMNaBCS')}"/>

    <aura:attribute name="currentUser" type="User" />
    <force:recordData
        fields="Name, Email, UserType, ProfileId"
        recordId="{!$SObjectType.CurrentUser.Id}"
        targetFields="{!v.currentUser}"
        mode="VIEW"
        recordUpdated="{!c.handleRecordUpdated}"
    />

    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <div class="slds-p-around_medium">
        <h1 class="slds-text-heading_large">Inline edit playground</h1>
    </div>

    <div style="height: 300px">
        <lightning:datatable
            columns="{! v.columns }"
            data="{! v.data }"
            keyField="id"
            errors="{! v.errors }"
            draftValues="{! v.draftValues }"
        />
    </div>
</aura:component>

Controller:

({
    init: function (cmp, event, helper) {
        cmp.set('v.data', [
            {
                "name":"Maddison Emard",
                "email":"[email protected]",
                "website":"https://jennings.org",
                "amount":"134.01",
                "phone":"803.854.4656 x4777",
                "closeAt":"2020-04-22T22:31:35.941Z",
                "id":"1baf5e28-f839-4ddd-84ee-e71f0bcca59d"
            },
            {
                "name":"Lilla Stamm",
                "email":"[email protected]",
                "website":"http://princess.net",
                "amount":"306.11",
                "phone":"1-753-685-9600 x9132",
                "closeAt":"2020-05-29T10:20:59.730Z",
                "id":"4d38f892-0c6e-42c1-beb3-a41faae1c501"
            },
            {
                "name":"Pauline Labadie",
                "email":"[email protected]",
                "website":"https://mafalda.name",
                "amount":"57.54",
                "phone":"860.982.3835 x2136",
                "closeAt":"2021-01-08T23:48:57.409Z",
                "id":"ad225ea1-8a64-4a05-99e9-bba42c865d45"
            }
        ]);
    },
    handleRecordUpdated: function(cmp, event, helper) {
        var permittedProfilesAttribute = cmp.get('v.permittedProfiles');
        var permittedProfilesArray = permittedProfilesAttribute.split(',');
        var eventParams = event.getParams();

        if(eventParams.changeType === "LOADED") {
            var currentUser = cmp.get('v.currentUser');
            var canEdit = permittedProfilesArray.includes(currentUser.ProfileId);

            cmp.set('v.columns', [
                { label: 'Label', fieldName: 'name', editable: canEdit},
                { label: 'Website', fieldName: 'website', type: 'url', editable: canEdit},
                { label: 'Phone', fieldName: 'phone', type: 'phone', editable: canEdit},
                { label: 'CloseAt', fieldName: 'closeAt', type: 'date', editable: canEdit},
                { label: 'Balance', fieldName: 'amount', type: 'currency', editable: canEdit}
            ]);
        }
    }
});

The examples above are based on Datatable Example: Data Table With Inline Edit from LWC Docs and Aura Docs.

7
  • Thanks got it. without apex any work arround??
    – Annappa
    Mar 19, 2020 at 15:27
  • @AnnappaPH added LWC component utilizing Apex code to my answer. Why not using Apex? Mar 19, 2020 at 15:51
  • I will agree with your solution. no comments.but iam looking for anyother work arround?
    – Annappa
    Mar 20, 2020 at 4:42
  • @AnnappaPH I believe there is, have a look at that link. I'll update my answer during the day with another working solution. Mar 20, 2020 at 7:20
  • thanks.Its lightning components
    – Annappa
    Mar 20, 2020 at 8:17

You must log in to answer this question.

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