Merge pull request #1259 from bjdekker/feat-dynamic-form-children

Added the possibility to override field rendering for individual field

Author: AJIXuMuK

src/controls/dynamicForm/DynamicForm.tsx

@@ -68,11 +68,18 @@ export class DynamicForm extends React.Component<IDynamicFormProps, IDynamicForm
       fieldCollection,
       isSaving
     } = this.state;
+    
+    const fieldOverrides = this.props.fieldOverrides;
+    
     return (
       <div>
         {fieldCollection.length === 0 ? <div><ProgressIndicator label={strings.DynamicFormLoading} description={strings.DynamicFormPleaseWait} /></div> :
           <div>
             {fieldCollection.map((v, i) => {
+              if(fieldOverrides?.hasOwnProperty(v.columnInternalName)) {
+                v.disabled = v.disabled || isSaving;
+                return fieldOverrides[v.columnInternalName](v);
+              }
               return <DynamicField {...v} disabled={v.disabled || isSaving} />;
             })}
             {

src/controls/dynamicForm/IDynamicFormProps.ts

@@ -1,5 +1,7 @@
 import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { IItem } from '@pnp/sp/items';
+import React from 'react';
+import { IDynamicFieldProps } from './dynamicField';
 
 export interface IDynamicFormProps {
   /**
@@ -40,6 +42,10 @@ export interface IDynamicFormProps {
    */
   contentTypeId?: string;
 
+  /**
+   * Key value pair for fields you want to override.  Key is the internal field name, value is the function to be called for the custom element to render
+   */
+  fieldOverrides?: {[columnInternalName: string] : {(fieldProperties: IDynamicFieldProps): React.ReactElement<IDynamicFieldProps>}};
   /**
    * Specifies if onSubmitted event should pass PnPJS list item (IItem) as a second parameter. Default - true
    */