Using Data - Attributes in Lightning Web Component (LWC)`

 Agenda

    

While working with Salesforce data we need to play with Id’s (Identifiers). An ID can be associated with a

Record or with a specifier. While working with records when we need to make changes or view

any particular record details, we need their ID’s, as I describe in my previous blog’s how can we

show or edit any salesforce record with the help of Basic components of Salesforce. 

To create forms that let users view, edit, and create Salesforce records, use Lightning-record-form, Lightning-record-edit-form, and Lightning-record-view form components.

And To use these components we need Salesforce Record ID.

Blog Details

This Blog gives us a brief about how can we get a particular record Id or value after any event using

Data - Attributes. 

What we are going to do

In this blog, we use Data - Attribute functionality from HTML5  in our Lightning Web Component and

use data attribute to get the ID of the particular record after the on-click event of JavaScript and use that ID in the basic

component’s of Salesforce.

Requirements:

• You need to have access to your org.

• Should have installed the VS Code Installed in your system.

• You should have some basic knowledge of Lightning Web Component.

A Little About Lightning Web Component(LWC)

Lightning Web Components is open-source, empowering you to

explore the source code, customize the behavior for your needs,

and build enterprise-ready web components on any platform,

not just Salesforce.

 Lightning Web Component or LWC are custom HTML elements built using HTML and modern JavaScript.

We Basically work on ES6(ECMAScript 2015)

LWC uses core Web Components standards and delivers exceptional performance.

A Little About Data-Attributes

Data-Attribute is mainly associated with HTML 5 and works

with a particular element.data-* attributes

allow us to store extra information on the standard, semantic

HTML elements without other hacks such as non-standard attributes,

extra properties on DOM, or Node.setUserData() .

HTML syntax: 

‘data-value={value}’ is the data-attribute use to contain the element value we need to transfer or use

to play with it. ‘{value}’ the curley braces contains value which we need to work with . It can contain

any primitive data type. And in this blog we use it to work with Record Id and use record ID to work

with Base Components.

Syntax

<lightning-icon icon-name="action:preview" data-value={value}  name="preview" variant="preview" ></lighting-icon>

To send value to the JS file on button click: Here, we are using the button and in that button, we are using a lightning-icon which is displaying a

view icon and on-click event of that button, we send the related account ID.

I hope that you already have knowledge about how we display records on LWC and you are aware

of the Base components (like Lightning-record-form, etc.)

LWC (HTML Portion)

<Table head>Assuming that you know how to display data on Table.</table Head>

Explanation (HTML Portion)

The upper code is used to  show Account records in a tabular form with a button showing view icon and on that button click, Lightning-record-view-form open which is used to display record’s details and we get records

dynamically fetched from salesforce using Apex class and wire methods (alredy explain in detail in last Blog).

We use ‘data-value={acc.Id}’ to store the current record id. You might think that we can send record id using

value of the button and fetch that id using ‘event.target.value’ but when ever you try to do that way, Salesforce

automatically append ‘-and some random number’ into the Id.

To avoid that part we use Data Attributes functionality from HTML 5.

So, when we click the preview button a JavaScript method call and that method get the Id using event of

JavaScript and then display the record’s details.

We have to ways to show record’s details:-

1. Through Saleforce Standard Navigation.

2. Through Salesforce Lightning Base Component’s (Lightning-record-forms)

Through Saleforce Standard Navigation.

Use event.target.dataset.recordId in your JS file to get the recordId like below:

// Need to import NavigationMixin in our JavaScript file to access it’s functionality.

The navigation service supports different kinds of pages in Lightning. Each PageReference type supports

a different set of attributes and state properties. Both APIs support these PageReference types.

The navigation service work’s similar as PageReference and It uses the record Id as the navigation

variable and it will redirect us to the standard salesforce record page.

Salesforce Lightning Base Component’s

The Second way of displaying record is to use lightning record form and the main benefits of using that functionalities

are that we can control over the view form. We can control which fields should be visible to which user and

how to display them. This type of manipulation is not directly possible through navigation.

To track a private property’s value and re-render a component when it changes, decorate

the property with @track.

view variable is used to store Id of the record and showModal is a variable used to show and hide the modal

as per the event.

‘Event.target.dataset.id’ is used to get the id of the record for which the related button is clicked. And it store

that value in the view variable and we use view variable at our lightning record form to show the record’s details.

‘If:true’ is used to check check that the condition is true or false and when condition is true only then the

part will execute.

‘record-id={view}’

It contains the Record Id for which we need to open the view form.

object-api-name="Account"

It contains the object name of the record.

Blog’s Conclusion:

So, the conclusion of the blog is that now we know how to connect a Lightning Web Component

(LWC) with the latest HTML data-attribute functionality and how can we access it over different scenarios.

And I want you to get familiarized with the Data Attributes  as well as the the Navigation PageReference .

Thanks, And Regards

Rahul Vaishnav