Checkbox in Salesforce Lightning Web Component lightning-input-field

Checkbox in Salesforce Lightning Web Component lightning-input-field

In Salesforce Lightning Web Component lightning-input-field, we can make use of value attribute to pass and set the value.

Sample Checkbox Field:

Sample Lightning Web Component:

HTML:

<template>      
    <lightning-card class="slds-var-p-around_small">  
        <lightning-record-edit-form 
            object-api-name="Account"
            record-id={recordId}
            onsuccess={handleSuccess}
            onsubmit={handleSubmit}>
            <lightning-messages></lightning-messages>
            <lightning-input-field 
                field-name="Name"
                read-only>
            </lightning-input-field>
            <lightning-input-field 
                field-name="Is_Active__c"
                read-only
                value={activeFlag}>
            </lightning-input-field>
            <template if:true={activeFlag}>
                <lightning-button
                    label="Set Inactive"
                    class="slds-var-p-around_medium"
                    onclick={setActiveFlag}>
                </lightning-button>
            </template>
            <template if:false={activeFlag}>
                <lightning-button
                    label="Set Active"
                    class="slds-var-p-around_medium"
                    onclick={setActiveFlag}>
                </lightning-button>
            </template>
            <lightning-button
                type="submit"
                name="submit"
                label="Update Account"
                class="slds-var-p-around_medium">
            </lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

JavaScript:

import { LightningElement, api, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getRecord } from 'lightning/uiRecordApi';
const FIELDS = [ 'Account.Is_Active__c' ];

export default class AccountUpdate extends LightningElement {

    @api recordId;
    activeFlag;

    @wire( getRecord, { recordId: '$recordId', fields: FIELDS } )
    wiredRecord({ error, data }) {

        if ( error ) {

            console.log( 'Inside error block' );
            let message = 'Unknown error';
            if ( Array.isArray( error.body ) ) {
                message = error.body.map(e => e.message).join(', ');
            } else if ( typeof error.body.message === 'string' ) {
                message = error.body.message;
            }
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Some error occurred',
                    message,
                    variant: 'error',
                }),
            );

        } else if ( data ) {

            console.log( 
                'Active Flag Value is', 
                JSON.stringify( data.fields.Is_Active__c.value ) 
            );
            this.activeFlag = data.fields.Is_Active__c.value;

        }
    }

    handleSuccess() {

        console.log( 'Inside Handle Success' );
        this.dispatchEvent(
            new ShowToastEvent( {
                title: 'Account Update',
                message: 'Account Updated Successfully!!!',
                variant: 'success'
            } ),
        );

    }

    handleSubmit(event){

        event.preventDefault(); 
        const fields = event.detail.fields;
        fields.Is_Active__c = this.activeFlag;
        this.template.querySelector( 'lightning-record-edit-form' )
        .submit( fields );

     }

    setActiveFlag() {

        this.activeFlag = !this.activeFlag;

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply