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 } ....
For PopUp using LWC, check the following code. HTML: <template> <lightning-button onclick={showPopUp} label="Show PopUp"></lightning-button> <div style="height: 640px;" if:true={checkBool}> <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button ....
Salesforce Lightning Design System(SLDS) classes can be used to align lightning-button in Salesforce Lightning Web Component. Sample Code: Lightning Web Component HTML: <template> <div class="slds-clearfix"> <div class="slds-float_left"> <lightning-button label="Left" class="slds-m-left_x-small"> ....