Posts

Showing posts with the label genericLightningComponent

Salesforce LWC: Basic Drag and Drop Functionality

Image
Recently I attended Salesforce VirtualDearmin session and I found this session very interesting and I thought to share this with everyone of you. For more detail you can refer below link on Drag and Drop Functionality: https://forcementor.github.io/lwc_dnd_20/#/ In this blog we will see about Drag and Drop functionality in Salesforce using Lightning Web Component. To implement drag and drop functionality there are few standard HTML events which we will use to implement. Lets see first what we are going to achieve in this blog with a small video- Now we have clear understanding what we are going to achieve. Let us go to the code. First we will create very basic UI with 3 layout-item. One for each New Task, In Progress Task and Completed Task. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <lightning -layout vertical-align= "stretch" multiple-rows= "true" class= "x-large" > <lightning -layout-item...

Salesforce Lightning Web Component: Dynamic Column Selection in Lightning Datatable

Image
Today in this post we will see how to create Lightning Data Table where we can dynamically select the columns of lightning data table. Below are the properties of this Lightning Data Table: User can select any column for Lightning Data Table User can select only those fields on which user has FLS. User can re-arrange the order of Columns in Data Table. So in UI we will show one Dual List box where user can select any field for table. Once user will select the fields and click on save then selected fields will be visible on UI: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <template> <lightning -card title= "Dynamic Lead Table" > <lightning -button label= "Modify Columns" slot= "actions" onclick= {showColumnSelectionWindow} > < /lightning-button> <p class= "slds-p-horizontal_small" > <lightning -...

Salesforce LWC: Generic Lightning Datatable using Lightning Web Component

Image
Today in this blog we will go though generic Lightning Data Table using Lightning Web Component. Using below code user can show data of any object in Salesforce Org. Below is the HTML code where we have used lightning-datatable standard lightning web component. In this component we are passing two values. 1. columns: List of columns which needs to be added in table. 2. finalData: this is the list of data which needs to be displayed. 1 2 3 4 5 6 <template> <div style= "height: 300px;" > <lightning -datatable key-field= "Id" data= {finalData} columns= {columns} hide-checkbox-column= true > < /lightning-datatable> </div> </template> Now in Java Script file we need to handle the data which will be sent by its parent component. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 import { LightningElement, api, tra...

Followers