Implemented Custom Formatting for Dynamic Form body

Tom German · Tom German · commit f02dbb818976 · 2023-10-03T05:13:22.000+01:00
diff --git a/src/controls/dynamicForm/DynamicForm.module.scss b/src/controls/dynamicForm/DynamicForm.module.scss
@@ -147,3 +147,46 @@
     }
   }
 }
+
+h2.sectionTitle {
+	color: #000000;
+    font-weight: 600;
+    font-size: 16px;
+    margin-top: 6px;
+    margin-bottom: 12px;
+    clear: both;
+}
+.sectionFormFields {
+	display: flex;
+    flex-wrap: wrap;
+}
+.sectionFormField {
+	@media (max-width: 1920px) {
+		min-width: 244px;
+		max-width: 244px;
+	}
+	@media (max-width: 1366px) {
+		min-width: 248px;
+    	max-width: 248px;
+		margin-right: 44px;
+	}
+	@media (max-width: 1024px) {
+		min-width: 272px;
+    	max-width: 272px;
+	}
+	@media (max-width: 640px) {
+		min-width: 432px;
+    	max-width: 432px;
+	}
+	@media (max-width: 480px) {
+		width: 90%;
+	}
+}
+.sectionLine {
+	width: 100%;
+    border-top: 1px solid #edebe9;
+    border-bottom-width: 0;
+    border-left-width: 0;
+    border-right-width: 0;
+    clear: both;
+}
diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx
@@ -33,6 +33,7 @@ import "@pnp/sp/content-types";
 import "@pnp/sp/folders";
 import "@pnp/sp/items";
 import { sp } from "@pnp/sp";
+import { ICustomFormatting, ICustomFormattingBodySection } from "./ICustomFormatting";
 
 const stackTokens: IStackTokens = { childrenGap: 20 };
 
@@ -102,9 +103,17 @@ export class DynamicForm extends React.Component<
    * Default React component render method
    */
   public render(): JSX.Element {
-    const { fieldCollection, hiddenByFormula, isSaving, validationErrors } = this.state;
+    const { customFormatting, fieldCollection, isSaving } = this.state;
 
-    const fieldOverrides = this.props.fieldOverrides;
+    const bodySections = customFormatting?.body || [];
+    if (bodySections.length > 0) {
+      const specifiedFields: string[] = bodySections.reduce((prev, cur) => {
+        prev.push(...cur.fields);
+        return prev;
+      }, []);
+      const omittedFields = fieldCollection.filter(f => !specifiedFields.includes(f.columnInternalName)).map(f => f.columnInternalName);
+      bodySections[bodySections.length - 1].fields.push(...omittedFields);
+    }
 
     return (
       <div>
@@ -117,33 +126,20 @@ export class DynamicForm extends React.Component<
           </div>
         ) : (
           <div>
-            {fieldCollection.map((v, i) => {
-              if (hiddenByFormula.find(h => h === v.columnInternalName)) {
-                return null;
-              }
-              let validationErrorMessage: string = "";
-              if (validationErrors[v.columnInternalName]) {
-                validationErrorMessage = validationErrors[v.columnInternalName];
-              }
-              if (
-                fieldOverrides &&
-                Object.prototype.hasOwnProperty.call(
-                  fieldOverrides,
-                  v.columnInternalName
-                )
-              ) {
-                v.disabled = v.disabled || isSaving;
-                return fieldOverrides[v.columnInternalName](v);
-              }
-              return (
-                <DynamicField
-                  key={v.columnInternalName}
-                  {...v}
-                  disabled={v.disabled || isSaving}
-                  validationErrorMessage={validationErrorMessage}
-                />
-              );
-            })}
+            {bodySections.length > 0 && bodySections.map((section, i) => (
+              <>
+                <h2 className={styles.sectionTitle}>{section.displayname}</h2>
+                <div className={styles.sectionFormFields}>
+                  {section.fields.map((f, i) => (
+                    <div key={f} className={styles.sectionFormField}>
+                      { this.renderField(fieldCollection.find(fc => fc.columnInternalName === f) as IDynamicFieldProps)}
+                    </div>
+                  ))}
+                </div>
+                { i < bodySections.length - 1 && <hr className={styles.sectionLine} aria-hidden={true} />}
+              </>
+            ))}
+            {bodySections.length === 0 && fieldCollection.map((f, i) => this.renderField(f))}
             {!this.props.disabled && (
               <Stack className={styles.buttons} horizontal tokens={stackTokens}>
                 <PrimaryButton
@@ -189,6 +185,36 @@ export class DynamicForm extends React.Component<
     );
   }
 
+  private renderField = (field: IDynamicFieldProps): JSX.Element => {
+    const { fieldOverrides } = this.props;
+    const { hiddenByFormula, isSaving, validationErrors } = this.state;
+    if (hiddenByFormula.find(h => h === field.columnInternalName)) {
+      return null;
+    }
+    let validationErrorMessage: string = "";
+    if (validationErrors[field.columnInternalName]) {
+      validationErrorMessage = validationErrors[field.columnInternalName];
+    }
+    if (
+      fieldOverrides &&
+      Object.prototype.hasOwnProperty.call(
+        fieldOverrides,
+        field.columnInternalName
+      )
+    ) {
+      field.disabled = field.disabled || isSaving;
+      return fieldOverrides[field.columnInternalName](field);
+    }
+    return (
+      <DynamicField
+        key={field.columnInternalName}
+        {...field}
+        disabled={field.disabled || isSaving}
+        validationErrorMessage={validationErrorMessage}
+      />
+    );
+  }
+
   //trigger when the user submits the form.
   private onSubmitClick = async (): Promise<void> => {
     const {
@@ -570,10 +596,16 @@ export class DynamicForm extends React.Component<
     let contentTypeId = this.props.contentTypeId;
     let contentTypeName: string;
     try {
+      
+      // Fetch form rendering information from SharePoint
       const listInfo = await this._spService.getListFormRenderInfo(listId);
+      
+      // Fetch additional information about fields from SharePoint
+      // (Number fields for min and max values, and fields with validation)
       const additionalInfo = await this._spService.getAdditionalListFormFieldInfo(listId);
-
       const numberFields = additionalInfo.filter((f) => f.TypeAsString === "Number" || f.TypeAsString === "Currency");
+
+      // Build a dictionary of validation formulas and messages
       const validationFormulas: Record<string, Pick<ISPField,"ValidationFormula"|"ValidationMessage">> = additionalInfo.reduce((prev, cur) => {
         if (!prev[cur.InternalName] && cur.ValidationFormula) {
           prev[cur.InternalName] = {
@@ -584,26 +616,15 @@ export class DynamicForm extends React.Component<
         return prev;
       }, {});
 
-      const spList = sp.web.lists.getById(listId);
-      let item = null;
-      let etag: string | undefined = undefined;
-      if (listItemId !== undefined && listItemId !== null && listItemId !== 0) {
-        item = await spList.items.getById(listItemId).get();
-
-        if (onListItemLoaded) {
-          await onListItemLoaded(item);
-        }
-
-        if (respectETag !== false) {
-          etag = item["odata.etag"];
-        }
-      }
-
+      // If no content type ID is provided, use the default (first one in the list)
       if (contentTypeId === undefined || contentTypeId === "") {
         contentTypeId = Object.keys(listInfo.ContentTypeIdToNameMap)[0];
       }
       contentTypeName = listInfo.ContentTypeIdToNameMap[contentTypeId];
 
+      // Build a dictionary of client validation formulas and messages
+      // These are formulas that are added in Edit Form > Edit Columns > Edit Conditional Formula
+      // They are evaluated on the client side, and determine whether a field should be hidden or shown
       const clientValidationFormulas = listInfo.ClientForms.Edit[contentTypeName].reduce((prev, cur) => {
         if (cur.ClientValidationFormula) {
           prev[cur.InternalName] = {
@@ -614,6 +635,30 @@ export class DynamicForm extends React.Component<
         return prev;
       }, {} as Record<string, Pick<ISPField, "ValidationFormula" | "ValidationMessage">>);
 
+      // Custom Formatting
+      let bodySections: ICustomFormattingBodySection[];
+      if (listInfo.ClientFormCustomFormatter && listInfo.ClientFormCustomFormatter[contentTypeId]) {
+        const customFormatInfo = JSON.parse(listInfo.ClientFormCustomFormatter[contentTypeId]) as ICustomFormatting;
+        bodySections = customFormatInfo.bodyJSONFormatter.sections;
+      }
+
+      // Load SharePoint list item
+      const spList = sp.web.lists.getById(listId);
+      let item = null;
+      let etag: string | undefined = undefined;
+      if (listItemId !== undefined && listItemId !== null && listItemId !== 0) {
+        item = await spList.items.getById(listItemId).get();
+
+        if (onListItemLoaded) {
+          await onListItemLoaded(item);
+        }
+
+        if (respectETag !== false) {
+          etag = item["odata.etag"];
+        }
+      }
+
+      // Build the field collection
       const tempFields: IDynamicFieldProps[] = [];
       let order: number = 0;
       const hiddenFields =
@@ -817,7 +862,10 @@ export class DynamicForm extends React.Component<
         clientValidationFormulas,
         fieldCollection: tempFields, 
         validationFormulas,
-        etag 
+        etag,
+        customFormatting: {
+          body: bodySections,
+        }
       }, () => this.performValidation(true));
       
     } catch (error) {
diff --git a/src/controls/dynamicForm/ICustomFormatting.ts b/src/controls/dynamicForm/ICustomFormatting.ts
@@ -0,0 +1,20 @@
+import { CSSProperties } from "react";
+
+interface ICustomFormattingNode {
+    elmType: keyof HTMLElementTagNameMap;
+    style: CSSProperties;
+    children?: ICustomFormattingNode[];
+}
+
+export interface ICustomFormattingBodySection {
+    displayname: string;
+    fields: string[];
+}
+
+export interface ICustomFormatting {
+    headerJSONFormatter: ICustomFormattingNode;
+    bodyJSONFormatter: {
+        sections: ICustomFormattingBodySection[];
+    }; 
+    footerJSONFormatter: ICustomFormattingNode;
+}
diff --git a/src/controls/dynamicForm/IDynamicFormState.ts b/src/controls/dynamicForm/IDynamicFormState.ts
@@ -1,5 +1,6 @@
 
 import { ISPField } from '../../common/SPEntities';
+import { ICustomFormattingBodySection } from './ICustomFormatting';
 import { IDynamicFieldProps } from './dynamicField/IDynamicFieldProps';
 export interface IDynamicFormState {
   fieldCollection: IDynamicFieldProps[];
@@ -11,6 +12,9 @@ export interface IDynamicFormState {
   hiddenByFormula: string[];
   /** Populated by evaluation of List Column Setting validation. Key is internal field name, value is the configured error message. */
   validationErrors: Record<string, string>;
+  customFormatting?: {
+    body: ICustomFormattingBodySection[];
+  }
   isSaving?: boolean;
   etag?: string;
   isValidationErrorDialogOpen: boolean;
