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.