[Feature Requests] Dynamic Form - More customization options

[Fringie]

Category

[X] Enhancement

[ ] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

More customization options:

1. Custom sort order It'd be nice if we could define the order each field is sorted in. It often makes sense to get users to fill in certain fields at the same time, so it should be a UX improvement.
2. Ability to add additional fields Currently, we have the ability to override custom fields which is really amazing. But we don't have the ability to add new fields that don't exist on the list itself. The main reason I'm asking for this is because I'm trying to add custom actions i.e. the user fills in a few fields then presses a button to trigger automation and so on.

The main benefits of the above two requests are to be able to layout the form in a way that can do complex actions in a seamless way.

[ghost]

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

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[t0mgerman]

Hi @Fringie

Regarding request 1:

This isn't live yet because it still needs some time in testing (I've been working with the dev build myself and have identified a couple of things that need fixing just this week) - but if you take a look at the latest code in dev branch, there are some updates to Dynamic Form that allow the form to use any custom formatting that has been applied to the out-of-the-box sharepoint lists/forms. This includes the ability to put columns in to discrete sections or in to a specific order.

For example, you can create a custom body layout by going to your New Form (or new form for a specific content type) then using the options in the top-right area of the form to "Configure Layout"

When you enable the useCustomFormatting prop on Dynamic Form, it will attempt to use this formatting. https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/controls/dynamicForm/IDynamicFormProps.ts#L84

A caveat here is that you should observe how SharePoint works out of the box. I tried to copy the same behaviour in the implementation for DynamicForm. If you specify an array of columns for a section, in a custom order, and omit all of the other columns - those omitted columns will be appended to the end of the form in a 'final' section. To avoid this you would create a content type that has only the columns you want, then ensure you pass that content type's ContentTypeId to dynamic form.

As I say, this is still just in the dev branch at the moment - and I'm going to raise a PR to fix a couple of things I've found - but I think this might satisfy your requirement for point 1?

Regarding request 2 - adding additional functionality / fields that don't exist on the form:

I think you could potentially achieve that with a fieldOverride that just adds extra UI - but you'd need to hook in to other code outside of the DynamicForm control itself to trigger the behaviour you're talking about - perhaps by wrapping it in another component. Accessing the live form values would be a little bit tricky, as the fieldOverride function signature only really gives you the values for a single field. If a future version of DynamicForm exposed a public property or method for getting the current values in state, that might be useful for the kind of functionality you describe. You might be able to use DynamicForm's lifecycle methods to achieve certain things too (onBeforeSubmit etc).

If you're here working in SPFX, this probably isn't what you want to do - but if I had this sort of requirement I would also consider whether the functionality I wanted could be achieved in a Power Apps form or app.

Another possibility might be to use custom formatting on list views. In SharePoint OOTB you can provide formatting to your views/columns and create "elmType" objects (HTML elements) that have actions. These can commence Manual Trigger workflows and things like that. If you followed the guidance on this, it would be on the views rather than the List form(s), but it might be worth looking in to: https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-advanced#create-a-button-to-launch-a-flow

The syntax List View / Column formatting is very similar to the formatting options available for Form Headers and Footers - but I can't see any guidance implying that elements with 'actions' also work from within forms themselves. If SharePoint CAN do something like that OOTB, the custom formatting implementation I added to this repo for Dynamic Form definitely won't support it in it's current state... it can add HTML elements with attributes and things to the header and footer just fine, but DynamicForm isn't really wired in to any external services or out of the box code that would allow us to trigger an automation with that alone. You could probably trigger things with a fetch request to a flow accepting that kind of trigger, there might be many ways to skin a cat here that don't necessitate changes to the Controls in this library - but I'd be curious to hear more about your use-case so others can consider and discuss.

If you're interested in the custom formatting implementation that's currently on the dev branch, it's here: https://github.com/pnp/sp-dev-fx-controls-react/blob/dev/src/common/utilities/CustomFormatting.ts