Hello friends, today we will discuss Drag and Drop Fields in LWC. Drag and drop functionality has become a standard feature in many modern web applications, making it easier for users to interact with data and elements.
Why Drag and Drop Fields Matter
Drag and drop functionality can significantly enhance the user experience by allowing users to rearrange, reorder, and customize the layout of various elements in an application. This feature is precious in scenarios where users need to prioritize or organize information, such as managing a to-do list, configuring dashboard widgets, or customizing a form.
In a Salesforce context, LWC provides the ideal platform for implementing this, enabling users to arrange and customize components, fields, or records in a visually appealing and efficient way. Let’s delve into the steps required to implement this feature in LWC.
Also, check this: Use LWC in Flow Salesforce Part -2
Key Highlights :
- Intuitive and user-friendly drag-and-drop interface.
- Real-time preview of your form as you make changes.
- The streamlined development process for lightning-fast results.
- Improved user experience with custom layouts.
Code :
Implementing Drag and Drop Fields in LWC
dregComponent.html:
<!--
@description :
@author : zuberrangreaz8@gmail.com
@group : Techdicer
@last modified on : 10-15-2023
@last modified by : zuberrangreaz8@gmail.com
Modifications Log
Ver Date Author Modification
1.0 05-27-2023 zuberrangreaz8@gmail.com Initial Version | Story Number
-->
<template>
<div style="background-color:#ffffff;">
<div class="slds-page-header slds-page-header_record-home">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<span class="slds-page-header__title slds-truncate" title="Acme - 1,200 Widgets"> DYN-FORMS</span>
<div class="slds-media">
<div class="slds-media__figure">
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
</div>
</div>
</div>
</div>
</div>
<div class="slds-page-header__col-actions">
<div class="slds-page-header__controls">
<div class="slds-page-header__control">
<lightning-combobox name="progress" value={value} variant="label-hidden"
placeholder="Select Progress" options={options} onchange={handleChange}>
</lightning-combobox>
</div>
<div class="slds-page-header__control">
<ul class="slds-button-group-list">
<li>
<button class="slds-button slds-button_neutral"> Reset </button>
</li>
<li>
<button class="slds-button slds-button_neutral"> Save</button>
</li>
<li>
<lightning-button variant="success" label="Priview" icon-name="utility:preview"
icon-position="right" class="slds-m-left_x-small"></lightning-button>
</li>
<li>
<lightning-button variant="destructive" label="Delete" title="Delete action"
icon-name="utility:delete" icon-position="right" class="slds-m-left_x-small">
</lightning-button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<lightning-layout multiple-rows>
<lightning-layout-item size="4" padding="around-small">
<lightning-card variant="Narrow">
<lightning-layout multiple-rows>
<lightning-layout-item size="6" padding="around-small">
<div class="slds-p-bottom_medium" draggable="true" data-item="text"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:text" size="small"> </lightning-icon>
<b> Text Field</b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="Number"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:number_input" size="small"> </lightning-icon>
<b> Number Filed </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="picklist"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:picklist" size="small"> </lightning-icon>
<b> Picklist Field </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="checkbox"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:check" size="small"> </lightning-icon>
<b> Checkbox Field </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="password"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:password" size="small"> </lightning-icon>
<b> Password Field </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="datetime"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:date_time" size="small">
</lightning-icon>
<b> Datetime Field </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="rich text"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:display_rich_text" size="small">
</lightning-icon>
<b> Rich Text Area </b>
</div>
</lightning-layout-item>
<lightning-layout-item size="6" padding="around-small">
<div class="slds-p-bottom_medium" draggable="true" data-item="email"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:email" size="small"></lightning-icon>
<b> Email Field</b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="date"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:event" size="small"> </lightning-icon>
<b> Date Field </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="time"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:clock" size="small"> </lightning-icon>
<b> Time Field </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="url"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:link" size="small"> </lightning-icon>
<b> Url Field </b>
</div>
<div class="slds-p-bottom_medium" draggable="true" data-item="Textarea"
ondragstart={handleDragText}>
<lightning-icon icon-name="utility:textarea" size="small">
</lightning-icon>
<b> Textarea Field </b>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</lightning-layout-item>
<lightning-layout-item size="7" padding="around-small">
<c-drop-Cmp-Lwc colamsize={value}></c-drop-Cmp-Lwc>
</lightning-layout-item>
</lightning-layout>
</div>
</template>
dregComponent.js:
/**
* @description :
* @author : zuberrangreaz8@gmail.com
* @group :
* @last modified on : 10-15-2023
* @last modified by : zuberrangreaz8@gmail.com
* Modifications Log
* Ver Date Author Modification
* 1.0 05-27-2023 zuberrangreaz8@gmail.com Initial Version
*
**/
import { LightningElement, api } from 'lwc';
export default class dregComponent extends LightningElement {
@api fieldName;
value = '12';
get options() {
return [
{ label: '1', value: '12' },
{ label: '2', value: '6' },
];
}
handleDragText(event) {
console.log('eventttttt', event);
event.dataTransfer.setData("", event.target.dataset.item);
}
handleChange(event) {
this.value = event.detail.value;
}
}
dregComponent.js-meta.xml:
<?xml version="1.0"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>57.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle>
dropCmpLwc.html:
<!--
@description :
@author : zuberrangreaz8@gmail.com
@group : Techdicer
@last modified on : 10-15-2023
@last modified by : zuberrangreaz8@gmail.com
Modifications Log
Ver Date Author Modification
1.0 05-27-2023 zuberrangreaz8@gmail.com Initial Version | Story Number
-->
<template>
<lightning-card ondrop={dropElement} ondragover={allowDrop}>
<div if:true={textinput}>
<lightning-layout multiple-rows>
<template for:each={allvalue} for:item="acc">
<lightning-layout-item size={colamsize} padding="around-small" key={acc.Id}>
<div class="slds-p-around_x-small">
<div if:true={acc.isnormal}>
<lightning-input type={acc.fieldtype} label={acc.fieldtype}>
</lightning-input>
</div>
<div if:true={acc.istextarea}>
<lightning-textarea name="input1" label="text area"></lightning-textarea>
</div>
<div if:true={acc.isrichtexarea}>
<lightning-input-rich-text label="rich text">
</lightning-input-rich-text>
</div>
<div if:true={acc.ispiclist}>
<lightning-combobox name="progress" label="Status" value={value}
placeholder="Select Progress" options={options} onchange={handleChange}>
</lightning-combobox>
</div>
</div>
</lightning-layout-item>
</template>
</lightning-layout>
</div>
</lightning-card>
</template>
dropCmpLwc.js:
/**
* @description :
* @author : zuberrangreaz8@gmail.com
* @group :
* @last modified on : 10-15-2023
* @last modified by : zuberrangreaz8@gmail.com
* Modifications Log
* Ver Date Author Modification
* 1.0 05-27-2023 zuberrangreaz8@gmail.com Initial Version
*
**/
import { LightningElement, track, api } from 'lwc';
export default class DropCmpLwc extends LightningElement {
@track textinput;
@track allvalue = [];
@api colamsize = "";
value = 'inProgress';
get options() {
return [
{ label: 'New', value: 'new' },
{ label: 'In Progress', value: 'inProgress' },
{ label: 'Finished', value: 'finished' },
];
}
handleChange(event) {
this.value = event.detail.value;
}
dropElement(event) {
this.textinput = event.dataTransfer.getData("");
let obj = { fieldtype: this.textinput, isnormal: true, istextarea: false, isrichtexarea: false, ispiclist: false };
if (obj.fieldtype == 'Textarea') {
console.log('xxxx');
obj.istextarea = true;
obj.isnormal = false;
console.log('ooo', obj.istextarea);
}
else if (obj.fieldtype == 'rich text') {
obj.isrichtexarea = true;
obj.isnormal = false;
}
else if (obj.fieldtype == 'picklist') {
obj.ispiclist = true;
obj.isnormal = false;
}
this.allvalue.push(obj);
console.log('getData', event.dataTransfer.getData(""));
console.log('this.allvalue ===', JSON.stringify(this.allvalue));
console.log('this.obj ===', obj.fieldtype);
}
allowDrop(event) {
console.log('allow', event);
event.preventDefault();
}
}
dropCmpLwc.js-meta.xml :
<?xml version="1.0"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>57.0</apiVersion> <isExposed>true</isExposed <targets> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle>
Output :
Reference :
What’s your Reaction?
+1
1
+1
+1
1
+1
+1
6
+1
Total views : 1113188