Lightning Web Component First Example

Let’s discuss here the complete end to end application using the Lightning web components. This example, we will be seeing the application that will be used to maintain the issue log. The app which we will be building looks like below.  Please refer to this link for environment setup.

 

1. Create an apex class 

 

Create an Apex class that will fetch the list of issues from the database. This class fetches the list of issues from the database.

2.Create an Issue Log LWC

Create a lightning component using the below SFDX command

This component will do

  • Insert the new record into the issue log using wire services
  • Fire an event with the newly created record.
  • Show toast message on insert the new record.

Use this code in issuelog.html

Use this code in issuelog.js

 

Understand the issuelog.js

 

The below get method will be returning the lits of the options for combo box .insted of passing the hardcoded values to get method you can able to use the getPicklist Values wired Adapter

The below code will handle the change event from the description and priority fields changes.

The following code in the create issue method will be used to save the record and will be passed to createRecord wire adapter

createRecord will be used to save the record and in the same method, we will firing an event with a newly created record using the new CustomEvent.

the following code will be used to dispatch the toast message to UI when the record is saved of failed

 

 

 

Use this issuelog.js-meta.xml file to configure the issue log.

 

3.Create an Issue List LWC

create a lightning component using the following sfdx command.

This component will be

  1. Container component for the issue log component
  2. Received an event that is the trigger by issue log component
  3. handler the resolved checkbox checked and unchecked and navigation logic.

 

 

Use this issuelist.html code

use this code in issuelist.js

 

understand the code

The following code is used to handle the event that is received from the issue log .here I am simply refreshing the wire adapter which will get the updated values

You can able to handle the event values as shown below as well and get the event values and parse it.

 

The following code will be used to update the values when user click on the checkbox resolved

 

The following code is used to fire the navigation event

 

 

 

Use the below issuelist.js-meta.xml code

 

4. Push changes

Push the changes to scratch org using the below SFDX command and add this component to the layout

 

 

Here is the final output of the code.