Day: January 27, 2019

Lightning Web Component HTML Template Directives

Let’s discuss here how to use the lightning web component HTML template directives. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing.HTML template directives are the special property associated with a template tag. A template is valid HTML with a root tag.When a component renders, the  tag is replaced with the name of the component, <namespace-component-name>. For example, in the browser console, a component with the template myComponent.html renders as <c-my-component>, where c is the default </c-my-namespace. Write templates using standard HTML and a few directives that are unique to Lightning Web Components. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM. Use simple syntax to decoratively bind a component’s template to data in the component’s JavaScript class. Here are the HTML template directives

  1. if:true|false
  2. for:each
  3. iterator:iterator
  4. key={uniqueId}
  5. lwc:dom=”manual”

 

Using If directive

Use if:true|false directive to conditionally render DOM elements in a template. if the condition expression returns the true then we will be able to render the DOM conditionally.for example, the following code shows how to use the if the directive to render the template DOM.

Let’s suppose if you want to display the values based on some text you can able to do it as shown below.

 

Please refer this link for complete example 

 

Using for:each  directive

Use this directive to iterate over an array and render a list. for:item="currentItem"Use this directive to access the current item.The currentItem placeholder is an identifier that the model injects into the current scope.for:index="index"Use this directive to access the current item’s zero-based index.The index placeholder is a new identifier that the model injects into the current scope. For Example, the following code iterates the collection of accounts

The following example the following code will iterate the collection of nested data which contains accounts and its contacts

 

Please refer this link for complete example 

 

Using iterator Directive

Use this directive to apply special behavior to the first or last item in an array and render a list. Access these properties on the iteratorName:

  • value—The value of the item in the list. Use this property to access the properties of the array. For example, iteratorName.value.propertyName.
  • index—The index of the item in the list.
  • first—A boolean value indicating whether this item is the first item in the list.
  • last—A boolean value indicating whether this item is the last item in the list.

The following example will iterate the collection of account data.

The following example iterates the collection of nested data.

Please refer this link for complete example 

 

key={uniqueId}

Use this directive to improve rendering performance by assigning a unique identifier to each item in a list. The keymust be a string or a number, it can’t be an object. The engine uses the keys to determine which items have changed.

The following example shows how to set the key directive using key={acc.Id} on for:each iterator .

The following example shows how to set the key directive using key={it.value.Id}  on iterator.

 

Using lwc:dom=”manual” directive 

Using JavaScript to manipulate the DOM isn’t recommended because the Lightning Web Components engine does it more efficiently. However, there are some third-party JavaScript libraries that take over the DOM.Because Lightning web components use shadow DOM, if a call to appendChild() manipulates the DOM, styling isn’t applied to the appended element.When using these libraries in a Lightning web component, add lwc:dom="manual" to any HTML element that you want to manipulate with JavaScript. When the engine sees the directive, it preserves shadow DOM encapsulation. Add the lwc:dom="manual" directive to an empty native HTML element. The owner of the component calls appendChild() on that element to manually insert the DOM.

 

 

Usage of iterator directive in lightning web components

Let’s discuss here how to use the lightning web component HTML template iterator directive to iterate through the collection of data. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM.  Please refer to this link for the development environment setup 

The iterator directive to iterate over an array. Add  iterator directive to a nested <template> tag that encloses the HTML elements you want to repeat.  To apply a special behavior to the first or last item in a list, use the iterator directive, iterator:iteratorName={array}. Use the iterator directive on a template tag.

Use iteratorName to access these properties:

  • value—The value of the item in the list. Use this property to access the properties of the array. For example,iteratorName.value.propertyName.
  • index—The index of the item in the list.
  • first—A boolean value indicating whether this item is the first item in the list.
  • last—A boolean value indicating whether this item is the last item in the list.

1: Create an Apex Class 

Create an apex class using the following SFDX command

here below is the complete code

 

 

2. Create Lightning web component

 

create a lightning web component using the following SFDX command.

 

In this component, we are using iterator directive to iterate the array and nested array

Use this below foriterator.html markup

 

Use this below foriterator.js code

 

 

Use this below foriterator.css markup

Use this below foriterator.js-meta.xml markup

 

3. Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder

After adding the lightning web component to record page using the app builder. you can able to see the data as shown below and one section contains the simple collection and another section contains the nested collections.

 

Understand the code 

 

The below code is used to iterate the array of data.  This example iterates over an array called iterator:it={accounts.data} and assign a key to the first element in the nested template using the key={it.value.Id}

The below code is used to iterate the nested array of data. This example iterates over an array called iterator:it={accountsInner.data}  and assign a key to the first element in the nested template using the key={it.value.Id} and in the inner template, we are taking the reference from the outer template using terator:it={it.value.Contacts} and iterating the array.

 

 

Usage of for:each template directives in Lightning web components

Let’s discuss here how to use the lightning web component HTML template for:each directive to iterate through the collection of data. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM.  Please refer to this link for the development environment setup 

To render a list of items, use for:each directive or the iterator directive to iterate over an array. Add the directive to a nested <template> tag that encloses the HTML elements you want to repeat. Regardless of which directive you use, you must use a key directive to assign a unique ID to each item. When a list changes, the framework uses the key to rerender only the item that changed. The key in the template is used for performance optimization and isn’t reflected in the DOM at run time. When using the for:each directive, use for:item="currentItem" to access the current item.  To assign a key to the first element in the nested template, use the key={uniqueId} directive.

1: Create an Apex Class 

Create an apex class using the following SFDX command

here below is the complete code and this class will get the list of accounts that will be displayed in UI.

 

2. Create Lightning web component

create a lightning web component using the following SFDX command.

In this component, we are using for each to render the list and the nested list also.

Use this foreach.html markup

 

use the below foreach.js code

use the below foreach.css

 

use the below code for foreach.js-meta.xml

 

3. Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder

After adding the lightning web component to record page using the app builder. you can able to see the data as shown below and one section contains the simple collection and another section contains the nested collections.

 

Understand the code 

The below code is used to iterate the array of data.  This example iterates over an array called accounts.data and assigning each element in the array to for:item value and assign a key to the first element in the nested template using the key={acc.Id} 

 

The below code is used to iterate the nested array of data. This example iterates over an array called accountsInner.data and assigning each element in the array to for:item value and assign a key to the first element in the nested template using the key={acc.Id} and in the inner template we are taking the reference from the outer template for:item and using the iteration using the for:each={acc.Contacts} .

 

 

 

 

 

 

 

Conditional Rendering Using if:true|false directive in Lightning web component

Let’s discuss here how to use the lightning web component HTML template if:true|false directive to display conditional data. The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. As the name suggests, the attribute directives are altering the properties of an element to which they are attached and the structural ones are changing. Directives are special HTML attributes, like if:true and for:each, that gives you more power to manipulate the DOM in markup.HTML templates also render data to the DOM.  Please refer to this link for the development environment setup 

To render HTML conditionally, add the if:true|false directive to a nested <template> tag that encloses the conditional content.The if:true|false={property} directive binds data to the template and removes and inserts DOM elements based on whether the data is a truthy or falsy value.

1. Create Lightning web component

create a lightning web component using the following SFDX command. In this component, we will be showing the text value based on the selected checkbox.

Here is the ConditionalRendering.html code

Use this code in ConditionalRendering.js

Use this code ConditionalRendering.js-meta.xml code

 

2. Push changes to scratch org.

Push changes to scratch using this command and add this component to record page using lighting app builder

And you can able to see the below output and based on the selected checkbox component will present the text to UI.

 

Understand the Code

The following code will return the picklist values from the Account rating field and we will be using this wire adapter data show in the UI.

 

The following markup is converted the picklist values into the select checkboxes and onchange method will update the selected values 

The following markup is used to render the data based on selected values.