Using this blog’s functionality we are able to show any Parent-Child data or any other data of this type and we can show it in a very systematic way like an accordion.
What we are going to do.
So basically, we are going to create functionality like an accordion on our own as a custom runtime accordion and we use this to show Parent-Child data and also use runtime-local variables and other JavaScript functionalities in this lightning web component.
Lightning Web Component
First of all, What is the lightning web component?
So, The Lightning Web Components is lightweight and delivers exceptional performance. Most of the code you write is standard JavaScript and HTML.
And for more info follow the Documentation.
Now First, we need to look for the data we are going to show over the LWC, and for that, I’m using the Parent-child relationship object of Accounts and Contacts, and to fetch the data I’m using an apex method.
Apex Class:
As we discussed earlier this class is used to fetch the data from the database and use it inside the LWC and display it to the users. So, we call the @AuraEnabled method from the LWC and use the data there.
LWC JS File:
Here we are fetching accounts with its related child contacts.
And we are using local runtime-variables to show the accordion icon to handle the visibility of the contacts associated with it.
LWC HTML File:
Here we are displaying the Names of account records and with the click of the arrow, we are showing the child contact records associated with it. And we are showing - hiding the child records according to the click event on the arrow button.
Blogs Conclusion:
I Hope, this blog helps you to understand the basic structure of child-parent records and how we can show it as per the requirement. This will help you to make the visibility clearer.
Comments
Post a Comment