March 2020

Salesforce

How to iterate over Records returned By Wire Service in LWC?

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 } ....

Salesforce

lightning-tree-grid with Collapse All and Expand All using LWC in Salesforce

Sample Code: 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>                    </div>                <lightning-tree-grid columns = {gridColumns}                                data = {gridData}                                key-field ....

Salesforce

Popup using Lightning Web Component in Salesforce

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-tree-grid with Account and its related Contacts using LWC in Salesforce

Sample Code: HTML:  <template>       <div class="slds-p-around_medium lgc-bg">        <lightning-tree-grid columns = {gridColumns}                             data = {gridData}                             key-field = "Id"                             hide-checkbox-column = true>        </lightning-tree-grid>    </div>    </template> JavaScript: import { LightningElement, track, ....