Skip to content

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

Closed
@Ruslan-Urban

Description

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

image

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    status:working-on-itKnown issue / feature being addressed. Will use other "status:*" labels & comments for more detail.type:enhancementNew feature or enhancement of existing capability

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions