Salesforce Developer Community

Sandeep Krishna 34
NEWBIE
10 Points
Member since 2022

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
3

Questions
1

Replies

In LWC Model Popup save selected checkboxes in text field and hold selected values when refresh

model popup created. but trying to save selected checkbox values in text field as comma separated values(contacts title) not working and once saved when we refresh the page and open the popup up it should hold selected checkbox values.

HTML:
<template>
<lightning-card>
<lightning-layout vertical-align="start" class="layout-8">
<lightning-layout-item>
<lightning-button variant="brand-outline" label="TestModel" title="model primary" onclick={openModal}></lightning-button>
<template if:true={isModalOpen}>
<lightning-card>
<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 class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close"
alternative-text="close"
variant="inverse"
size="small" ></lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">countries/States/City/Place</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning-layout vertical-align="start" class="general-form-layout" multiple-rows="true">
<lightning-layout-item size="12" large-device-size="3.8" medium-device-size="4" small-device-size="6">
<lightning-checkbox-group name="Countries"
label="Countries"
options={options}
value={value}
onchange={handleChange}></lightning-checkbox-group>

<lightning-checkbox-group name="States"
label="States"
options={option1}
value={value}
onchange={handleChange}></lightning-checkbox-group>
</lightning-layout-item>
<lightning-layout-item size="12" large-device-size="3.8" medium-device-size="4" small-device-size="6">
<lightning-checkbox-group name="Cities"
label="Cities"
options={option2}
value={value}
onchange={handleChange}></lightning-checkbox-group>
</lightning-layout-item>
<lightning-layout-item size="12" large-device-size="4" medium-device-size="4" small-device-size="6">

<lightning-checkbox-group name="Centals"
label="Centals"
options={option3}
value={value}
onchange={handleChange}></lightning-checkbox-group>

</lightning-layout-item>
<lightning-layout-item>
</lightning-layout-item>
</lightning-layout>


</div>
<footer class="slds-modal__footer">
<div class="slds-grid slds-grid_align-center">
<button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
<button class="slds-button slds-button_brand" onclick={submitDetails} title="OK">Save</button>
</div>
</footer>
</div>
</section>
</lightning-card>
<div class="slds-backdrop slds-backdrop_open"></div>
</template>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>

JS:
import { LightningElement, track } from 'lwc';
import insertModel from '@salesforce/apex/modelPopUP.insertModel';
import MODEL_FIELD from '@salesforce/schema/Contact.Title';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
export default class Model extends LightningElement {
@track popupid;
@track error;
@track getPopUPRecord={
Title:MODEL_FIELD

};

nameInpChange(event){
this.getPopUPRecord.Type = event.target.value;
//window.console.log(this.getAccountRecord.Name);
}

submitDetails(){
insertModel({ mdl : this.getPopUPRecord})
.then(result =>{
this.getPopUPRecord={};
this.popupid=result.id;

const toastEvent = new ShowToastEvent({
title:'Success!',
message:'Account created successfully',
variant:'success'
});
this.dispatchEvent(toastEvent);
})
.catch(error=>{
this.error=error.message;
window.console.log(this.error);
});
}

value = [];
@track isModalOpen = false;

openModal() {
this.isModalOpen = true;
}
closeModal() {
this.isModalOpen = false;
}
submitDetails() {
this.isModalOpen = false;
}

get options() {
return [
{ label: 'India', value: 'option1' },
{ label: 'USA', value: 'option2' },
{ label: 'SouthAfrica', value: 'option3' },
{ label: 'England', value: 'option4' }
];
}
get option1() {
return [
{ label: 'California', value: 'option5' },
{ label: 'Maharastra - RTL', value: 'option6' },
{ label: 'Chicago - SIF', value: 'option7' },
{ label: 'Karnataka', value: 'option8' }
];
}

get option2() {
return [
{ label: 'Mumbai', value: 'option9' },
{ label: 'London', value: 'option10' },
{ label: 'Pune', value: 'option11' },
{ label: 'Ahmadabad', value: 'option12' }

];
}
get option3() {
return [
{ label: 'pondicerry', value: 'option13' },
{ label: 'Dallas', value: 'option14' },
{ label: 'goa', value: 'option15' },
{ label: 'Singapore', value: 'option16' }

];

}

handleChange(e) {
this.value = e.detail.value;
}
get selectedValues() {
return this.value.join(',');
}
}

Apex:
public class modelPopUP {
@AuraEnabled
public static void insertModel(Contact mdl){
try{
insert mdl;
system.debug('Model'+mdl);
}catch(Exception ex){
throw new AuraHandledException(ex.getMessage());
}
}
}

Sandeep Krishna 34
September 04, 2022
Like
0

1 replies

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

Sandeep Krishna 34
August 30, 2022
Like
0

SOLVED

3 replies

Save seleceted checkbox group values in a text field in lightning record edit form in lwc

JS:
----
import { LightningElement,api } 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; //t to store in a title text field
    // 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(',');
        console.log('selected values are '+value);
    }
    handleChange(e) {
        this.value = e.detail.value;
    }
}

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}></lightning-checkbox-group>
                                  <p>Selected Values are: {selectedValues}</p>
<lightning-input-field field-name={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>

Sandeep Krishna 34
August 25, 2022
Like
0

SOLVED

3 replies

Save seleceted checkbox group values in a text field in lightning record edit form in lwc

Sandeep Krishna 34
August 25, 2022
Like
0