Get record details by UI API

As discussed earlier, Salesforce introduced UI(User Interface) API to build Salesforce UI for mobile and custom web apps by calling this UI API. You don’t need to write Apex Class to fetch data or DML operations, just need to call UI API. This UI API provides the following features as per Salesforce OOB functionality.

• FLS(Field Level Security)
• Sharing Settings
• Use SOQL to get data at backend services
• Get Object, Theme & Layout Information

Now, we will try to get User details based on logged in User’s Id by UI API.
So, we have created one Lightning Web Component named as “showWireUIStaticUser”.

Step 1: First, we need to update the “showWireUIStaticUser.js-meta.xml” file which is responsible to set the visibility of the component into the Lightning App Builder.

showWireUIStaticUser.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="showWireUIStaticUser">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Step 2: Need to update the respective HTML file.

showWireUIStaticUser.html

<template>
    <lightning-card title="Showing Static Record (Wire * UIRecordAPI)">            
        <lightning-layout> 
          <lightning-layout-item flexibility="auto" padding="around-small">
               User 
               <template if:true={userObj.data}> 
                    <div class="slds-m-around_medium">                            
                        <p>{name}</p>
                        <p>{alias}</p>
                        <p><lightning-formatted-email value={email}></lightning-formatted-email></p>
                    </div>
                </template>
                <template if:true={userObj.error}>
                    {userObj.error}>
                </template>
          </lightning-layout-item>
        </lightning-layout> 
    </lightning-card>
</template>

Here, we are trying to show the details such as Name, Alias, Email of the user.

Step 3: Now, we have used UI API by calling uiRecordApi to get the above user details.

showWireUIStaticUser.js

import { LightningElement, wire } from 'lwc';
import CURRENTUSERID from '@salesforce/user/Id'; 
import {getRecord, getFieldValue} from 'lightning/uiRecordApi';

import USER_NAME_FIELD from '@salesforce/schema/User.Name';
import USER_ALIAS_FIELD from '@salesforce/schema/User.Alias';
import USER_EMAIL_FIELD from '@salesforce/schema/User.Email';

const FIELDS= [USER_NAME_FIELD, USER_ALIAS_FIELD, USER_EMAIL_FIELD];

export default class ShowWireUIStaticUser extends LightningElement {

    userId = CURRENTUSERID;

    @wire(getRecord,{recordId: '$userId', fields: FIELDS}) userObj;

    get name(){
        return getFieldValue(this.userObj.data, USER_NAME_FIELD);
    }

    get alias(){
        return getFieldValue(this.userObj.data, USER_ALIAS_FIELD);
    }

    get email(){
        return getFieldValue(this.userObj.data, USER_EMAIL_FIELD);
    }

}

Here, we have imported two adapter Ids or standard functions such as getRecord, getFieldValue from uiRecordApi.
We got the current logged in User’s Id by using ‘@salesforce/user/Id‘ and set this Id to a private property named “userId“.

Now, as per wiring rules, we have used @wire decorator to wire a property named as userObj which is reactive.

@wire(getRecord,{recordId: ‘$userId’, fields: FIELDS}) userObj; – Here we will get the User details by passing the current logged in user’s Id and fields to getRecord adapter. Please notice that we have used $ before the passing property to recordId. It’s applicable for only wire decorator. So, userObj property has user details.

After that, we will use the getter properties to get the value based on a particular field. We can take the example of get Name(). Here, we have used another adapter such as getFieldValue where we need to pass userObj.data and the respective field such as Name to get the details. Actually, getFieldValue finds the information such as Name from the entire User Details(userObj.data).

Step 4: At last, we have to place this component into the Lightning Home/App or Record page.

Result:

Q. Why do we have used Salesforce Schema to get fields API Name?

If you see the showWireUIStaticUser.JS file, we have imported field API Name from Salesforce Schema and we have created the array of fields and passed this array to wire service to get the User details. However, we can create the array of fields without using Salesforce Schema just like const fields = [‘Name’, ‘Alias’, ‘Email’];. Here we have just directly put the respective fields’ API Names. Now question is, why do we have used Salesforce Schema?

If we use Salesforce Schema to get the Fields’ API Names, Salesforce considers referential integrity. That means, if the developer wants to delete any field referred in LWC by using Salesforce Schema, System will not allow deleting the field. So, It’s always best practice to use Salesforce Schema to define the Field API Name in LWC.

16,842 total views, 3 views today