Dynamic Form: add children to override field rendering

[bjdekker]

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.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions]

Thank you for submitting your first issue to this project.

[AJIXuMuK]

Thank you @bjdekker for the suggestion!
Would you be able to create a PR for that new feature?

[bjdekker]

Thank you @AJIXuMuK, I try to find some time the coming days to implement this and will create a pul request then

[IRRDC]

This looks like it could be used to hide disabled fields. Looking forward to see it in the next version :-)

[IRRDC]

@bjdekker I gave it a test and used it to completely hide some fields or alternatively to display them as disabled with a default value that I than add to the data in onBeforeSubmit. Which works fine (had to have a look at the code to see that I have to set newValue to get required fields to work and skip setting values in onBeforeSubmit). Could do with a nice docu and examples ;-)

[martinlingstuyl]

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

[bjdekker]

@IRRDC thanks for checking it out! I will take a look at providing some kind of documentation!

[rakeshrelan118]

@AJIXuMuK, Can you please share example for the usage

[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.