Dynamic Form: add children to override field rendering

Category

[x] Enhancement [ ] Bug [ ] Question

Version

Please specify what version of the library you are using: [3.8.1]

Expected / Desired Behavior / Question

Currently, the DynamicForm does not allow for overriding individual fields. So you get the form as is. If you want one field to behave differently, you have to write the entire form yourself. I would like to suggest that you can add children to the DynamicForm for the fields that you want to render yourself. Let’s say you have a list with three fields: Title, SomeTextField and SomeOtherField and you want to do custom rendering for SomeOtherField, the you could put in a DynamicForm like this:

<DynamicForm 
          context={this.props.context} 
          listId={"3071c058-549f-461d-9d73-8b9a52049a80"}  
          listItemId={1}
          onCancelled={() => { console.log('Cancelled') }}
          onBeforeSubmit={async (listItem) => { return true; }}
          onSubmitError={(listItem, error) => { alert(error.message); }}
          onSubmitted={async (listItemData) => { console.log(listItemData); }}>
          <SomeCustomFieldComponent internalFieldName="SomeOtherField" /> //Other Properties can be added as well
</DynamicForm>

In the render function of the DynamicForm, you can check in the map whether the children of the component contains a child with the specified internalFieldName, if so, that child (in this case SomeCustomFieldComponent) is rendered, if not, nothing changes and the DynamicField is rendered. This need to be worked out in more detail, but I’d be happy to check if this can be implemented properly and to submit a pull request for this.

[martinlingstuyl]

Hi @rakeshrelan118 , @bjdekker has planned to create an example blog on this.

Basically it can be set up as follows:

const fieldOverrides = {
  "FieldInternalName1": (fieldProperties: IDynamicFieldProps) => <>some-ui</>,
  "FieldInternalName2": (fieldProperties: IDynamicFieldProps) => <>some-ui</>
};

<DynamicForm 
  listId={someListId}
  webAbsoluteUrl={someSiteUrl} 
  context={spfxContext} 
  fieldOverrides={fieldOverrides}
/>

I believe you can use the fieldProperties to update the value of the field that should be submitted.

[martinlingstuyl]

Great idea @bjdekker, can’t wait to try this out somewhere.