Disable Lightning Combobox in LWC based on FLS

Question

I know there is a way to check if the object/field is updateable, then only it will allow the user to read or update the field like below apex :

if(!Schema.SObjectType.Account.fields.Type.isUpdateable()) {
   //Fields Accessibility
   ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR,'Error: Insufficient Access'));
   return null;
  }
  acc.Type = 'Prospect';
  update acc;
}

But the problem with the above is that the UI won't show it as disabled rather, it spits out an error message.

So for certain profiles (say "Officer") with FLS of "Read-only", I want it such that when I log in as System Admin the combobox will be updateable. However as that "Officer", the lightning combobox to be disabled like below :

DisableComboboxExample.html

<td>
   <lightning-combobox
     name={index}
     label="Type"
     variant="label-hidden"
     class="label-hidden"
     data-recid={item.Id}
     data-id="Type"
     value={item.xitem.Response__c}
     options={picklistValuesData}
     onchange={handleChange}
     read-only={JS Function logic??}>
     </lightning-combobox>
</td>

DisableComboboxExample.js

import { LightningElement,track,wire, api } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';

import ACCOUNT_OBJECT from '@salesforce/schema/account';
import ACCOUNT_TYPE from '@salesforce/schema/Account.TYPE';
import ExecuteUpdate from '@salesforce/apex/GetXItems.ExecuteUpdate';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';


export default class DisableComboboxExampleextends LightningElement {
    @track error;
    @track picklistValuesData;

// private
     _recordTypeId;

    @wire(getObjectInfo, { objectApiName: ACCOUNT})
    objectInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type})

    wiredPicklistValues({data,error}){
        if (data) {
            this.picklistValuesData = data.values;
        } else if (error) {
            console.log('wiredPicklistValues Error-> ', error);
        }
    }

Is there a way to code this in Javascript/Apex to expose this on HTML?

=========================================================================== * 21 OCT 2019 UPDATE *

Here is the full update example code I'm working with.

comboboxBasedOnFLS.html

<template>
    <template if:true={TypePicklistValues.data}>
        <lightning-combobox
        label="Disabled Combobox example"
        value={selectedOption}
        options={options}
        disabled={disableAccountEdit} 
        ></lightning-combobox>
    </template>
</template>

comboboxBasedOnFLS.js

import { LightningElement, api, wire, track } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import TYPE_FIELD from '@salesforce/schema/Account.Type';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

const fields = [TYPE_FIELD];

export default class ComboboxBasedOnFLS extends LightningElement {
  @api recordId;
  @track selectedOption;
  @track options;

  // private
  _recordTypeId;

  @wire(getPicklistValues, { recordTypeId: 
 '$objectInfo.data.defaultRecordTypeId', fieldApiName: TYPE_FIELD})
 TypePicklistValues;

 // Step 1
 @wire(getRecord, {recordId:'$recordId', fields})
 account({error, data}) {
    if (data) {
      let typeValue = getFieldValue(data, TYPE_FIELD);
      this.selectedOption = typeValue;
      this._recordTypeId = '012000000000000AAA'; 
    } else if (error) {
     // eslint-disable-next-line no-console
      console.log(error);
    }
  }

 // Step 2, determined by when the reactive bind is changed
  @wire(getPicklistValues, { recordTypeId: '$_recordTypeId', fieldApiName:TYPE_FIELD })
 setPicklistOptions({error, data}) {
   if (data) {
    // Apparently combobox doesn't like it if you dont supply any options at all.
    // Even though selectedOption was assigned in step 1, it wont "select" it unless it also has options
     this.options = data.values;
   } else if (error) {
     // eslint-disable-next-line no-console
    console.log(error);
  }
}

 @wire(getPicklistValues, { objectApiName: ACCOUNT_OBJECT })
   accObj;

 get disableAccountEdit() {
   return !this.accObj.data.fields.Type.updateable;
  }

}

With this code the whole component won't be visible but if I take away the

disabled={disableAccountEdit}

, the lwc component will appear.

Answer 1

Update How to get Object Describe in Lightning Web Component. You can get that using the uiObjectInfoApi module.

import { LightningElement, wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class FieldDescribeDemo extends LightningElement {
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    propertyOrFunction;

    // just to check what info we get.
    get propertyOrFunction1(){
        return JSON.stringify(this.propertyOrFunction);
    }
}

See I have stringified the response I am getting from uiObjectInfoApi

<template>
    {propertyOrFunction1}
</template>

Which gave me all of the schema details for an account in this JSON structure.

So basically you can check if the field is editable or not using below syntax.

propertyOrFunction.data.fields.<Field-Api-Name>.<createable/updateable>

eg: If I want to check if I can edit the AccountNumber field, I will use the below syntax.

propertyOrFunction.data.fields.AccountNumber.updateable

So using this you can easily disable it using another property/function like below JS code.

get disableAccountEdit() {
    return !this.propertyOrFunction.data.fields.AccountNumber.updateable;
}

HTML:

<lightning-combobox
     name={index}
     label="Type"
     variant="label-hidden"
     class="label-hidden"
     data-recid={item.Id}
     data-id="Type"
     value={item.xitem.Response__c}
     options={picklistValuesData}
     onchange={handleChange}
     disabled={disableAccountEdit}>
</lightning-combobox>

Playground Example to disable input box

---

Update based on Update in Question

objectInfo was not defined anywhere in your updated code.

See below example, it works fine for me.

@wire(getPicklistValues, {
    recordTypeId:
        '$accObj.defaultRecordTypeId', fieldApiName: ACCOUNT_TYPE
})
TypePicklistValues;

@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
wiredAccountInfo({ error, data }) {
    console.log('in wiredAcountInfo ' + JSON.stringify(this.data));
    console.log('in wiredAcountInfo ' + JSON.stringify(this.error));
    if (data) {
        console.log('in wiredAcountInfo sucess ' + JSON.stringify(data));
        this.accObj = data;
        this.error = undefined;
    } else if (error) {
        console.log('error > ' + error);
        this.error = error;
        this.accObj = undefined;
    }
}

get disableAccountEdit() {
    if(this.accObj){
        return !this.accObj.fields.Type.updateable;
    }
    return false;
}

get hasPicklistValues() {
    return this.TypePicklistValues && this.TypePicklistValues.data && this.TypePicklistValues.data.values;
}

HTML

<template>
    <template if:true={hasPicklistValues}>
        <lightning-combobox label="Disabled Combobox example" value={selectedOption} options={TypePicklistValues.data.values}
            disabled={disableAccountEdit}></lightning-combobox>
    </template>
</template>