[Dynamic Form] Implement @class extensibility for DynamicForm and DynamicField, add onPreRender delegate.

[Ruslan-Urban]

Category

• Enhancement
• Bug
• Question

Version [ 3.17.0 ]

Expected / Desired Behavior / Question

IDynamicFormProps and IDynamicFieldProps should have property class that should be appended to the default class style in the render() method, if specified.

IDynamicFormProps needs to have an optional onPreRender(state: IDynamicFormState) delegate that is going to be called before render(). This will allow applying business logic (making fields required, disabled, hidden) and dynamic styles (via class value) to fields depending on current field values, query string parameters, session storage, etc. This may also negate the need for the disabledFields and hiddenFields properties.

Similarly, onRenderField(fieldProperties: IDynamicFieldProps): React.ReactElement<IDynamicFieldProps> delegate can replace the fieldOverrides. If the delegate returns a null value, default rendered shall be used.

Observed Behavior

Currently, it is difficult to implement dynamic behaviors and style to form controls without implementing a field renderer via fieldOverrides. For example, we simply need to set a default value and disable input control when a specific query string value is specified. It was super easy to implement with JSLink injection.

There is also a bug in the DynamicForm.module.scss @media style definitions for the .sectionFormField class. It appears that the larger the screen size is, the smaller field controls become which makes the unusable on 4K screens. For example, check the size of the rich text control in the Notes field.

This behavior is easier to replicate when bodySections formatter is defined as follows:

{
    "sections": [
        {
            "displayname": "",
            "fields": []
        }
    ]
}

[github-actions]

Thank you for submitting your first issue to this project.

[wuxiaojun514]

Hi, I also noticed the bad UI when dynamic form runs on custom formatting layout enabled list. It should show 3-4 columns in one row.
I plan to create a PR which introduce styles and className property on dynamic form to support customize the styling, like Component Styling mentioned