feat: improved picklist field CPE validation

trailheadapps · Nov 6, 2023 · 3474092 · 3474092
1 parent ec9f302
commit 3474092
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 36 deletions.
diff --git a/sfdx-project.json b/sfdx-project.json
@@ -53,8 +53,8 @@
     {
       "path": "src-ui",
       "package": "AC - UI",
-      "versionName": "Spring '23 release",
-      "versionNumber": "57.0.0.NEXT",
+      "versionName": "Winter '24 release",
+      "versionNumber": "59.0.0.NEXT",
       "ancestorVersion": "HIGHEST"
     },
     {
@@ -67,7 +67,7 @@
   ],
   "namespace": "",
   "sfdcLoginUrl": "https://login.salesforce.com",
-  "sourceApiVersion": "57.0",
+  "sourceApiVersion": "59.0",
   "packageAliases": {
     "AC - Apex Formula Evaluator": "0Ho5w000000TN4OCAW",
     "AC - Collections": "0Ho5w000000TN3kCAG",
@@ -78,24 +78,13 @@
     "AC - Strings": "0Ho5w000000TN49CAG",
     "AC - UI": "0Ho5w000000TN4ECAW",
     "AC - Utilities": "0Ho5w000000TN4JCAW",
-    "AC - [email protected]": "04t5w000005hjJnAAI",
-    "AC - [email protected]": "04t5w000005hjJOAAY",
-    "AC - [email protected]": "04t5w000005hjJYAAY",
-    "AC - [email protected]": "04t5w000005hjJiAAI",
-    "AC - Apex Formula [email protected]": "04t5w000005hjJdAAI",
-    "AC - [email protected]": "04t5w000005hjJEAAY",
-    "AC - [email protected]": "04t5w000005hjJ9AAI",
-    "AC - [email protected]": "04t5w000005hjJTAAY",
-    "AC - [email protected]": "04t5w000005hjJJAAY",
-    "AC - [email protected]": "04t5w000005hje9AAA",
     "AC - [email protected]": "04t5w000005hkOUAAY",
     "AC - [email protected]": "04t5w000005hkOZAAY",
     "AC - Apex Formula [email protected]": "04t5w000005hkOPAAY",
     "AC - [email protected]": "04t5w000005hkOoAAI",
     "AC - [email protected]": "04t5w000005hkOtAAI",
     "AC - [email protected]": "04t5w000005hkP8AAI",
     "AC - [email protected]": "04t5w000005hkP3AAI",
-    "AC - [email protected]": "04t5w000005hkOyAAI",
     "AC - [email protected]": "04t5w000005hkPDAAY",
     "AC - [email protected]": "04t5w000005hkkbAAA"
   }

diff --git a/src-ui/main/default/lwc/flowCombobox/flowCombobox.html b/src-ui/main/default/lwc/flowCombobox/flowCombobox.html
@@ -16,7 +16,7 @@
                         <template lwc:if={displayPill}>
                             <label
                                 class="slds-form-element__label slds-no-flex"
-                                onclick={toggleMenu}
+                                for="pill-container"
                                 ><abbr
                                     lwc:if={required}
                                     class="slds-required"
@@ -25,6 +25,7 @@
                                 >{label}</label
                             >
                             <div
+                                id="pill-container"
                                 data-input-name={name}
                                 class="slds-pill_container"
                                 onclick={handleOpenOptions}
@@ -46,7 +47,7 @@
                             <div onkeyup={handleSearchKeyUp}>
                                 <label
                                     class="slds-form-element__label"
-                                    onclick={toggleMenu}
+                                    for="this-input"
                                     ><abbr
                                         lwc:if={required}
                                         class="slds-required"
@@ -55,6 +56,7 @@
                                     >{label}</label
                                 >
                                 <lightning-input
+                                    id="this-input"
                                     class="value-input"
                                     name="searchText"
                                     type="search"

diff --git a/src-ui/main/default/lwc/flowCombobox/flowCombobox.js b/src-ui/main/default/lwc/flowCombobox/flowCombobox.js
@@ -115,6 +115,16 @@ export default class FlowCombobox extends LightningElement {
         return this.isValid;
     }
 
+    @api
+    setCustomValidity(message) {
+        this.isValid = message === '';
+        const inputCmp = this.template.querySelector('lightning-input');
+        if (inputCmp) {
+            inputCmp.setCustomValidity(message);
+            inputCmp.reportValidity();
+        }
+    }
+
     @wire(getObjectInfo, { objectApiName: '$_selectedObjectType' })
     _getObjectInfo({ error, data }) {
         if (error) {
@@ -417,6 +427,9 @@ export default class FlowCombobox extends LightningElement {
         }
 
         if (this.isDataModified) {
+            this.setCustomValidity('');
+            this.reportValidity();
+
             this.dispatchValueChangedEvent();
             this.isDataModified = false;
         }

diff --git a/src-ui/main/default/lwc/flowCombobox/flowCombobox.js-meta.xml b/src-ui/main/default/lwc/flowCombobox/flowCombobox.js-meta.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>57.0</apiVersion>
+    <apiVersion>59.0</apiVersion>
     <isExposed>false</isExposed>
 </LightningComponentBundle>
diff --git a/src-ui/main/default/lwc/flowComboboxUtils/flowComboboxUtils.js-meta.xml b/src-ui/main/default/lwc/flowComboboxUtils/flowComboboxUtils.js-meta.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>57.0</apiVersion>
+    <apiVersion>59.0</apiVersion>
     <isExposed>false</isExposed>
 </LightningComponentBundle>
diff --git a/src-ui/main/default/lwc/quickChoice/quickChoice.js b/src-ui/main/default/lwc/quickChoice/quickChoice.js
@@ -1,6 +1,7 @@
 import { LightningElement, api, wire } from 'lwc';
 import { FlowAttributeChangeEvent } from 'lightning/flowSupport';
 import { getPicklistValues } from 'lightning/uiObjectInfoApi';
+import LightningAlert from 'lightning/alert';
 import FORM_FACTOR from '@salesforce/client/formFactor';
 
 // Import component templates
@@ -64,9 +65,12 @@ export default class QuickChoice extends LightningElement {
                 'getPicklistValues wire service returned error: ',
                 JSON.stringify(error)
             );
-            throw new Error(
-                `Failed to retrieve picklist values for ${this.label}`
-            );
+            let message = `Failed to retrieve picklist values for component '${this.label}'`;
+            if (!/.\../.test(this.qualifiedPicklistFieldName)) {
+                message = `Invalid configuration for component '${this.label}': '${this.qualifiedPicklistFieldName}' is not a qualified field API name`;
+            }
+            this.displayError(message);
+            throw new Error(message);
         } else if (data) {
             const icons = this.choiceIcons
                 ? this.choiceIcons
@@ -153,10 +157,9 @@ export default class QuickChoice extends LightningElement {
                 break;
 
             default: {
-                const errorMessage = `Invalid input source for '${this.label}': ${this.inputSource}`;
-                // eslint-disable-next-line no-alert
-                alert(errorMessage);
-                throw new Error(errorMessage);
+                const message = `Invalid configuration for component '${this.label}': unsupported input source '${this.inputSource}'`;
+                this.displayError(message);
+                throw new Error(message);
             }
         }
     }
@@ -169,6 +172,14 @@ export default class QuickChoice extends LightningElement {
         console.error(JSON.stringify(error, null, 2));
     }
 
+    displayError(message) {
+        LightningAlert.open({
+            message,
+            theme: 'error',
+            label: 'Quick Choice Component Error'
+        });
+    }
+
     renderedCallback() {
         // Select initial card value
         if (this.isCards() && this.value) {

diff --git a/src-ui/main/default/lwc/quickChoice/quickChoice.js-meta.xml b/src-ui/main/default/lwc/quickChoice/quickChoice.js-meta.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>57.0</apiVersion>
+    <apiVersion>59.0</apiVersion>
     <isExposed>true</isExposed>
-    <masterLabel>Quick Choice</masterLabel>
+    <masterLabel>Quick Choice (Automation Components)</masterLabel>
     <description
     >Displays a list of choices to the user in a variety of formats (picklist, radio, cards)</description>
     <targets>

diff --git a/src-ui/main/default/lwc/quickChoicePropertyEditor/quickChoicePropertyEditor.html b/src-ui/main/default/lwc/quickChoicePropertyEditor/quickChoicePropertyEditor.html
@@ -5,7 +5,7 @@
         value={label}
         value-type={labelValueType}
         builder-context={builderContext}
-        onvaluechanged={handleValueChanged}
+        onvaluechanged={handleFlowComboboxChange}
         required
     ></c-flow-combobox>
 
@@ -26,7 +26,7 @@
         value={value}
         value-type={valueValueType}
         builder-context={builderContext}
-        onvaluechanged={handleValueChanged}
+        onvaluechanged={handleFlowComboboxChange}
     ></c-flow-combobox>
 
     <lightning-radio-group
@@ -47,11 +47,12 @@
         >
             <c-flow-combobox
                 name="qualifiedPicklistFieldName"
+                class="qualifiedPicklistFieldName"
                 label="Qualified Picklist Field Name"
                 value={qualifiedPicklistFieldName}
                 value-type={qualifiedPicklistFieldNameValueType}
                 builder-context={builderContext}
-                onvaluechanged={handleValueChanged}
+                onvaluechanged={handleQualifiedPicklistFieldNameChange}
                 required
             ></c-flow-combobox>
             <c-flow-combobox
@@ -60,7 +61,7 @@
                 value={recordTypeId}
                 value-type={recordTypeIdValueType}
                 builder-context={builderContext}
-                onvaluechanged={handleValueChanged}
+                onvaluechanged={handleFlowComboboxChange}
             ></c-flow-combobox>
         </div>
     </template>
@@ -76,7 +77,7 @@
                 value={choiceLabels}
                 value-type={choiceLabelsValueType}
                 builder-context={builderContext}
-                onvaluechanged={handleValueChanged}
+                onvaluechanged={handleFlowComboboxChange}
                 required
             ></c-flow-combobox>
             <c-flow-combobox
@@ -85,7 +86,7 @@
                 value={choiceValues}
                 value-type={choiceValuesValueType}
                 builder-context={builderContext}
-                onvaluechanged={handleValueChanged}
+                onvaluechanged={handleFlowComboboxChange}
                 required
             ></c-flow-combobox>
         </div>
@@ -123,7 +124,7 @@
                 value={choiceIcons}
                 value-type={choiceIconsValueType}
                 builder-context={builderContext}
-                onvaluechanged={handleValueChanged}
+                onvaluechanged={handleFlowComboboxChange}
             ></c-flow-combobox>
         </div>
     </template>

diff --git a/src-ui/main/default/lwc/quickChoicePropertyEditor/quickChoicePropertyEditor.js b/src-ui/main/default/lwc/quickChoicePropertyEditor/quickChoicePropertyEditor.js
@@ -43,6 +43,14 @@ export default class QuickChoiceEditor extends LightningElement {
                 });
             }
         });
+        // Check format for qualified field API Name
+        const errorString = this.validateQualifiedPicklistFieldName();
+        if (errorString) {
+            validity.push({
+                key: 'Qualified Picklist Field Name',
+                errorString
+            });
+        }
         return validity;
     }
 
@@ -84,12 +92,17 @@ export default class QuickChoiceEditor extends LightningElement {
         this.propagateChangeToConfigEditor(name, type, value);
     }
 
-    handleValueChanged(event) {
+    handleFlowComboboxChange(event) {
         const { id, newValueDataType, newValue } = event.detail;
         this.setInputVariableValue(id, newValueDataType, newValue);
         this.propagateChangeToConfigEditor(id, newValueDataType, newValue);
     }
 
+    handleQualifiedPicklistFieldNameChange(event) {
+        this.handleFlowComboboxChange(event);
+        this.validateQualifiedPicklistFieldName();
+    }
+
     getValueFromChangeEvent(event) {
         const { tagName, type } = event.target;
         let value;
@@ -128,6 +141,21 @@ export default class QuickChoiceEditor extends LightningElement {
         this.dispatchEvent(valueChangedEvent);
     }
 
+    validateQualifiedPicklistFieldName() {
+        let error = null;
+        if (
+            this.qualifiedPicklistFieldName !== '' &&
+            !/.\../.test(this.qualifiedPicklistFieldName)
+        ) {
+            error = `Value is not a qualified field API name.`;
+            const input = this.template.querySelector(
+                '.qualifiedPicklistFieldName'
+            );
+            input?.setCustomValidity(error);
+        }
+        return error;
+    }
+
     get label() {
         return this.getInputVariableValue('label');
     }

diff --git a/src-ui/main/default/lwc/quickChoicePropertyEditor/quickChoicePropertyEditor.js-meta.xml b/src-ui/main/default/lwc/quickChoicePropertyEditor/quickChoicePropertyEditor.js-meta.xml
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <apiVersion>57.0</apiVersion>
+    <apiVersion>59.0</apiVersion>
     <isExposed>false</isExposed>
 </LightningComponentBundle>