Checkbox Component for Custom Property Editors

Created by Eric Smith – February 2021

---

This Post was most recently updated on: 2/17/21

ABOUT

The fsc_flowCheckbox component is designed to be used in a Custom Property Editor.

There is an undesired behavior when using a standard lightning-input with a type of checkbox in a Custom Property Editor. If a checkbox is checked in the CPE and then it is later cleared, its cleared value is not retained when exiting the CPE. An unchecked value will only be retained in the component if the user unchecks, rechecks, and then unchecks again before exiting the CPE.

This component allows the developer to display a Checkbox in a Custom Property Editor. It avoids the issues with a CPE checkbox not being persistent unless it is unselected more than once. It also supports the ability to give a boolean attribute a default value of True.

Using Flow Checkbox

This component requires the addition of an extra string attribute to be paired with each boolean attribute that will be presented in the CPE as a checkbox. For example, if you have a checkbox (boolean) attribute called myCheckbox, you will need to add an additional attribute called cb_myCheckbox.

In your Flow Screen LWC, you will need to update both your component.js and component.js-meta.xml files to reference the additional attribute(s).

component.js

...
@api 
get myCheckbox() {
    return (this.cb_required == 'CB_TRUE') ? true : false;
}
@api cb_myCheckbox;
...

component.js-meta.xml

<targetConfig targets="lightning__FlowScreen" configurationEditor="c-component-c-p-e" category="Input">
    ...
    <property name="myCheckbox" type="Boolean" role="inputOnly"/>
    <property name="cb_myCheckbox" type="String" role="inputOnly"/>
    ...
</targetConfig>

In your Custom Property Editor, you will need to update your inputValues section to include the additional attribute(s).

componentCPE.js

@track inputValues= {
    ...
    myCheckbox: {value: null, valueDataType: null, isCollection: false, label: 'My Attribute Label'},
    cb_myCheckbox: {value: null, valueDataType: null, isCollection: false, label: ''},
    ...
}

To use the checkbox component in your CPE, embed the fsc_flowCheckbox in your CPE’s HTML.

componentCPE.html

    <c-fsc_flow-checkbox
        name="select_myCheckbox"
        label={inputValues.myCheckbox.label}
        field-level-help={inputValues.myCheckbox.helpText}
        checked={inputValues.cb_myCheckbox.value}
        oncheckboxchanged={handleCheckboxChange}
    ></c-fsc_flow-checkbox>

You will also need to add this handler to your CPE’s JavaScript file.

componentCPE.js

handleCheckboxChange(event) {
    if (event.target && event.detail) {
        let changedAttribute = event.target.name.replace(defaults.inputAttributePrefix, '');
        this.dispatchFlowValueChangeEvent(changedAttribute, event.detail.newValue, event.detail.newValueDataType);
        this.dispatchFlowValueChangeEvent('cb_'+changedAttribute, event.detail.newStringValue, 'String');
    }
}

Setting a default value of TRUE for the checkbox attribute

If you want your checkbox to default to checked, you will need to make the following modifications to the steps outlined above.

component.js

...
@api 
get myCheckbox() {
    return (this.cb_myCheckbox == 'CB_TRUE') ? true : false;
}
@api cb_myCheckbox = 'CB_TRUE';
...

componentCPE.js

@track inputValues= {
    ...
    myCheckbox: {value: null, valueDataType: null, isCollection: false, label: 'My Attribute Label'},
    cb_myCheckbox: {value: 'CB_TRUE', valueDataType: null, isCollection: false, label: ''},
    ...
}

Setting the checkbox attribute value in code

Sometimes, in your CPE, you will want to set or change the value of a checkbox attribute. Include this function in your CPE to handle setting the attribute value.

componentCPE.js

this.updateCheckboxValue('myCheckbox', false);

updateCheckboxValue(name, value) {
    this.inputValues[name].value = value;
    this.dispatchFlowValueChangeEvent(name, value, 'boolean');
    this.inputValues['cb_'+name].value = (value) ? 'CB_TRUE' : 'CB_FALSE';
    this.dispatchFlowValueChangeEvent('cb_'+name, this.inputValues['cb_'+name].value, 'String');
}

Attributes

label – Prompt to appear to the right of the checkbox

name – When following the standard template for a CPE, this will be “select_attributename”

checked – Pass in the value of input.values.cb_attributename

fieldLevelHelp – Help text for the checkbox attribute

disabled – Set to true to show the checkbox as disabled in the CPE

Installation

This component is part of the Flow Base Packs package libraries (FlowScreenComponentsBasePack Version 2.1.6 or greater).

View Source

The source code can be found as part of the Flow Screen Components Base Pack.