Created by Eric Smith – February 2021

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

Advertisement

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 required, you will need to add an additional attribute called cb_required.

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 required() { return (this.cb_required == 'CB_TRUE') ? true : false; } @api cb_required; ...

component.js-meta.xml

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

componentCPE.js

@track inputValues= { ...     required: {value:null, valueDataType: null, isCollection: false, label: 'Required'},     cb_required: {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_required" label={inputValues.required.label} checked={inputValues.cb_required.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 required() { return (this.cb_required == 'CB_TRUE') ? true : false; } @api cb_required = 'CB_TRUE'; ...

componentCPE.js

@track inputValues= { ...     required: {value:null, valueDataType: null, isCollection: false, label: 'Required'},     cb_required: {value:'CB_TRUE', valueDataType: null, isCollection: false, label: ''}, ... }

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.

Please click here to read the original article as posted on UnofficialSF.

We source the web to bring you best Salesforce articles for our reader’s convenience. If you want to have this article removed, please follow guidelines at Digital Millennium Copyright Act (DMCA)..