Getting Current User Information in Lightning Web Component Without calling Apex Method

Lightning Web Component allows us to get current User information without calling any server method.

Let’s go through the code:-

As you all know, Lightning web Component has three main components in its bundle. I have created a Lightning Web Component called userInformation.

A Lightning web component that renders UI must include an HTML file, a JavaScript file, and a metadata configuration file. The files must use the same name so the framework can autowire them. A service component (library) must include a JavaScript file and a metadata configuration file.

userInformation.html

The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it.

Below code includes a Lightning Card which includes a property to show Current user id and lightning-record-view-form component to show other user fields value. We are getting the value of userId property from JS file of the Lightning web component.

UserInformation.js

Every component must have a JavaScript file. JavaScript files in Lightning web components are ES6 modules.

import { LightningElement } from 'lwc';
import Id from '@salesforce/user/Id';
export default class UserInformation extends LightningElement {
    userId = Id;
}

Here we are importing User record id and setting it to property used in the html file. We do not have used track because user information will not get changed for a session.

userInformation.js-meta.xml

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

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

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

Its time to add your component to your lightning page in Lightning Experience. As the above component will be available on the app, record as well as the home page. Edit your page and drag the component on the page and save it. Now, You have the User Information card built on top of Lightning Web Component without calling apex method.