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.