Fixes to desired functionality

Author: Tom German

src/common/utilities/FormulaEvaluation.ts

@@ -39,7 +39,7 @@ export class FormulaEvaluation {
             [new RegExp(`^(${ValidFuncNames.join('|')})\\(`), "FUNCTION"], // Functions or other words
             [/^(true|false)/, "BOOLEAN"],                       // Boolean literals
             [/^\w+/, "WORD"],                                   // Other words, checked against valid variables
-            [/^&&|^\|\||^==/, "OPERATOR"],                        // Operators and special characters (match double first)
+            [/^&&|^\|\||^==|^<>/, "OPERATOR"],                        // Operators and special characters (match double first)
             [/^[+\-*/<>=%!&|?:,()[\]]/, "OPERATOR"],           // Operators and special characters
         ];
 
@@ -113,6 +113,7 @@ export class FormulaEvaluation {
                 "<": { precedence: 3, associativity: "left" },
                 "==": { precedence: 3, associativity: "left" },
                 "!=": { precedence: 3, associativity: "left" },
+                "<>": { precedence: 3, associativity: "left" },
                 ">=": { precedence: 3, associativity: "left" },
                 "<=": { precedence: 3, associativity: "left" },
                 "&&": { precedence: 2, associativity: "left" },
@@ -256,7 +257,7 @@ export class FormulaEvaluation {
                 stack.push({ type: operand.type, value: -numericValue });
             } else if (token.type === "OPERATOR") {
                 // Operators have two operands, we pop them from the stack and push an object representing the operation
-                if (["+", "-", "*", "/", "==", "!=", ">", "<", ">=", "<=", "&&", "||", "%", "&", "|", "?", ":"].includes(token.value as string)) {
+                if (["+", "-", "*", "/", "==", "!=", "<>", ">", "<", ">=", "<=", "&&", "||", "%", "&", "|", "?", ":"].includes(token.value as string)) {
                     if (token.value === "?") {
                         // Ternary operator has three operands, and left and right operators should be top of stack
                         const colonOperator = stack.pop() as ASTNode;
@@ -338,7 +339,7 @@ export class FormulaEvaluation {
         }
 
         // OPERATOR nodes have their OPERANDS evaluated recursively, with the operator applied to the results
-        if (node.type === "OPERATOR" && ["+", "-", "*", "/", "==", "!=", ">", "<", ">=", "<=", "&&", "||", "%", "&", "|"].includes(node.value as string) && node.operands) {
+        if (node.type === "OPERATOR" && ["+", "-", "*", "/", "==", "!=", "<>", ">", "<", ">=", "<=", "&&", "||", "%", "&", "|"].includes(node.value as string) && node.operands) {
 
             const leftValue = this.evaluateASTNode(node.operands[0], context);
             const rightValue = this.evaluateASTNode(node.operands[1], context);
@@ -361,6 +362,7 @@ export class FormulaEvaluation {
                 case "/": return leftValue / rightValue;
                 case "==": return leftValue === rightValue ? 1 : 0;
                 case "!=": return leftValue !== rightValue ? 1 : 0;
+                case "<>": return leftValue !== rightValue ? 1 : 0;
                 case ">": return leftValue > rightValue ? 1 : 0;
                 case "<": return leftValue < rightValue ? 1 : 0;
                 case ">=": return leftValue >= rightValue ? 1 : 0;

src/controls/dynamicForm/DynamicForm.tsx

@@ -113,18 +113,24 @@ export class DynamicForm extends React.Component<
 
   public componentDidUpdate(prevProps: IDynamicFormProps, prevState: IDynamicFormState): void {
     if (!isEqual(prevProps, this.props)) {
+      // Props have changed due to parent component or workbench config, reset state
       this.setState({
         infoErrorMessages: [], // Reset info/error messages
         validationErrors: {} // Reset validation errors
       }, () => {
-        this.getListInformation()
-          .then(() => {
-            /* no-op; */
-          })
-          .catch((err) => {
-            /* no-op; */
-            console.error(err);
-          });
+        // If listId or listItemId have changed, reload list information
+        if (prevProps.listId !== this.props.listId || prevProps.listItemId !== this.props.listItemId) {
+          this.getListInformation()
+            .then(() => {
+              /* no-op; */
+            })
+            .catch((err) => {
+              /* no-op; */
+              console.error(err);
+            });
+        } else {
+          this.performValidation();
+        }
       });
     }
   }
@@ -327,7 +333,7 @@ export class DynamicForm extends React.Component<
         }
 
         // Check min and max values for number fields
-        if (field.fieldType === "Number") {
+        if (field.fieldType === "Number" && field.newValue !== undefined) {
           if ((field.newValue < field.minimumValue) || (field.newValue > field.maximumValue)) {
             shouldBeReturnBack = true;
           }
@@ -336,9 +342,13 @@ export class DynamicForm extends React.Component<
       });
 
       // Perform validation
-      const validationErrors = await this.evaluateFormulas(this.state.validationFormulas, true) as Record<string, string>;
-      if (Object.keys(validationErrors).length > 0) {
-        shouldBeReturnBack = true;
+      const validationDisabled = this.props.useFieldValidation === false;
+      let validationErrors: Record<string, string> = {};
+      if (!validationDisabled) {
+        validationErrors = await this.evaluateFormulas(this.state.validationFormulas, true, true, this.state.hiddenByFormula) as Record<string, string>;
+        if (Object.keys(validationErrors).length > 0) {
+          shouldBeReturnBack = true;
+        }
       }
 
       // If validation failed, return without saving
@@ -462,6 +472,8 @@ export class DynamicForm extends React.Component<
         }
       }
 
+      let apiError: string;
+
       // If we have the item ID, we simply need to update it
       let newETag: string | undefined = undefined;
       if (listItemId) {
@@ -480,6 +492,7 @@ export class DynamicForm extends React.Component<
             );
           }
         } catch (error) {
+          apiError = error.message;
           if (onSubmitError) {
             onSubmitError(objects, error);
           }
@@ -505,6 +518,7 @@ export class DynamicForm extends React.Component<
             );
           }
         } catch (error) {
+          apiError = error.message;
           if (onSubmitError) {
             onSubmitError(objects, error);
           }
@@ -551,6 +565,7 @@ export class DynamicForm extends React.Component<
             );
           }
         } catch (error) {
+          apiError = error.message;
           if (onSubmitError) {
             onSubmitError(objects, error);
           }
@@ -561,6 +576,7 @@ export class DynamicForm extends React.Component<
       this.setState({
         isSaving: false,
         etag: newETag,
+        infoErrorMessages: apiError ? [{ type: MessageBarType.error, message: apiError }] : [],
       });
     } catch (error) {
       if (onSubmitError) {
@@ -577,7 +593,8 @@ export class DynamicForm extends React.Component<
     internalName: string,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     newValue: any,
-    additionalData?: FieldChangeAdditionalData
+    validate: boolean,
+    additionalData?: FieldChangeAdditionalData,
   ): Promise<void> => {
 
     const fieldCol = cloneDeep(this.state.fieldCollection || []);
@@ -652,20 +669,33 @@ export class DynamicForm extends React.Component<
       field.stringValue = emails.join(";");
     }
 
+    const validationErrors = {...this.state.validationErrors};
+    if (validationErrors[field.columnInternalName]) delete validationErrors[field.columnInternalName];
+
     this.setState({
       fieldCollection: fieldCol,
-    }, this.performValidation);
+      validationErrors
+    }, () => {
+      if (validate) this.performValidation(); 
+    });
   };
 
   /** Validation callback, used when form first loads (getListInformation) and following onChange */
   private performValidation = (skipFieldValueValidation?: boolean): void => {
     const { useClientSideValidation, useFieldValidation } = this.props;
-    const clientSideValidationDisabled = useClientSideValidation === false;
-    const fieldValidationDisabled = useFieldValidation === false;
-    const hiddenByFormula: string[] = !clientSideValidationDisabled ? this.evaluateColumnVisibilityFormulas() : [];
-    let validationErrors = { ...this.state.validationErrors };
-    if (!skipFieldValueValidation && !fieldValidationDisabled) validationErrors = this.evaluateFieldValueFormulas();
-    this.setState({ hiddenByFormula, validationErrors });
+    const { clientValidationFormulas, validationFormulas } = this.state;
+    if (Object.keys(clientValidationFormulas).length || Object.keys(validationFormulas).length) {
+      this.setState({
+        isSaving: true, // Disable save btn and fields while validation in progress
+      }, () => {
+        const clientSideValidationDisabled = useClientSideValidation === false;
+        const fieldValidationDisabled = useFieldValidation === false;
+        const hiddenByFormula: string[] = !clientSideValidationDisabled ? this.evaluateColumnVisibilityFormulas() : [];
+        let validationErrors = { ...this.state.validationErrors };
+        if (!skipFieldValueValidation && !fieldValidationDisabled) validationErrors = this.evaluateFieldValueFormulas(hiddenByFormula);
+        this.setState({ hiddenByFormula, isSaving: false, validationErrors });
+      });
+    }
   }
 
   /** Determines visibility of fields that have show/hide formulas set in Edit Form > Edit Columns > Edit Conditional Formula */
@@ -674,8 +704,8 @@ export class DynamicForm extends React.Component<
   }
 
   /** Evaluates field validation formulas set in column settings and returns a Record of error messages */
-  private evaluateFieldValueFormulas = (): Record<string, string> => {
-    return this.evaluateFormulas(this.state.validationFormulas, true, true) as Record<string, string>;
+  private evaluateFieldValueFormulas = (hiddenFields: string[]): Record<string, string> => {
+    return this.evaluateFormulas(this.state.validationFormulas, true, true, hiddenFields) as Record<string, string>;
   }
 
   /**
@@ -688,7 +718,8 @@ export class DynamicForm extends React.Component<
   private evaluateFormulas = (
     formulas: Record<string, Pick<ISPField, "ValidationFormula" | "ValidationMessage">>,
     returnMessages = true,
-    requireValue: boolean = false
+    requireValue: boolean = false,
+    ignoreFields: string[] = []
   ): string[] | Record<string, string> => {
     const { fieldCollection } = this.state;
     const results: Record<string, string> = {};
@@ -697,6 +728,7 @@ export class DynamicForm extends React.Component<
       if (formulas[fieldName]) {
         const field = fieldCollection.find(f => f.columnInternalName === fieldName);
         if (!field) continue;
+        if (ignoreFields.indexOf(fieldName) > -1) continue; // Skip fields that are being ignored (e.g. hidden by formula)
         const formula = formulas[fieldName].ValidationFormula;
         const message = formulas[fieldName].ValidationMessage;
         if (!formula) continue;

src/controls/dynamicForm/dynamicField/DynamicField.tsx

@@ -176,7 +176,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             {...dropdownOptions}
             defaultSelectedKey={valueToDisplay ? undefined : defaultValue}
             selectedKey={typeof valueToDisplay === "object" ? valueToDisplay?.key : valueToDisplay}
-            onChange={(e, option) => { this.onChange(option); }}
+            onChange={(e, option) => { this.onChange(option, true); }}
             onBlur={this.onBlur}
             errorMessage={errorText} />
           {descriptionEl}
@@ -209,7 +209,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             context={context}
             disabled={disabled}
             placeholder={placeholder}
-            onChange={(newValue) => { this.onChange(newValue); }}
+            onChange={(newValue) => { this.onChange(newValue, true); }}
             defaultValue={valueToDisplay !== undefined ? valueToDisplay : defaultValue}
             errorMessage={errorText}
           />
@@ -233,7 +233,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             enableDefaultSuggestions={true}
             keyColumnInternalName='Id'
             itemLimit={1}
-            onSelectedItem={(newValue) => { this.onChange(newValue); }}
+            onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
             context={context}
           />
           {descriptionEl}
@@ -257,7 +257,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             enableDefaultSuggestions={true}
             keyColumnInternalName='Id'
             itemLimit={100}
-            onSelectedItem={(newValue) => { this.onChange(newValue); }}
+            onSelectedItem={(newValue) => { this.onChange(newValue, true); }}
             context={context}
           />
           {descriptionEl}
@@ -318,7 +318,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
               className={styles.pickersContainer}
               formatDate={(date) => { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }}
               value={valueToDisplay !== undefined ? valueToDisplay : defaultValue}
-              onSelectDate={(newDate) => { this.onChange(newDate); }}
+              onSelectDate={(newDate) => { this.onChange(newDate, true); }}
               disabled={disabled}
               firstDayOfWeek={firstDayOfWeek}
             />}
@@ -329,7 +329,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
               placeholder={placeholder}
               formatDate={(date) => { return date.toLocaleDateString(context.pageContext.cultureInfo.currentCultureName); }}
               value={valueToDisplay !== undefined ? valueToDisplay : defaultValue}
-              onChange={(newDate) => { this.onChange(newDate); }}
+              onChange={(newDate) => { this.onChange(newDate, true); }}
               disabled={disabled}
               firstDayOfWeek={firstDayOfWeek}
             />
@@ -350,7 +350,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             checked={valueToDisplay}
             onText={strings.Yes}
             offText={strings.No}
-            onChange={(e, checkedvalue) => { this.onChange(checkedvalue); }}
+            onChange={(e, checkedvalue) => { this.onChange(checkedvalue, true); }}
             disabled={disabled}
           />
           {descriptionEl}
@@ -374,7 +374,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             showHiddenInUI={false}
             principalTypes={principalType === 'PeopleOnly' ? [PrincipalType.User] : [PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.DistributionList, PrincipalType.SecurityGroup]}
             resolveDelay={1000}
-            onChange={(items) => { this.onChange(items); }}
+            onChange={(items) => { this.onChange(items, true); }}
             disabled={disabled}
           />
           {descriptionEl}
@@ -398,7 +398,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
             showHiddenInUI={false}
             principalTypes={principalType === 'PeopleOnly' ? [PrincipalType.User] : [PrincipalType.User, PrincipalType.SharePointGroup, PrincipalType.DistributionList, PrincipalType.SecurityGroup]}
             resolveDelay={1000}
-            onChange={(items) => { this.onChange(items); }}
+            onChange={(items) => { this.onChange(items, true); }}
             disabled={disabled}
           />
           {descriptionEl}
@@ -498,7 +498,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
               anchorId={fieldAnchorId}
               panelTitle={strings.DynamicFormTermPanelTitle}
               context={context}
-              onChange={(newValue?: IPickerTerms) => { this.onChange(newValue); }}
+              onChange={(newValue?: IPickerTerms) => { this.onChange(newValue, true); }}
               isTermSetSelectable={false}
             />
           </div>
@@ -523,7 +523,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
               anchorId={fieldAnchorId}
               panelTitle={strings.DynamicFormTermPanelTitle}
               context={context}
-              onChange={(newValue?: IPickerTerms) => { this.onChange(newValue); }}
+              onChange={(newValue?: IPickerTerms) => { this.onChange(newValue, true); }}
               isTermSetSelectable={false} />
           </div>
           {descriptionEl}
@@ -577,18 +577,18 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
     });
 
     if (onChanged) {
-      onChanged(columnInternalName, currValue);
+      onChanged(columnInternalName, currValue, false);
     }
   }
 
-  private onChange = (value: any): void => { // eslint-disable-line @typescript-eslint/no-explicit-any
+  private onChange = (value: any, callValidation = false): void => { // eslint-disable-line @typescript-eslint/no-explicit-any
     const {
       onChanged,
       columnInternalName
     } = this.props;
 
     if (onChanged) {
-      onChanged(columnInternalName, value);
+      onChanged(columnInternalName, value, callValidation);
     }
     this.setState({
       changedValue: value
@@ -599,6 +599,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
     if (this.state.changedValue === null && this.props.defaultValue === "") {
       this.setState({ changedValue: "" });
     }
+    this.props.onChanged(this.props.columnInternalName, this.state.changedValue, true);
   }
 
   private getRequiredErrorText = (): string => {
@@ -683,7 +684,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
       }
 
       this.setState({ changedValue: selectedItemArr });
-      this.props.onChanged(this.props.columnInternalName, selectedItemArr);
+      this.props.onChanged(this.props.columnInternalName, selectedItemArr, true);
     } catch (error) {
       console.log(`Error MultiChoice_selection`, error);
     }
@@ -713,7 +714,7 @@ export class DynamicField extends React.Component<IDynamicFieldProps, IDynamicFi
         changedValue: newValue
       });
       if (onChanged) {
-        onChanged(columnInternalName, newValue, file);
+        onChanged(columnInternalName, newValue, true, file);
       }
     }
     catch (error) {

src/controls/dynamicForm/dynamicField/IDynamicFieldProps.ts

@@ -36,7 +36,7 @@ export interface IDynamicFieldProps {
   value?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
   /** Fired by DynamicField when a field value is changed */
-  onChanged?: (columnInternalName: string, newValue: any, additionalData?: FieldChangeAdditionalData) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
+  onChanged?: (columnInternalName: string, newValue: any, validate: boolean, additionalData?: FieldChangeAdditionalData) => void; // eslint-disable-line @typescript-eslint/no-explicit-any
 
   /** Represents the value of the field as updated by the user. Only updated by fields when changed. */
   newValue?: any; // eslint-disable-line @typescript-eslint/no-explicit-any