Last Updated on June 17, 2022 by Rakesh Gupta

Big Idea or Enduring Question:

How to display logged-in user information in the lightning web component?

Objectives:

After reading this blog, you’ll be able to:

Data Binding in a template
Display logged-in user information in the lightning web component (lwc)
Get use details from lightning web component (lwc) JavaScript
Understand when to use wire decorator
Configure a lightning web component for Lightning App Builder
and much more

Business Use case

Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). She just started learning the lightning web component and wondering if someone could help her to understand how to display the following logged-in user information on a lightning web component:

User Id
Full Name
Role
Profile
Manager Name

Similar to the following screenshot:

What is Data Binding in Lightning Web Component?

Data binding connects an application user interface to a data object (code). It enables change propagation by reflecting user interface modifications in the code and vice versa. It can be either one-way or

Technically, a data binding connects data from properties in the component’s JavaScript class to an element in the template. You create data bindings by adding curly braces {} to a component in a template.

For example, in the below code, the textSource property in the template is bound to the textSource property in the JavaScript class.

Copy Code


<!--dataBinding.html--> 
<template> 
   {textSource} 
</template>

Copy Code


//dataBinding.js 
import { LightningElement } from 'lwc'; 
export default class BindingExample extends LightningElement { 
  textSource = 'Text set via data binding'; 
}

What is Wire Decorator in Lightning Web Component?

Wire decorator in lightning web component uses a reactive wire service to read Salesforce data. An @wire takes the name of a wire adapter and an optional object specific to the wire adapter. You can use a $ to mark the property of a configuration object as reactive.

@wire property is useful for consuming the data or an error. In salesforce lightning web component @wire can be used :

To a property
As a function

Copy Code


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

Configure a Lightning Web Component for Lightning App Builder?

Before you can use your custom Lightning web component on a Lightning page in Lightning App Builder, there are a few steps to take.

The <component>.js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder. Update the configuration file to:

Make your component usable in Lightning App Builder
Define what types of Lightning pages your lightning web component can be used on
Configure your component’s properties.
Set your component’s supported objects.

Copy Code



<targetConfigs>
    <targetConfig targets="lightning__AppPage">
        <supportedFormFactors>
            <supportedFormFactor type="Large" />
            <supportedFormFactor type="Small" />
        </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__HomePage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
        </supportedFormFactors>
    </targetConfig>
</targetConfigs>

Automation Champion Approach (I-do):

While working on the lightning web component, you may need to display the logged-in user interface. Salesforce provides a way to get the current user’s ID directly without calling an Apex class.

There is a way in the lightning web component where you can fetch current user details without calling a server-side apex method. Let’s see in the action how to achieve it.

loggedInUserDetails.js-meta.xml

A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it.

This configuration file makes the component available for all Lightning page types but restricts support on the home page only for desktops.

Copy Code


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__HomePage">
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

loggedInUserDetails.html

To reference a User Id, name, role, profile, and manager in a template, use {property} syntax, which is the same syntax we use to reference any JavaScript property.

Copy Code


<template>
    <lightning-card title="Logged in User Details" icon-name="standard:user">
        <div class="slds-m-around_medium slds-list_horizontal slds-wrap">
            <table class="slds-table slds-table_bordered slds-table_fixed-layout" border="1px solid"
                bordercolor="#dddbda" role="grid">
                <tr>
                    <th style="background:#f3f2f2;">Id</th>
                    <td>{userId}</td>
                </tr>
                <tr>
                    <th style="background:#f3f2f2;">Name</th>
                    <td>{userName}</td>
                </tr>
                <tr>
                    <th style="background:#f3f2f2;">Role</th>
                    <td>{userRoleName}</td>
                </tr>
                <tr>
                    <th style="background:#f3f2f2;">Profile</th>
                    <td>{userProfileName}</td>
                </tr>
                <tr>
                    <th style="background:#f3f2f2;">Manager</th>
                    <td>{userManagerName}</td>
                </tr>
            </table>
        </div>
    </lightning-card>
</template>

loggedInUserDetails.js

The following javascript code imports the current user Id, name, role, profile, and manager details and assigns it to the respective properties userId, userName, userRoleName, userProfileName, userManagerName to provide access to the HTML template.

Before that we need to import the following scoped modules

Copy Code


import { getRecord } from 'lightning/uiRecordApi'; //this scoped module get the record details 
import Id from '@salesforce/user/Id'; //this scoped module imports the current user ID 
import Name from '@salesforce/schema/User.Name'; //this scoped module imports the current user full name
import RoleName from '@salesforce/schema/User.UserRole.Name'; //this scoped module imports the current user role name
import ProfileName from '@salesforce/schema/User.Profile.Name'; //this scoped module imports the current user profile name
import ManagerName from '@salesforce/schema/User.Manager.Name'; //this scoped module imports the current user manager's name

Copy Code


import { LightningElement, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import Id from '@salesforce/user/Id';
import Name from '@salesforce/schema/User.Name';
import RoleName from '@salesforce/schema/User.UserRole.Name';
import ProfileName from '@salesforce/schema/User.Profile.Name';
import ManagerName from '@salesforce/schema/User.Manager.Name';

export default class GetUserDetails extends LightningElement {
   userId = Id;
   userName;
   userRoleName;
   userProfileName;
   userManagerName;

    @wire(getRecord, { recordId: Id, fields: [Name, RoleName, ProfileName, ManagerName] })
    userDetails({ error, data }) {
        if (error) {
            this.error = error;
        } else if (data) {
            if (data.fields.Name.value != null) {
                this.userName = data.fields.Name.value;
            }
            if (data.fields.UserRole.value != null) {
                this.userRoleName = data.fields.UserRole.value.fields.Name.value;
            }
            if (data.fields.Profile.value != null) {
                this.userProfileName = data.fields.Profile.value.fields.Name.value;
            }
            if (data.fields.Manager.value != null) {
                this.userManagerName = data.fields.Manager.value.fields.Name.value;
            }
        }
    }
}

You can copy code from GitHub or Install using this URL.

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.