Day: December 26, 2018

Lightning web components Data Binding in a Template

Let us discuss here how using the Data Binding in a Template. Templating allows binding values from the JavaScript controller value to the Html view in Lightning web component. In Lightning web component, this can be achieved using simple {property} bindings. Bind properties in a component’s template to properties in the component’s JavaScript class. In the template, surround the property with curly braces, {property}. To compute a value for the property, use a JavaScript getter in the JavaScript class, get property(){}. Don’t write JavaScript expressions in a component’s template. Refer to this link for how to set up the environment.

Using Expressions

Here’s the simplest example of data binding using an expression. The greeting property in the template is bound to the greeting property in the JavaScript class.

Now in the above example, the greeting property is blinded from the controller using the {greeting} binding expression to UI. The property in { } must be a valid JavaScript identifier or member expression.

Now its understand how to bind the expression from the input value instead of a hard-coded string.update the markup as shown below

update the JavaScript controller as shown below.

If you look at the above JavaScript controller we are using the event handling in the JavaScript class will pass the event to handleChange method. The event object contains information about the change event. The component uses the event object to get the value that the user entered into the input field. we are using @track decorator to track the greeting propriety. Here is the output

Using Getter 

We will be using javascript getter to compute a value for a property. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template. The getter is much more powerful than expressions because they’re JavaScript functions. Define the Getter as shown below syntax.


Access the getter from the template using the below syntax

In this example, a user enters their first and last name. A JavaScript getter computes a new value and updates the value to the upper case. Update the markup as shown below.

The uppercasedFullName property in the template is bound to the get uppercasedFullName() getter in the JavaScript class. here is the JavaScript class


The handleChange function sets the firstName and lastName properties to the values that the user enters. The uppercasedFullName() getter combines and uppercases the names and update the value to UI. You can see in JavaScript class we are using @track decorator with firstName and lastName Because firstName and lastName decorated with @track, if the value of firstName or lastName changes, the template rerenders. If we remove @track, the property values still change, but the component doesn’t re-render, so we don’t see update values in UI. Decorating a property with @track makes it private and reactive. To mark a property public and reactive, use @api.Here is the final output.

Here is another example that will get the data from the contact record and shows the data.

 

Configure the Lightning Web Components for Lightning App Builder

Let us discuss here how to configure the Lightning web components for Lightning App Builder and expose the attribute properties to the app builder. Please refer this link for how to configure web components environment.  In this example, we will be passing the account rating and limit to web component from the lightning app builder and will get the data and display it.

Step 1: Create an Apex Class

Create an apex class with as shown below with the method and two arguments. use the below SFDX command to create an apex class

Here is the apex code

Step 2: Create a Lightning Web Component

Create Lightning web components in the force-app/main/default/lwc folder. Run the following command to create a lightning web component

Here is the code for AccountInfo.html

Here is the AccountInfo.js code

Now if you can see in the above AccountInfo.js  code you can see the Decorators.T he Lightning Web Components programming model has three decorators that add functionality to property or function.

@api
To expose a public property, decorate it with @api. Public properties define the API for a component. An owner component that uses the component in its markup can access the component’s public properties. Public properties are reactive. If the value of reactive property changes, the component’s template rerenders any content that references the property.
@track
To track a private property’s value and re-render a component when it changes, decorate the property with @track. Tracked properties are also called private reactive properties.
@wire
To read Salesforce data, Lightning web components use a reactive wire service. When the wire service provisions data, the component rerenders. Components use @wire in their JavaScript class to specify a wire adaptor or an Apex method.

Step 3: Configure the Component for Lightning App Builder

Configure the AccountInfo component for Lightning App Builder so that we can add it to a Lightning page. Open AccountInfo.js-meta.xml and add the code in bold. The lets us add the component to an app page. The section lets us set the component’s name property in Lightning App Builder.

The <component>.js-meta.xml file defines the metadata values for the component, including the design configuration for components intended for use in Lightning App Builder. Edit the configuration file to:

  • Define what types of Lightning pages your component can be used on.
  • Configure your component’s properties.
  • Set your component’s supported objects.
  • Make the component usable outside of your own org.

The above configuration file makes the component available for Lightning page types, but you can able to extend or restricts support on record pages. The following markup  will extend the component availability to different lightning pages

The following markup will restrict support on record pages only for an account, opportunity, and warehouse objects on the Lightning record page and lightning app page

 

Step 4: 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.

Step 5: Add the Component to a Lightning Page

Now add the web component to the lightning app record page by using the app builder as shown below and configure the attributes. Then the component will be displayed 10 accounts with the rating type hot.