LWC HTML: <template> <div class="slds-p-around_medium lgc-bg"> <div class="slds-m-bottom_small"> <lightning-button label="Collapse All" onclick={clickToCollapseAll}> </lightning-button> <lightning-button label="Expand All" onclick={clickToExpandAll}> </lightning-button> ....
Sample Code: LWC HTML: <template> <lightning-tree-grid columns = {gridColumns} data = {gridData} key-field = "Id" hide-checkbox-column = true onheaderaction = {handleHeaderAction}> </lightning-tree-grid> </template> LWC JavaScript: import { LightningElement, track, wire ....
Sample code: HTML: <template> <div class="slds-box slds-theme_default"> <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered"> <thead> <tr> <th class="" scope="col"> <div class="slds-truncate" title="Account Name">Name</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Account Industry">Industry</div> </th> ....
With custom component, we can enable and disable buttons in Flow. Sample Flow: Screen - First and Last Name:We get the First and Last name from the user. Assignment - ....
HTML: <template> <lightning-datatable key-field="Id" data={contacts} columns={columns} hide-checkbox-column="true" show-row-number-column="true" onrowaction={handleRowAction}> </lightning-datatable> </template> JavaScript: import { LightningElement, api, track } from 'lwc'; import { NavigationMixin ....
Sample code: HTML: <template> <div class="slds-box slds-theme_default"> <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered"> <thead> <tr> <th scope="col"> <div class="slds-truncate" title="Account Name">Name</div> </th> <th class="" scope="col"> <div class="slds-truncate" title="Account Industry">Industry</div> </th> <th ....
Sample Code: HTML: <template> <div class="slds-box slds-theme_default"> <lightning-accordion class="example-accordion" onsectiontoggle={handleToggleSection} allow-multiple-sections-open> <lightning-accordion-section name="A" label="Accordion Title A"> Test </lightning-accordion-section> </lightning-accordion> </div> </template> ....
Sample code: HTML: <template> <lightning-card title={titleWithCount} icon-name="standard:record"> <lightning-button label="New" slot="actions" onclick={createNew}></lightning-button> <div slot="footer"> <div if:true={countBool}> <lightning-button label="View All" onclick={navigateToRelatedList}></lightning-button> </div> </div> <div class="slds-m-around_medium"> <div if:true={listRecords}> <template for:each={listRecords} for:item="rec"> <div key={rec.Id} ....
Sample Code: HTML: <template> <div> <lightning-datatable key-field="Id" data={accountsWithIndustry} columns={columns} hide-checkbox-column="true" show-row-number-column="true"> </lightning-datatable> </div> <div> <lightning-datatable key-field="Id" data={accountsWithoutIndustry} columns={columns} hide-checkbox-column="true" show-row-number-column="true"> </lightning-datatable> </div> </template> JavaScript: import { LightningElement, wire, track } ....
Sample Code: Apex Class: public with sharing class ExampleController { @AuraEnabled(cacheable=true) public static List < Account > fetchAccounts() { return [ SELECT Id, Name, Industry, ( SELECT ....