Skip to main content

Understanding Events In Lightning Web Component Using Pagination

 

Agenda




The blog will teach us how to work with events and communicate with different components using events.

We also implement Pagination and see how can we generate a Global Pagination Class.


Blog Details

This blog gives us a brief about how can we communicate between different Lightning Web Components and use custom events and play with them. 

And we also implement pagination using events in this blog and made it generic.


What we are going to do

In this blog, We create custom events and use that event to handle pagination dynamically.


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.


Events in Lightning Web Component


Lightning Web Component dispatch standard DOM events. Components can also create and dispatch custom events.


The DOM events system is a programming design pattern :

  • An event name, Called type.

  • A configuration to initialize the event.

  • A JavaScript object that emits the event


To create events, should use a CustomEvent interface. CustomEvent provides a more consistent experience using across browsers, including Internet Explorer. 


Create and Dispatch Event:


To create an event, Use CreateEvent(), and to dispatch event, call the EventTarget.dispatchEvent() method.


Example: 


this.dispatchEvent(new CustomEvent('EventName'));


‘this’ keyword is used because a field is shadowed by a method or constructor parameter.

‘dispatchEvent’ is used to Dispatch the event and ‘CustomEvent’ is used to create a new Custom event and this method contains a string that works as the name of the event.


Pagination Using Lightning Web Component: 



HTML SYNTAX:


When we click buttons, previousHandler or nextHandler function executes. These functions create and dispatch the previous and next event.

JavaScript Syntax:


These events don’t pass any data Payload into the DOM tree. Pagination is a child component that can drop anywhere we required it. 


Parent Component to use pagination:

HTML Syntax:


To listen to events, use an HTML attribute with the syntax oneventtype.

JavaScript Syntax:



When the Parent component receives the previous or next events, previousHandler or nextHandler increases or decreases the page number.


Blog’s Conclusion:

So, this blog gives us a brief about how we can communicate between different Lightning Web Component using events and how can we use events as the follow-up commands.

We also created pagination (not fully but you can put your logic accordingly) and see how can we use a component inside a component and understand the concept of the parent-child relationship between components.

Comments

Post a Comment

Popular posts from this blog

Path for JavaScript Developer - 1 Salesforce Certification

  Recently, I have cleared my  JavaScript Developer - 1 Certification on 9th May 2021. Hurray!!! And after clearing that exam I feel to create a path for my friends because I found that certification  little tougher, So I was willing to share my path to clear the certification. Agenda What paths I followed to clear the JavaScript developer I certification. What are the prerequisites and How much time it will take for me to learn all these and what effects or knowledge I gain from this certification? Salesforce has come up with this exclusive certification with JavaScript language which drives me to learn and earn this which eventually will help me on LWC and other open-source development. This certification is in high demand nowadays which motivates me to pass and share my tips.   What things I know before start preparing for the certification:   The JavaScript Developer I exam is intended for individuals who have the knowledge, skills, and experience to develop...
2 comments
Read more

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

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