[Salesforce LWC] — Get User Details From LWC JS

[1] Business Scenario —

We have been working on a moderately complex lightning transformation Project using LWC and there we faced few challenges at the time of implementing user details info at Java Script layer in terms of building a custom LWC component. As per the Salesforce LWC (Refer — Why Salesforce LWC? [Advantages of Lightning Web Component — Link below) best practice(s), we have been trying to implement this in java script layer rather in apex layer to move with component framework based model.

[2] Impacted Columns —

User Id

User Phone

User MobilePhone

User Role Name

User’s Manager Id

[3] Solution Approach —

(a) Create a sample Java Script & import below lines from salesforce/schema. Remember that, User.UserRole.Name — bit tricky here syntactically.

[ UserInfo.js ]
//import user details
import UsrId from '@salesforce/user/Id';
import UsrPhone from '@salesforce/schema/User.Phone';
import UsrMPhone from '@salesforce/schema/User.MobilePhone';
import UsrRoleName from '@salesforce/schema/User.UserRole.Name';
import UsrManagerId from '@salesforce/schema/User.ManagerId';

(b) Invoke Lightning Web Component reactive Wire Method getRecord() to load the data in respective columns by passing the UsrId.

Tricky syntax is — data.fields.UserRole.value.fields.Name.value

//user details
@track CreatorPhoneVal;
@track CreatorMPhoneVal;
@track CreatorRoleVal;
@track MIdVal;
// ****************************************************************    
// Wire - getRecord()
// Set Phone; Mobile Phone & User Role
// ****************************************************************
@wire(getRecord, {recordId: UsrId, fields: [UsrPhone,UsrMPhone,UsrRoleName,UsrManagerId]}) 
wireuser({error,data}) {
    if (error) {
        this.error = error; 
    } else if (data) {
       if (data.fields.Phone.value != null) {
            this.CreatorPhoneVal=data.fields.Phone.value;
       }
       if (data.fields.MobilePhone.value != null) {
            this.CreatorMPhoneVal=data.fields.MobilePhone.value; 
       }
       if (data.fields.UserRole.value != null) {
            this.CreatorRoleVal=data.fields.UserRole.value.fields.Name.value;
       }
       if (data.fields.ManagerId.value != null) {
            this.MIdVal=data.fields.ManagerId.value; 
       }
   }
}

(c) At your html layer, just create few Lightning input columns (SLDS standards) in disabled (based on requirement) mode to retrieve the value(s) from respective Java Script @track decorator.

<lightning-layout-item flexibility="auto" size="6" padding="around-small">
    <div class="slds-form_horizontal">
        <lightning-input disabled type="text" name="CreatorMobile" 
                         value={CreatorMPhoneVal} class="validvalue MPh" 
                         label="Creator Mobile" >
         </lightning-input>
    </div>
</lightning-layout-item>
<lightning-layout-item flexibility="auto" size="6" padding="around-small">
    <div class="slds-form_horizontal">
        <lightning-input disabled type="text" name="CreatorPhone" 
                         value={CreatorPhoneVal} class="validvalue Ph" 
                         label="Creator Phone" >
        </lightning-input>
    </div>
</lightning-layout-item>
<lightning-layout-item flexibility="auto" size="6" padding="around-small">
    <div class="slds-form_horizontal">
        <lightning-input disabled type="text" name="CreatorRole" 
                         value={CreatorRoleVal} class="validvalue CRole" 
                         label="Creator Role" >
        </lightning-input>
    </div>
</lightning-layout-item>