Displaying User Level’s Dynamically In Lightning Web Component

 Agenda

I am writing this blog, to display dynamic user data beautifully, It enables each user to see the users they need to report. With this dynamic component, you can control data visibility without having to create a separate component as well, with its own running user. 

Now, It’s time to show the user’s of our organization dynamically their role in a beautiful way.

How does it work?

You fetch the User’s record with a simple Apex SOQL query and just displaying details Dynamically over a Lightning Web Component, And place that component where ever you want.

Requirements:

• You need to have access to your org.

• Should have the VS Code Installed in your system.

• You should have some basic knowledge of Lightning Web Component.

About Lightning Web Component (LWC):

Lightning Web Components are lightweight custom elements based on native HTML and Modern JavaScript.

Lightning Web Component or LWC are custom HTML elements built using HTML and modern JavaScript. We Basically work on ES6(ECMAScript 2015). LWC uses core Web Components standards and delivers exceptional performance.

A Lightning web component that renders UI must include an HTML file, a JavaScript file, and a metadata configuration file. But we can create CSS and SVG file’s also as per our needs.

Start Working On Agenda:

First, Create a Simple Apex Class (name it as you wish) and use that class to fetch the records of users you need to display on the hierarchy.

We need to create a method in the class and make it AuraEnabled to access it in the Component.

And this method return’s the list of users we request with the help of the User Id List. And This method returns the list of required fields.

<! ----- Apex Class ----- >

LWC (HTML PORTION)

Now, Create a Lightning Web Component (name it as you wish), I name It as an app. 

The HTML file of the component is app.html. It has a div which contains some classes.

Our aim is to change the CSS class of div for every different user and display it beautifully.

We are getting User Data in a List and we render a list of users, using for:each directive

In the template. We can call it for loop in LWC. Use for:item=” current item” to access

the current item.

We are Using Img <img src=” User Photo”/> to show the User’s Profile Picture.

For Displaying Level we are using the “ index method ” function which is getting

the sequence of numbers from the JavaSript file of the Component.

And the main part the Styling one, for that we are using the “ user style ” method to

get the styling from the CSS file of the component.

<! ----- App.html----- >

                                                              <! ----- App.Css----- >

The CSS file Displays styling according to different users.

LWC (JAVASCRIPT PORTION)

                                                         <! ----- App.js----- >

And, Here Is our Resulting Output:

Thank You and Regards

Rahul Vaishnav