Display Error Component for Custom Property Editors

Display Error Component for Custom Property Editors

Created by Eric Smith

---

This Post was most recently updated on: 3/26/21

ABOUT

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

This component allows the developer to highlight an input in their CPE with an error condition.

Using Display Error

You can implement this component by including the following in your CPE:

In the myComponentCPE.html file, add the fsc_displayError component as part of each input div where you may want to display an error condition. Wrap the input and the display error in a div with class={inputValues.myField.class}.

    <!-- Data Source -->
    <div class={inputValues.tableData.class}>
        <div class="slds-form-element__control">
            <c-fsc_flow-combobox 
                if:true={isObjectSelected}
                name="select_tableData" 
                label={inputValues.tableData.label}
                value={inputValues.tableData.value} 
                value-type={inputValues.tableData.valueDataType}
                field-level-help={inputValues.tableData.helpText}
                builder-context-filter-type={selectedSObject}
                builder-context-filter-collection-boolean={inputValues.tableData.isCollection}
                builder-context={_builderContext} 
                onvaluechanged={handleFlowComboboxValueChange}>
            </c-fsc_flow-combobox>
        </div>
        <c-fsc_display-error 
            is-error={inputValues.tableData.isError}
            error-message={inputValues.tableData.errorMessage}
        ></c-fsc_display-error> 
    </div>

In the myComponentCPE.js file, add isError: false and errorMessage: null to your myField section in your inputValues.

        tableData: {value: null, valueDataType: null, isCollection: true, label: 'Display which records?', 
            helpText: 'Record Collection variable containing the records to display in the datatable.',
            isError: false, errorMessage: null},

Also in the myComponentCPE.js file, add in your @api validate() method, a condition check and call to the checkError method with your field name and error message.

this.checkError( (error condition), ‘myField’, ‘My Error Message’);

@api
validate() {
    this.validateErrors.length = 0;
... 
    this.checkError((!this.isRecordCollectionSelected), 'tableData', 'You must provide a Collection of Records to display');
...
    return this.validateErrors;
}

Finally, in the myComponentCPE.js file, add the checkError method.

checkError(isError, key, errorString) {
    this.inputValues[key].class = 'slds-form-element';
    if (isError) { 
        this.validateErrors.push({key: key, errorString: errorString});
        this.inputValues[key].isError = true;
        this.inputValues[key].errorMessage = errorString;
        this.inputValues[key].class += ' slds-has-error';
        console.log('CPE generated error:', key, isError, errorString);
    } else { 
        this.inputValues[key].isError = false;
    }
}

Attributes

isError – Set to true if the input is to be shown in the error condition

errorMessage – Error message to display along with the input element

Installation

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

View Source

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