Using base Lightning Web Components on your custom Applications

Posted by: Lourdes Montero on January 30th, 2020.

The Lightning Web Component(LWC) framework is very popular because it provides better performance to your applications, it adheres to web standards, it is easy to learn, and so much more. Salesforce provides out-of-the-box components, called base LWC, that add a LOT of functionality to your applications. Let’s talk about using these base components to complement your custom LWC application.

Salesforce has recently opened these base LWC’s source code to the public, which is incredibly exciting and an amazing opportunity to learn about their design patterns; however, this might seduce us in trying to enhance every base LWC when we can use the standard functionality as it is. Sometimes, it is necessary, but keep in mind that once you create your own LWC, you are responsible for maintaining, enhancing, and testing the code FOREVER.

Instead, let’s take a look at an example that takes advantage of base LWC while doing some very custom stuff.

Requirements:

The business wants a component that can be added to an Account page layout.
It will allow the user to enter new rows of contact information, edit them, and delete them.
Each row will have 6 columns. As seen in the image below.
Pre-Tax Income and Tax Paid are custom currency fields on the contact object.
Total Income is a column that will display the sum of Pre-Tax Income and Tax Paid as they change.

This is the mockup:

Development steps:

This is the component's architecture:

Create two currency fields in the Contact object:

Tax_Paid__c
Pre_Tax_Income__c

Set up development tools

Setup your VS code instance
- If you are still having issues, check out this Trailhead Module.
Enable your custom domain
Import three components from the LWC recipes into your project. See screenshot below.

Create the components

See the source code here: Solution Repository
For this example, I will be using mainly lightning-layout and lightning-record-edit-form.
- This example can also be achieved using lightning-datatable, I will work on showing this on a future blog post in order to compare the solutions.
relatedContacts.js-meta.xml

Notice how I am using <target>lightning__RecordPage</target> to allow showing the component in a record page.
After saving this file, you should be able to add this component to the Account Record Page.

relatedContacts.html

As you can see from the code, I am using lightning-card and lightning-layout tags in order to design the layout. This makes it a lot easier since these tags take care of all the styling.
In this component I added the first row of the table, containing the labels of all the fields.
I am using <template if:true={contacts}> to show the rest of the rows only if there are contacts to show.
- <template for:each={contacts} for:item="contactId" for:index="index"> will iterate through all of the components of the contacts array
- The contacts array will be populated on the relatedContacts.js file.
For every component in the contacts array, there will be a <c-edit-contact-row> component created.
- Notice how this tag is handing 4 events: onloading, ondoneloading, ondelete, onsuccess. These events will be dispatched from the editContactRow components and handled in the relatedContacts component.
Notice there is <c-error-panel> tag, which uses the errorPanel component imported from the LWC recipes, used to display errors whenever there is one.
I am also using the <c-modal> which used the modal component imported from the LWC recipes, used to verify if the user Really wants to delete the selected contact.

relatedContacts.js

The code in the controller handles the initialization of the contacts array.
It decides whether or not to show the loading icon.
It also decides when to show the modal to delete the Contact, and it handles deleting the Contact and removing it from the table.

editContactRow.html

Notice how I am using the tag <lightning-record-edit-form> in order to display every contact record. I don’t have to write any code to pull the contacts data. This is a perfect example of how you can use base LWC to save you a lot of work.
I use <lightning-input-field> and its attribute disabled to show as editable or not, depending on the user clicking on the edit button.
Two of the <lightning-input-field> components are listening to the onchange event on the Tax_Paid__c and on Pre_Tax_Income__c fields. When these change, I can get their values, add them up, and update the totalIncome property.
All of the <lightning-input-field> components are listening to the isReadOnly property to know if the row is in edit mode or not. If it is in edit mode it will show the fields enabled for editing and also the Save and Cancel buttons. If it is not in edit mode, the fields will show in read only mode and it will show the edit and delete buttons.

editContactRow.js

Notice how on the connectedCallback function, I am setting the edit mode ON, if the contactId is blank, meaning that a new row was added.
The function handleUpdateTotals will be called every time the currency fields are updated, and will update the totalIncome property.
The function handleOnDelete will dispatch a customEvent so that the parent component can take care of deleting the contact.

This is the end result:

Conclusions

This is a perfect example of how you can utilize base components in your custom applications. Here, we used the base component lightning-record-edit-form to create a quick Contact creation table. The table had custom functionality like auto calculation of totals, deletion of records, and addition of rows. I w able to achieve this by creating only two custom components lowering the application's maintenance cost. I hope this inspires you to create sustainable applications, using all of the out-of-the-box functionality that the salesforce platform provides.