Tag: Lightning web components

Understand Lightning Web Component Bundle

Let’s understand what all the contains in the lightning web component bundle and how it will be different with the Aura Component. The LWC has contained a folder that bundles your component’s files. The folder and the component’s HTML template file, the component’s JavaScript class file, the component’s configuration file, and an optional CSS file must have the same name, including capitalization and underscores.create a lightning web component using the following SFDX command

 

The LWC component bundler looks like below.

 

You can’t create a Lightning web component with a name that collides with a custom Aura component in the same namespace. For example, if you have an Aura component named c:progressBar, you can’t create a Lightning web component named c-progress_bar. For example, the markup for the Lightning web component with the folder name mycomponent in the default namespace c is <c-my-component>.Use camel case to name your component myComponent. Camel case component folder names map to kebab-case in markup. In markup, to reference a component with the folder name myComponent, use <c-my-component>.

Component HTML File

The power of Lightning Web Components is the templating system, which uses the virtual DOM to render components smartly and efficiently. It’s a best practice to let LWC manipulate the DOM instead of writing JavaScript to do it. Every component requires an HTML file with the root tag . The HTML file follows the naming convention .HTML, such as my_component.html. Create the HTML for a Lightning web component declaratively, within the <template> tag. The HTML template element contains your component’s HTML. For Example, the following HTML tags contain the template and with one property greeting which will be declared in the javascript class.

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 give you more power to manipulate the DOM in markup. HTML templates also render data to the DOM. Use simple syntax to declaratively bind a component’s template to data in the component’s JavaScript class.

Component JavaScript File

Every component must have a JavaScript file. If the component renders UI, the JavaScript file defines the HTML element.The JavaScript file follows the naming convention <component>.js, such as myComponent.js. The convention is for the class name to be Pascal Case, where the first letter of each word is capitalized. For myComponent.js, the class name is MyComponent.JavaScript files in Lightning web components are ES6 modules. By default, everything declared in a module is local—it’s scoped to the module.To import a class, function, or variable declared in a module, use the import statement. To allow other code to use a class, function, or variable declared in a module, use the export statement.

 

The JavaScript file declares:
• The component’s public API via public properties and methods
• Private properties
• Event handlers etc

Here’s the basic structure of the JavaScript file.

The core module in Lightning Web Components is the engine. The import statement imports Element from the engine module like Wire,API,track from LWC engine

The element is a custom wrapper of the standard HTML element. Extend Element to create a JavaScript class for a Lightning web component.

The export default keywords export a MyComponent class for usage in other components.
The convention is for the class name to be Pascal Case, where the first letter of each word is capitalized. In our example, the class name is MyComponent for a c-my_component component, where c is the default namespace.

This is the how the final Mycomponet.Js class looks like

Component Configuration File

Every component must have a configuration file. The configuration file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder.
The configuration file follows the naming convention <component>.js-meta.xml, such as helloworld.js-meta.xml.
Include the configuration file in your component’s project folder, and push it to your org along with the other component files. Here is a simple configuration file.

This more complex version of the configuration file makes its component available for all Lightning page types but restricts support on record pages only for the account, opportunity, and custom objects. The component has a different set of properties defined for record pages than for app and Homepages like below .

Component CSS File

A component can include a CSS file. Use standard CSS syntax to style Lightning web components To style a component, create a style sheet in the component bundle with the same name as the component. If the component is called my_component, the style sheet is my_component.css. The style sheet is applied automatically.We no need to use. THIS in the LWC.  Go to the mycomponent LWC folder and create a new file with name mycomponent .css and add the styles. Lightning web components are inherited the lightning design system styles by default.

 

You can able to add the css like belwo

Component SVG Icon

A component can include an SVG resource to use as a custom icon in Lightning App Builder and Community Builder. To include an SVG resource as a custom icon for your component, add it to your component’s folder. It must be named <component>.svg. If the component is called myComponent, the svg is myComponent.svg. You can only have one SVG per folder.

Additional JavaScript Files for Sharing Code

In addition to the JavaScript file that creates the HTML element, a component’s folder can contain other JavaScript files. Use these JavaScript files to share code. These additional JavaScript files must be ES6 modules and must have names that are unique within the component’s folder.

Component Tests

To create Jest tests for a component, create a folder called __tests__ at the top level of the component’s folder. Save the tests inside the __tests__ folder.Jest runs all JavaScript files in the __tests__ directory. Test files must have names that end in “.js”, and we recommend that tests end in “.test.js” or “-test.js”. You can have a single test file with all of your component tests, or you can have multiple files to organize and group related tests. Test files can be placed in sub folders.

 

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.

 

 

Call Apex Methods In Lightning web components

Let’s discuss here how to call the apex class from the Lightning web components. Lightning web components can import methods from Apex classes into the JavaScript classes using ES6 import. Once after importing the apex class method you can able call the apex methods as functions into the component by calling either via the wire service or imperatively. Before you use an Apex method, make sure that there isn’t an easier way to get the data. See whether a base Lightning component, like lightning-record-form, lightning-record-view-form, or lightning-record-edit-form works for your use case. If they don’t give you enough flexibility, use a wire adapter like getListUi or getRecordUi. 

Refer this link for how to configure the Salesforce dx for web components 

Import Syntax 

You can able use default export syntax to import an Apex method via the @salesforce/apex scoped module into JavaScript controller class. The Syntax looks like below.

apexMethod—The imported symbol that identifies the Apex method.
Namespace—The namespace of the Salesforce organization. Specify a namespace unless the organization uses the default namespace (c), in which case don’t specify it.
Classname—The name of the Apex class.

Create Apex Class 

In this example, we will be getting account data and show it into the UI. Create an apex class using SFDX create apex class command.

Here is the apex class. To expose an Apex method to a Lightning web component, the method must be static and either global or public. Annotate the method with @AuraEnabled

Now you can able to call the apex class in  Lightning web component using these different ways.

  • Wire a property
  • Wire a function
  • Call a method imperatively

Wire an Apex Method to a Property

If an Apex method is annotated with @AuraEnabled(Cacheable=true), you can invoke it from a component via the wire service. You can @wire a property or a function. Here is the syntax

Create a Lightning web component using below SFDX commands

Here is the LWCWireEx.html markup for the lightning web components.

Here is the LWCWireEx.js class

Here is the LWCWireEx.js-meta.xml markup.

Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.

Wire an Apex Method to a Function

Now let’s look at how to wire an apex method to function.we will be updating the same code here to operate the apex method as function.

Update the LWCWireEx.js class as shown below

update the LWCWireEx.html markup as shown below

Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.

 

Call an Apex Method Imperatively

Now let’s see here how to call apex method imperatively. Create a new Lightning web component using the below SFDX command

Use the below ImperativEx.html code

Use the below ImperativEx.js class code

Use the below ImperativEx.js-meta.xml class code

push the changes to scratch org and add the lightning web component to the record page and you can able to see the below result when you click on the button .

Calling Apex Methods In Lightning web components

Let’s discuss here how to call the apex class from the Lightning web components. Lightning web components can import methods from Apex classes into the JavaScript classes using ES6 import. Once after importing the apex class method you can able call the apex methods as functions into the component by calling either via the wire service or imperatively. Before you use an Apex method, make sure that there isn’t an easier way to get the data. See whether a base Lightning component, like lightning-record-form, lightning-record-view-form, or lightning-record-edit-form works for your use case. If they don’t give you enough flexibility, use a wire adapter like getListUi or getRecordUi. 

Refer this link for how to configure the Salesforce dx for web components 

Import Syntax 

You can able use default export syntax to import an Apex method via the @salesforce/apex scoped module into JavaScript controller class. The Syntax looks like below.

apexMethod—The imported symbol that identifies the Apex method.
Namespace—The namespace of the Salesforce organization. Specify a namespace unless the organization uses the default namespace (c), in which case don’t specify it.
Classname—The name of the Apex class.

Create Apex Class 

In this example, we will be getting account data and show it into the UI. Create an apex class using SFDX create apex class command.

Here is the apex class. To expose an Apex method to a Lightning web component, the method must be static and either global or public. Annotate the method with @AuraEnabled

Now you can able to call the apex class in  Lightning web component using these different ways.

  • Wire a property
  • Wire a function
  • Call a method imperatively

Wire an Apex Method to a Property

If an Apex method is annotated with @AuraEnabled(Cacheable=true), you can invoke it from a component via the wire service. You can @wire a property or a function. Here is the syntax

Create a Lightning web component using below SFDX commands

Here is the LWCWireEx.html markup for the lightning web components.

Here is the LWCWireEx.js class

Here is the LWCWireEx.js-meta.xml markup.

Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.

Wire an Apex Method to a Function

Now let’s look at how to wire an apex method to function.we will be updating the same code here to operate the apex method as function.

Update the LWCWireEx.js class as shown below

update the LWCWireEx.html markup as shown below

Push the changes to scratch org and add the lightning web component to the record page. You can able to see the result like below.

 

Call an Apex Method Imperatively

Now let’s see here how to call apex method imperatively. Create a new Lightning web component using the below SFDX command

Use the below ImperativEx.html code

Use the below ImperativEx.js class code

Use the below ImperativEx.js-meta.xml class code

push the changes to scratch org and add the lightning web component to the record page and you can able to see the below result when you click on the button .

Lightning web components Wire Service

Let’s discuss here how to use the wire service to get the Salesforce data from the server to lightning web components. You can use the Lightning data service or apex class to get the data from server and wire service is also one of the ways. To read Salesforce data, Lightning web components use a reactive wire service, which is built on Lightning Data Service. Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api namespace. The wire service provisions an immutable stream of data to the component. Each value in the stream is a newer version of the value that precedes it. when we call the wire service reactive in part because it supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions new data. We say “provisions” instead of “requests” or “fetches” because if the data exists in the client cache, a network request may not be involved.

The wire service delegates control flow to the Lightning Web Components engine. Delegating control is great for reading operations, but it isn’t great for creating, update, and delete operations. As a developer, you want complete control over operations that change data. That’s why you perform create, update, and delete operations with a JavaScript API instead of with the wire service.

Wire Service Syntax

Import a wire adapter using named export syntax. Decorate a property or function with @wire and specify the wire adapter. Each wire adapter defines a data type.

adapterId (Identifier)—The identifier of the wire adapter.
adapterModule (String)—The identifier of the module that contains the wire adapter function, in the format namespace/moduleName. Take another look at the format! To import a module in JavaScript, use lightning/ui*Api instead of lightning-ui-*-api.
adapterConfig (Object)A configuration object specific to the wire adapter. Configuration object property values can be either strings or references to objects and fields imported from @salesforce/schema. Properties in the adapter config object can’t be undefined. If a property is undefined, the wire service doesn’t provision data.
propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property. Now your code is like below if you convert the wire syntax.

import wire namespace into the JavaScript controller as shown below.

import getRecord from the lightning/uiRecordApi from lightning/ui*Api Wire Adapters and Functions.

Now call the @wire function to get the record data.

Create Lightning web components

create a lightning component in scratch org using the below sfdx command.

Here is the LWCWireExample.html code.

Here is the LWCWireExample.js code.

Here is the LWCWireExample.js-meta.xml markup code.

Push Source to the Scratch Org

Now push the changes to the scratch org by using this SFDX command.

Open Scratch Org by using this SFDX command.

Add this component to the record page and you can able to see the contact data as shown below.