You need to sign in to do that
Don't have an account?
Sandeep Krishna 34
in Lightning record edit form LWC, selected checkbox group values are storing in a text field, after reload the page it should hold the selected values in UI
HTML:
<template>
<lightning-record-edit-form object-api-name="Contact" record-id={recordId}>
<lightning-checkbox-group name="Checkbox Group"
label="Checkbox Group"
options={options}
value={value}
onchange={handleChange}
onload={handleOnLoad}>
</lightning-checkbox-group>
<lightning-input-field class="slds-hide" field-name={selectedValues} value = {selectedValue} ></lightning-input-field>
<div class="slds-var-m-top_medium">
<lightning-button variant="brand" type="submit" label="Save">
</lightning-button>
</div>
</lightning-record-edit-form>
</template>
JS:
import { LightningElement,api,track } from 'lwc';
import TITLE_FIELD from '@salesforce/schema/Contact.Title';
export default class RecordEditFormLWC extends LightningElement {
// Expose a field to make it available in the template
selectedValues = TITLE_FIELD;
@track isChanged =false;
@track value ;
@track titleold;
handleOnLoad(event) {
var record = event.detail.records;
var fields = record[this.recordId].fields;
/* const titleNew=fields.Title.value;
this.titleold=titleNew; */
if(fields.Title==="option1"){
this.value.checked="checked";
this.isChanged=true;
}
}
// Flexipage provides recordId and objectApiName
@api recordId;
@api objectApiName;
value = [];
get options() {
return [
{ label: 'Ross', value: 'option1' },
{ label: 'Rachel', value: 'option2' },
];
}
get selectedValue() {
return this.value.join(',');
}
handleChange(e) {
this.value = e.detail.value;
}
}
<template>
<lightning-record-edit-form object-api-name="Contact" record-id={recordId}>
<lightning-checkbox-group name="Checkbox Group"
label="Checkbox Group"
options={options}
value={value}
onchange={handleChange}
onload={handleOnLoad}>
</lightning-checkbox-group>
<lightning-input-field class="slds-hide" field-name={selectedValues} value = {selectedValue} ></lightning-input-field>
<div class="slds-var-m-top_medium">
<lightning-button variant="brand" type="submit" label="Save">
</lightning-button>
</div>
</lightning-record-edit-form>
</template>
JS:
import { LightningElement,api,track } from 'lwc';
import TITLE_FIELD from '@salesforce/schema/Contact.Title';
export default class RecordEditFormLWC extends LightningElement {
// Expose a field to make it available in the template
selectedValues = TITLE_FIELD;
@track isChanged =false;
@track value ;
@track titleold;
handleOnLoad(event) {
var record = event.detail.records;
var fields = record[this.recordId].fields;
/* const titleNew=fields.Title.value;
this.titleold=titleNew; */
if(fields.Title==="option1"){
this.value.checked="checked";
this.isChanged=true;
}
}
// Flexipage provides recordId and objectApiName
@api recordId;
@api objectApiName;
value = [];
get options() {
return [
{ label: 'Ross', value: 'option1' },
{ label: 'Rachel', value: 'option2' },
];
}
get selectedValue() {
return this.value.join(',');
}
handleChange(e) {
this.value = e.detail.value;
}
}
I see that you also posted on https://salesforce.stackexchange.com/questions/384244/lightning-record-edit-from-on-load-for-checkbox-group-in-lwc . Does the provided answer on Stackexchange solve your scenario?
Thanks