DynamicForm - Custom sorting (#1802)

* field custom sorting

* sorting in mount/update + documentation

---------

Co-authored-by: matteo <>

docs/documentation/docs/controls/DynamicForm.md

@@ -50,6 +50,7 @@ The `DynamicForm` can be configured with the following properties:
 | disabled | boolean | no | Allows form to be disabled. Default value is `false`|
 | disabledFields | string[] | no | InternalName of fields that should be disabled. Default value is `false`|
 | enableFileSelection | boolean | no | Specify if the form should support the creation of a new list item in a document library attaching a file to it. This option is only available for document libraries and works only when the contentTypeId is specified and has a base type of type Document. Default value is `false`|
+| fieldOrder | string[] | no | List of fields internal names. Specifies fields custom sorting. |
 | hiddenFields | string[] | no | InternalName of fields that should be hidden. Default value is `false`|
 | onListItemLoaded | (listItemData: any) => Promise<void> | no | List item loaded handler. Allows to access list item information after it's loaded.|
 | onBeforeSubmit | (listItemData: any) => Promise<boolean> | no | Before submit handler. Allows to modify the object to be submitted or cancel the submission. To cancel, return `true`.|

src/controls/dynamicForm/DynamicForm.tsx

@@ -263,6 +263,25 @@ export class DynamicForm extends React.Component<
     );
   }
 
+  private sortFields = (fields: IDynamicFieldProps[], customSort: string[]): IDynamicFieldProps[] => {
+    const fMap = new Map<string, IDynamicFieldProps>();
+
+    for (const field of fields) {
+      fMap.set(field.columnInternalName.toLowerCase(), field);
+    }
+
+    const sortedFields = customSort
+    .map((sortColumn) => sortColumn.toLowerCase())
+    .filter((normalizedSortColumn) => fMap.has(normalizedSortColumn))
+    .map((normalizedSortColumn) => fMap.get(normalizedSortColumn))
+    .filter((field) => field !== undefined);
+
+    const remainingFields = fields.filter((field) => !sortedFields.includes(field));
+    const uniqueRemainingFields = Array.from(new Set(remainingFields));
+
+    return [...sortedFields, ...uniqueRemainingFields];
+}
+
   private renderField = (field: IDynamicFieldProps): JSX.Element => {
     const { fieldOverrides } = this.props;
     const { hiddenByFormula, isSaving, validationErrors } = this.state;
@@ -996,6 +1015,10 @@ export class DynamicForm extends React.Component<
         customIcons
       );
 
+      const sortedFields = this.props.fieldOrder?.length > 0
+        ? this.sortFields(tempFields, this.props.fieldOrder)
+        : tempFields;
+
       // Get installed languages for Currency fields
       let installedLanguages: IInstalledLanguageInfo[];
       if (tempFields.filter(f => f.fieldType === "Currency").length > 0) {
@@ -1011,7 +1034,7 @@ export class DynamicForm extends React.Component<
           footer: footerJSON
         },
         etag,
-        fieldCollection: tempFields,
+        fieldCollection: sortedFields,
         installedLanguages,
         validationFormulas
       }, () => this.performValidation(true));

src/controls/dynamicForm/IDynamicFormProps.ts

@@ -126,4 +126,11 @@ export interface IDynamicFormProps {
    * The key is the field internal name and the value is the Fluent UI icon name.
    */
   customIcons?: { [columnInternalName: string]: string };
+
+  /**
+   * Specify fields custom sorting.
+   * The value is the field internal name.
+   */
+  fieldOrder?: string[]
+
 }