Displaying the Picklist field as Check box in record Edit & New form

In this post , we will see two things.
  • How to display the Picklist value as radio check box in record edit form using js controller
  • After saving the record , how to bind the value again, once user edit the record
Here are component structure for this requirement.

Aura Component :
  •       pickListToChkBoxAura - Purpose of the component is to override the standard edit and new  button ,since LWC is not supported for button overriding
Lightning Web component :
  •      pickListToChkBoxForm 

pickListToChkBoxAura.cmp

<aura:component implements="lightning:actionOverride,force:appHostable,flexipage:availableForAllPageTypes,
force:hasRecordId" access="global">
<c:pickListToChkBoxForm recordId="{!v.recordId}"></c:pickListToChkBoxForm>
</aura:component>



pickListToChkBoxForm.html 

we can use lightning-input with type equals radio to display the pick-list as Radio checkbox . 

<template>
<lightning-record-edit-form class="Case" object-api-name="Case" record-id={recordId} onsuccess={handleSucess} onsubmit={handleSubmit}>

<lightning-input-field field-name="Subject">
</lightning-input-field>

<lightning-input-field field-name="Description">
</lightning-input-field>
<!--Display the picklist value as radio button-->
<template for:each={originValues} for:item="item">
<lightning-input name="Origin" checked={item.checkedBoolean} placeholder="Account Type" key={item.value}
label={item.label} data-value={item.value} type="radio" onselect={handleChange}></lightning-input>
</template>

<lightning-button type="submit" class="slds-m-top_small" label="Save">
</lightning-button>

</lightning-record-edit-form>

</template>



pickListToChkBoxForm.js 

We will make use of the inbuilt uiObjectInfoApi library provided by salesforce to get the picklist values.  

import { LightningElement, api, track, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import CASE_OBJECT from '@salesforce/schema/Contact';
import ORIGINFIELD from '@salesforce/schema/Case.Origin';


export default class PickListToChkBoxForm extends NavigationMixin(LightningElement) {
@api recordId;
@track fields = {};
@track originValues;
@track value;


@wire(getObjectInfo, { objectApiName: CASE_OBJECT })
objectInfo;

/*wire method to get the origin picklist values */
@wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: ORIGINFIELD })
originPicklistValues({
error,
data
}) {
if (data) {
this.originValues = data.values;
this.myValue = getFieldValue(data, ORIGINFIELD);
let dataList = [];

//Update all checkbox as true for new page
for (let index = 0; index < this.originValues.length; index++) {

let tempLst = Object.assign({}, this.originValues[index]);
tempLst.checkedBoolean = false;
dataList.push(tempLst);
}
this.originValues = dataList;
}
}


/*wire method to get current record origin value */
@wire(getRecord, { recordId: '$recordId', fields: [ORIGINFIELD] })
Originsss(
{ error, data }
) {
let dataList = [];
if (data && this.originValues.length !== 0 && this.recordId !== undefined) {
this.myValue = getFieldValue(data, ORIGINFIELD);

for (let index = 0; index < this.originValues.length; index++) {
//Update Appropriate checkbox as true for edit page
let tempLst = Object.assign({}, this.originValues[index]);
if (this.myValue === tempLst.value) {
tempLst.checkedBoolean = true;
}
else {
tempLst.checkedBoolean = false;
}
dataList.push(tempLst);

}
this.originValues = dataList;
}

}
/* method to get the checkbox value */
handleChange(event) {
this.value = event.detail.value;
}

/* Method to save the record */
handleSubmit(event) {
event.preventDefault(); // stop the form from submitting
const fields = event.detail.fields;
fields.Origin = this.value;
this.template.querySelector('lightning-record-edit-form').submit(fields);
}

/* Method to redirect the case standard view */
handleSucess(event) {
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: event.detail.id,
objectApiName: 'Case',
actionName: 'view'
}
});
const evt = new ShowToastEvent({
message: "case has been created sucessfully",
variant: "success",
});
this.dispatchEvent(evt);
}


}


GitHub :
Demo :




No comments:

Post a Comment