Category: Lightning Web Components

How to Use Lightning Web Components in Communities

Let’s discuss here how to use the lightning web component(lwc) in communities. In Aura, To appear in Community Builder, a component must implement the forceCommunity:availableForAllPageTypes interface. But in case of the Lightning web components we will use configure the details in configuration file—<component>.js-meta.xml file—that defines the metadata values for the componentMake a custom Lightning web component available in Community Builder, where users can drag it onto the page. After you configure the component, it appears in the Components panel of all Lightning communities in your Org.


In this example, we will be using the custom component that will allow you to create a case from the community

 

communityexample.html

communityexample.js

 

communityexample.js-meta.xml

To use a component in Community Builder, edit the file to define the component’s design configuration values.

  • To make your component usable in Community Builder and in managed packages, set isExposed to true.
  • To make your component available in the Components tab in Community Builder, define lightningCommunity__Page in targets. Without this tag, your component can’t appear in Community Builder.
  • To include properties that are editable when the component is selected in Community Builder, define lightningCommunity__Default in targets and define the properties in targetConfigs.

 

Add an SVG Resource to Your Component Bundle

To define a custom icon for your component, add an SVG resource to your component’s folder. If you don’t include an SVG resource, the system uses a default icon (Lightning).

An SVG resource must be named component.svg. You can only have one SVG per folder.

communityexample.svg

 

 

Push changes to scratch org and add the changes to a community builder. Go to community builder and you can able to the LWC in community builder as shown below

 

 

 

Handle Input Changes in Lightning Web Components

Let us discuss here how to detect the input field value changes in lightning web components.T o listen for changes from an element in your template that accepts input, such as a text field. use the onchange or onkeypress event with an @track property.

Create a new Lightning Web component using the below SFDX command. In this example first, we are using the HTML input tag

Use the below inputchangeex.html code

Use the below inputchangeex.js code

Use the below inputchange.js-meta.xml

 

Push the changes using the below SFDX command

 

Add this component to the record page and you can able to see the output like below.

 

 

Let’s define the same code to use lightning-input . A lightning-input component creates an HTML input element.

Update the Html code as shown below and push the changes

You can able to see the input keypress changes

 

Usage Of lightning-record-edit-form

Let us discuss here how to use the lightning-record-edit-form . A lightning-record-edit-form component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record. The lightning-input-field component is used inside the lightning-record-edit-form to create editable fields. The lightning-output-field component and other display components such as lightning-formatted-name can be used to display read-only information in your form.lightning-record-edit-form requires a record ID to display the fields on the record. It doesn’t require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

lightning-record-edit-form and lightning-input-field support the following features.

  • Display a record edit layout for editing a specified record
  • Display a record create the layout for creating a new record

 

Editing a Record

To enable record editing, pass in the ID of the record and the corresponding object API name to be edited. Specify the fields you want to include in the record edit layout using lightning-input-field. Create a Lightning Web component using the below SFDX command

Use the below recordeditform.html code

Use the below recordeditform.js code

Use the recordeditform.js-meta.xml code

 

Push the changes and you can able to see the below screen and you can able to edit the contact record

 

 

 

Creating a Record

To enable record creation, pass in the object API name for the record to be created. Specify the fields you want to include in the record create layout using lightning-input-field components.  A record Id is generated when a record is created successfully. To return the Id, use the onsuccess handler.

Use the below recordeditform code.

 

Push the changes and you can able to see the below details as shown below.

Overriding Default Behaviors

To customize the behavior of your form when it loads or when data is submitted, use the onload and onsubmit attributes to specify event handlers. If you capture the submit event and submit the form programmatically, use event.preventDefault() to cancel the default behavior of the event. This prevents a duplicate form submission. Here in the example, we will be setting the fields values on the onsubmit behaviors.

Update the code as shown below which will set some of the account field values automatically.

Use the below HTML code.

 

Using Record Types

If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the record-type-id attribute if you have multiple record types on an object and you don’t have a default record type. Otherwise, the default record type ID is used like below.

Error Handling

You must include lightning-messages to support error handling and displaying of error messages. If the record edit layout includes a lightning-button component with type="submit", when the button is clicked the lightning-record-edit-form component automatically performs error handling and saves any changes in the input fields. Similarly, if the record create layout provides a submit button, when the button is clicked error handling is automatically performed and a new record is created with the input data you provide. Additionally, the lightning-record-edit-form component provides basic input validation like below.

 

You can able to see the errors as shown below .

 

Usage Of lightning-record-view-form

Let us discuss here how to use the lightning-record-view-form. A lightning-record-view-form component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record using lightning-output-fieldlightning-record-view-form requires a record ID to display the fields on the record. It doesn’t require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

Displaying Record Fields

Create a Lightning web component using the below SFDX command.

Use the below recordview.html code

Use the below recordview.js code

Use the below recordview.js-meta.xml code

 

 

Push changes and add to the page layouts.you can able to see the below output.

To create a multi-column layout for your record view, use the Grid utility classes in Lightning Design System. This example creates a two-column layout.

Update the code as shown below.

Push the changes and you can able to see the result as below.

 

We’ve seen how record fields render using lightning-input-field and lightning-output-field. To render data in a custom way, use the getRecord or getRecordUi wire adapters.

Update the code as shown below.

 

In the component’s JavaScript code, import references to the account object and the name field. The getRecord wire adapter loads the name field for custom rendering in the lightning-formatted-text component instead of the standard lightning-output-field used by lightning-record-view-form.

update the code as shown below.

 

You can able to see the UI as shown below.

Usage Of lightning-slider

Let us discuss here how to use the lightning-slider. A lightning-slider component is a horizontal or vertical slider for specifying a value between two specified numbers. For example, this slider can be used to capture user input about order quantity or when you want to use an input field of type="range". To orient the slider vertically, set type="vertical". Older browsers that don’t support the slider fall back and treat it as type="text"

Here’s an example of a slider with a step increment of 10.

Handle the change event and get the slider value using the event.target property.

By default, the min and max values are 0 and 100, but you can specify your own values. If you specify your own step increment value, you can drag the slider based on the step increment only. If you set the value lower than the min value, then the value is set to the min value. Similarly, setting the value higher than the max value results in the value being set to the max value.

 

In this example, we will be showing the contact data based on the slide range change

Create Apex Class

create an apex class as shown below

 

LWC 

create a lightning web component using the following sfdx command

 

Use the below slider.html code

 

 

Use the below slider.js code

 

Use the below slider.js-meta.xml

 

Push changes and add it to the page layout and you can able to see the like below