Component Context in LWC

 

In this topic, we will cover it out basic of component context used in LWC, here are given below.

• Load third party JS file in LWC Component
• Load Asset file in LWC
• Access Custom Label in LWC
• Check User/Custom permission in LWC
• Get information about current user

Load third party JS file in LWC Component

▶ To use external CSS or JS library, first you need to download js or css library.
▶ Then upload into static resource
▶ Import static resource into LWC Component

import RESOURCE_NAME from "@salesforce/resourceUrl/RESOURCE_NAME";

▶ Import loadStyle (Used to access css file), loadScript (Used to access js file) methods from lightning/platformResourceLoader, Both methods create and return promises.
loadScript(self, fileUrl): Promise 
loadStyle(self, fileUrl): Promise
 self — A reference to the component. The value must be “this”.
 fileUrl — A string that contains the path to the JavaScript/css file.

import { loadStyle, loadScript } from "lightning/platformResourceLoader";

▶ If you want to call multiple methods at once then you can use “Promise.all()” and pass your method in Array form.

▶ The .then() callback is invoked only after the load completes and only if no error occurs. In then() you can access js file methods.

loadScript(this, myLib + "/myLib.js").then(() => {
  let result = myLib.myFunction(2, 2);
});

Note :- To invoke the platformResourceLoader methods we use renderedCallback() or connectedCallback() Methods based on the Requirement.

Load Asset file in LWC

To create Asset file, 

• Go to org, in App Launcher type Files.
• Then move into libraries and click Asset Files
  
• Then upload your Asset file.

To check your Asset File, simply go to your setup, on quick find search asset file, you will get list of asset files over there.

See demo below

Import content asset files from the @salesforce/contentAssetUrl scoped module.

Result

Access Custom Label in LWC

▶ Create custom label in org

▶ Import labels from the @salesforce/label scoped module.

import labelName from "@salesforce/label/labelReference";

▶ To access custom labels use ‘@salesforce/label/c.your_custom_label_name’

Check User/Custom Permission in LWC

▶ Import Salesforce permissions from the @salesforce/userPermission and @salesforce/customPermission scoped modules.

import hasPermission from "@salesforce/userPermission/userPermissionName";
import hasPermission from "@salesforce/customPermission/customPermissionName";

▶ It returns a Boolean value.

▶ To check whether a user has a permission, import a static reference to the permission and evaluate whether its ‘true’ or ‘undefined’.

Get Information about Current User

▶ To get information about the current user, use the @salesforce/user scoped module.

import property from "@salesforce/user/property";

Property 
 ▶ Id:- The supported properties are Id, which is the user’s ID,
 ▶ isGuest:- which is a Boolean value indicating whether the user is a guest user.

Follow me on linkedIn and Twitter for such more related post