Dynamic Form. Possible to set the default value and disable some fields.

[Billiardist94]

Category

[ ] Enhancement

[ ] Bug

[x] Question

Version

Please specify what version of the library you are using: 3.18.0

Expected / Desired Behavior / Question

How can it possible to set default value for some field in Dynamic Form and disable this field so that this value is saved on the items after saved. And in the other fields I want to enter the value manually.

Now:

Expect: (For example, make First Name field disabled and set default value)

My Dynamic Form control.
<DynamicForm context={this.props.context} listId={this.props.selectedList} listItemId={this.props.context.itemId} onCancelled={() => { console.log('Cancelled') }} onBeforeSubmit={async (listItem) => { return false; }} onSubmitError={(listItem, error) => { alert(error.message); }} onSubmitted={async (listItemData) => { console.log(listItemData); }} />

Thanks!

[6gal6ler6]

You may use fieldOverrides.

[fheinicke]

You can use fieldOverrides to show the field with your custom default value and use onBeforeSubmit to actually set that default value in the item before saving.
For showing the field as disabled, either use disabledFields or set the field as disabled in the fieldOverrides.

const firstNameInternalFieldName = "FirstNameField";
const firstNameDefaultValue = "Test_FirstName";

return (
    <DynamicForm
        context={this.props.context}
        listId={this.props.selectedList}
        listItemId={this.props.context.itemId}
        onCancelled={() => { console.log('Cancelled') }} 
        onSubmitError={(listItem, error) => { alert(error.message); }} 
        onSubmitted={async (listItemData) => { console.log(listItemData); }}

        onBeforeSubmit={async (listItem) => { 
            // Set field value in item before saving
            listItem[firstNameInternalFieldName] = firstNameDefaultValue;

            return false;
        }} 

        // Disable the field (alternative to setting the disabled prop in the field override)
        //// disabledFields={[firstNameInternalFieldName]}

        fieldOverrides={{
            // Override for the custom field. Simply pass all received props and override specific ones (like disabled and defaultValue)
            [firstNameInternalFieldName]: (props: IDynamicFieldProps) => (
                <DynamicField key="firstname" {...props} disabled defaultValue={firstNameDefaultValue} />
            ),
        }}
    />
)

[6gal6ler6]

You can use fieldOverrides to show the field with your custom default value and use onBeforeSubmit to actually set that default value in the item before saving. For showing the field as disabled, either use disabledFields or set the field as disabled in the fieldOverrides.

const firstNameInternalFieldName = "FirstNameField";
const firstNameDefaultValue = "Test_FirstName";

return (
    <DynamicForm
        context={this.props.context}
        listId={this.props.selectedList}
        listItemId={this.props.context.itemId}
        onCancelled={() => { console.log('Cancelled') }} 
        onSubmitError={(listItem, error) => { alert(error.message); }} 
        onSubmitted={async (listItemData) => { console.log(listItemData); }}

        onBeforeSubmit={async (listItem) => { 
            // Set field value in item before saving
            listItem[firstNameInternalFieldName] = firstNameDefaultValue;

            return false;
        }} 

        // Disable the field (alternative to setting the disabled prop in the field override)
        //// disabledFields={[firstNameInternalFieldName]}

        fieldOverrides={{
            // Override for the custom field. Simply pass all received props and override specific ones (like disabled and defaultValue)
            [firstNameInternalFieldName]: (props: IDynamicFieldProps) => (
                <DynamicField key="firstname" {...props} disabled defaultValue={firstNameDefaultValue} />
            ),
        }}
    />
)

This is beautiful 💕. Have you tested it?