Category: Lightning Web Components

Get Current User Details in Lightning Web Components

Let’s discuss here how to get the current user details in lightning web components. To access the current user Id, import @salesforce/user/Id in a component’s JavaScript class. Note that @salesforce/user/ cannot be imported by itself; you must indicate the property that you want to import. For the User standard object, only the Id field is available.

 

Option 1: Using Wire Service

You can able to get the current user details using getRecord wire adapter and you can able to pass the user id from the imported modules. Create a new lightning web component using the below SFDX command

Use the below userinfoexample.html code

Use the below userinfoexample.js code

 

Use the below userinfoexample.js-meta.xml

 

Push changes and you can able to see the user details

Option 2: – Using apex class

you can able to get the user detail even using the apex class .create an Apex class that returns the user details as shown below

 

update the userinfoexample.html with below code

 

 

update userinfoexample.js code as shown below

Push changes and you can able to see the current logged in user details

 

Share JavaScript Code Between LWC and Aura

Let’s discuss here how to share the code between the lightning web component and Aura web components. To share JavaScript code between Lightning web components and Aura components, put the code in an ES6 module.

1. Create the ES6 module in your Lightning Web Components development environment.
2. Reference the module in a Lightning web component’s JavaScript file.
3. Reference the module in an Aura component.

Example – Create a Shared Code 

To share code between components, create an ES6 module and use the standard export statement to export the functionality that your module exposes. Your module can use the standard import statement to use other shared modules. Let’s create an ES6 module and see how it’s used in a Lightning web component. Create a folder for the utils module in the LWC folder in the lightning web component project directory. we will be using this utils code in between LWC and Aura Components.

The folder looks like below.

 

Create a utils.js file in the utils folder. This file is an ES6 module  that is export the isFunction

The utils module exports an isFunction() function that returns whether the provided parameter is a function.

Create a utils.js-meta.xml configuration file for the utils module.

 

 

Use Shared Code in LWC

Now you need to import the above create ES6 module utils .create a lightning web component using this command

 

Use this libcaller.html code.

Use this libcaller.js code

The c-libcaller component imports the utils module and calls the isFunction function exported by the module. The argument passed into isFunction is a function so the result is set to true. The below code shows how to import the utils code

The above below code shows how to call the imported function

 

Use this libcaller.js-meta.xml code

 

 

Push the changes to scratch org and add to layout for testing. When you click the Check Type button it will call then imported isFucntion module and set the value to the result property.

 

Use Shared Code in Aura 

Using the shared code in Aura is straight and you can able to call the module code like component and pass the aura:id

Create a libcallerAura.cmp .

The libcallerAura Aura component includes a reference to the c:utils ES6 module. We added an aura:id so that we can get a reference to the module in JavaScript code.

 

Create a libcallerAuraController.js file.

 

 

The component’s controller uses cmp.find(‘utils’) to match the aura:id in markup and get a reference to the module. The utils ES6 module exports isFunction(), which the Aura component calls. The argument passed into isFunction is a function so result is set to true. Click the button and confirm that the Aura component calls the function exported by the ES6 module and set the attribute to true as shown below.

 

Lightning Web Component Slots

Let’s discuss here what is the slots in the lightning web component and those will be used to pass the properties from the parent component. A slot in a component’s HTML file is a placeholder for markup that a parent component passes into a component’s body. A component can have zero or more slots. A slot is a placeholder for markup that a parent component passes into a component’s body. Slots are part of the Web Component specification To define a slot in markup, use the <slot> tag, which has an optional name attribute. In an Aura component, a facet is a similar concept to a slot. Please refer to this link for facets 

We have two types of slots

  1. Unnamed slots
  2. Named slots

Unnamed Slots

An unnamed slot is a placeholder for any markup that a parent component passes into the body. For Example, in this component, we have defined the slot and parent component will pass the markup into this component.

 

 

use this slotdemo.html code. This template markup is having the <slot> tag which will be used to pass the content from the parent component.

use the below slotdemo.js-meta.xml

 

create a parent component to pass the markup into the slots. use the below SFDX command.

Use the below slotwrapper.html code. When c-slot-wrapper is rendered, the unnamed slot is replaced with the markup passed into the body of c-slot-demo. Here’s the rendered output of c-slot-wrapper.

Use this slotwrapper.html code

 

use the below slotwrapper.js-meta.xml code

 

When c-slot-wrapper is rendered, the unnamed slot is replaced with the markup passed into the body of.c-slot-demo .  Here’s the rendered output of c-slot-wrapper . If a component has more than one unnamed slot, the markup passed into the body of the component is inserted into all the unnamed slots. This UI pattern is unusual. A component usually has zero or one unnamed slot.

 

 

Named Slots

named slots are the slot with the name attribute. create a lightning web component using the below SFDX command.

 

Use the below namedslots.html code. This example component has two named slots and one unnamed slot.

 

Update the soltwrapper.html code as shown below

 

Push changes and now you can able to see the output as shown below

 

 

c-slotswrapper drops:

  •  “Willy” into the firstName slot
  •  “Wonka” into the lastName slot
  •  “Chocolatier” into the unnamed slotHere’s the rendered output.
    <p>First Name: <span slot=”firstName”>Willy</span></p>
    <p>Last Name: <span slot=”lastName”>Wonka</span></p>
    <p>Description: <span>Chocolatier</span></p>

 

DOM elements that are passed to a component via slots aren’t owned by the component and aren’t in the component’s shadow tree. To access these DOM elements passed in via slots, call this.querySelector() andthis.querySelectorAll(). The component doesn’t own these elements, so you don’t use this.template.querySelector() or this.template.querySelectorAll().

The following example shows how to get the DOM elements passed to a child component from the child’s context. Provide the selector name, such as an element, for this.querySelector() and this.querySelectorAll().

 

 

 

 

 

Share JavaScript Code Between Lightning Web Components

Code reuse is important for writing the reusing as much as possible from existing code Especially if it’s good, tested, maintainable, extensible, and documented code. To share code between components, create an ES6 module and use the standard export statement to export the functionality that your module exposes. Your module can use the standard import statement to use other shared modules.

Create Shared Code

To share code between components, create an ES6 module and use the standard export statement to export the functionality that your module exposes. Your module can use the standard import statement to use other shared modules.

 

Use Shared Code

To use the shared code in a JavaScript file, use the standard import statement. For example:

This line imports the utils module in the c namespace.

Note: You can’t load JavaScript code from a static resource currently. For example, if you’re developing an Aura component, you
can reference JavaScript in a static resource using the <ltng:require> tag. This approach doesn’t work for Lightning web
components.

Example

Let’s create an ES6 module and see how it’s used in a Lightning web component. Create a folder for the utils module in the LWC folder in the lightning web component project directory

The folder looks like below.

 

Create a utils.js file in the utils folder. This file is an ES6 module  that is export the isFunction

The utils module exports an isFunction() function that returns whether the provided parameter is a function.

Create a utils.js-meta.xml configuration file for the utils module.

 

 

Use Shared Code 

Now you need to import the above create ES6 module utils .create a lightning web component using this command

 

Use this libcaller.html code.

Use this libcaller.js code

The c-libcaller component imports the utils module and calls the isFunction function exported by the module. The argument passed into isFunction is a function so the result is set to true. The below code shows how to import the utils code

The above below code shows how to call the imported function

 

Use this libcaller.js-meta.xml code

 

 

Push the changes to scratch org and add to layout for testing. When you click the Check Type button it will call then imported isFucntion module and set the value to the result property.

 

 

Lightning Web Component Reflect JavaScript Properties as a HTML Attributes

Let’s understand here how we can able to set the HTML properties from the lightning web component properties which are almost similar like how you are setting HTML attributes using the createAttribute() method. You can control whether public JavaScript properties appear as attributes in the rendered HTML of a Lightning web component. Allowing properties to appear as attributes are especially important when creating accessible components because screen readers and other assistive technologies use HTML attributes. All HTML attributes are reactive by default. When an attribute’s value changes in the component HTML, the component is re-rendered.When you take control of an attribute by exposing it as public property, the attribute no longer appears in the HTML output by default. To pass the value through to the rendered HTML as an attribute (to reflect the property), define a getter and setter for the property and call the setAttribute() method. You can also perform operations in the setter. Use a private property to hold the computed value. Decorate the private property with @track to make the property reactive. If the property’s value changes, the component rerenders.

 

In this example, we will be seeing how to set the title to a component on mouseover.

Create a lightning web component using the below SFDX command.

 

Use the below mycomponent.html code

 

Use the below mycomponent.js code. This javascript controller title as public property. It converts the title to uppercase and uses the tracked property privateTitle to hold the computed value of the title. The setter calls setAttribute() to reflect the property’s value to the HTML attribute

 

Use the below mycomponent.js-meta.xml code

 

 

Create a new lightning web component using this SFDX command. we will be calling the my-component from this parent component.

 

 

Use this parent1.html code

 

Push the changes to scratch org and add the changes to page layout and you can able to see the title on mouseover as shown below.

 

 

 

To make sure that you understand how JavaScript properties reflect to HTML attributes, look at the same code without the call to setAttribute(). The generated HTML doesn’t include the title attribute. Now update the mycomponent.js as shown below.

 

update the mycomponent.js code  as shown below

 

Push the changes to scratch org. Now when you mouseover on the parent component you dnt see the title appears. Similarly, you can use removeAttribute() to hide HTML attributes from the rendered HTML.