Skip to main content

Get Value of Selected Records on button click


Agenda




In the previous blog, we see how can we select-deselect a checkbox using a master checkbox.

But Selecting and Deselecting checkboxes is not enough while working on any project we also need values to play with them.

 

Blog Details

 The blog gives us a brief that how we select and unselect all checkboxes from the header checkbox.

 

What we are going to do

In this blog, we use a table to show the records with the checkbox for each record and a

header checkbox to select - unselect all records with a submit button.

And on that button click, we transfer the related record to the JS file of the component.

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.

  • You must have some proper records in your org to show data on the table.

 

 

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.


HINT: We can use Data - Attribute functionality to get the value of the selected checkboxes.


HTML Syntax: 

  1. Submit Button 

<lightning-button class="slds-align_absolute-center" variant="brand" 

value="Submit" label="Submit" onclick={handleSubmit}></lightning-button>


  1. Row Checkboxes

<lightning-input type="checkbox" name="isSelect" data-pid={acc.Id} class="chkxBxs"></lightning-input>



"We use 'this.template.querySelectorAll()’ we use this method to look for the elements that

our component rendered. And get the value of the selected record’s".

To display the Records with a related checkbox follow this HTML: 


We use the same code as discussed in the previous blog to display record’s on the layout.


    





Java Script: 



 

handleSubmit() method handles the record list checkboxes according to the headerCheckbox

click event. ‘this.template.querySelectorAll('.chkBoxes)’.

Method fetch all checkboxes which contains the class named “chkBoxes”. And then,

We run the loop on the list of chkBoxes and get the Id of the selected Records.


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 to work with

 ‘this.template.querySelectorAll('.chkBoxes)’  and get familiar with checkboxes.

And play with Salesforce Data as per the needs.

Comments

Post a Comment

Popular posts from this blog

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...
3 comments
Read more

Select - Deselect checkbox in Lightning Web Component

  Agenda In the previous blog, we are working with a single record and manipulating it as per the requirements, but when we are working for the organization we need to think to cover larger aspects. And while working with salesforce data we should be aware of the fact that we might need to work with data in bulk. So, when we need to work with more than one record we use checkbox functionality and use that checkbox to see which record we need to make changes to. Blog Details The blog gives us a brief that how we select and unselect all checkboxes from the header checkbox. What we are going to do In this blog, we use a table to show the records with the checkbox for each record and a header checkbox to select - unselect all records. 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. You must have some proper records ...
1 comment
Read more

Displaying User Level’s Dynamically In Lightning Web Component

  Agenda I am writing this blog, to display dynamic user data beautifully, It enables each user to see the users they need to report. With this dynamic component, you can control data visibility without having to create a separate component as well, with its own running user.  Now, It’s time to show the user’s of our organization dynamically their role in a beautiful way. How does it work? You fetch the User’s record with a simple Apex SOQL query and just displaying details Dynamically over a Lightning Web Component, And place that component where ever you want. Requirements: You need to have access to your org. Should have the VS Code Installed in your system. You should have some basic knowledge of Lightning Web Component. About Lightning Web Component (LWC): Lightning Web Components are lightweight custom elements based on native HTML and Modern JavaScript. Lightning Web Compone...
3 comments
Read more