DynamicForm

This component provides a dynamic form component Developer can pass a json structure and it will create a form component

Installation

import { DynamicForm } from 'uxp/components';

Signature

const DynamicForm: React.ForwardRefExoticComponent<React.RefAttributes<DynamicFormHandlers> & DynamicFormProps>

Properties

Name
Type
Mandatory
Default Value
Example Value

formStructure

Yes

-

-

beforeSubmit

(data: IFormData) => Promise

No

-

-

onSubmit

(data: IFormData) => Promise

Yes

-

-

onCancel

() => void

No

-

-

submitButtonLabel

string

No

-

-

submitButtonLoadingLabel

string

No

-

-

submitButtonIcon

string

No

-

-

cancelButtonLabel

string

No

-

-

cancelButtonIcon

string

No

-

-

hideCancelButton

boolean

No

-

-

hideButtons

boolean

No

-

-

isLoading

boolean

No

-

-

formContainerStyles

React.CSSProperties

No

-

-

renderOptions

{ renderStyle: 'standard' | 'tabs' | 'wizard', direction?: 'vertical' | 'horizontal' // only applicable to tabs and wizard tabBackgroundColor?: string, tabTextColor?: string, activeTabBackgroundColor?: string, activeTabTextColor?: string, errorTabBackgroundColor?: string, errorTabTextColor?: string, disabledTabBackgroundColor?: string, disabledTabTextColor?: string, previousButtonLabel?: string, nextButtonLabel?: string }

No

-

-

Ref Handlers

Available methods through ref:

Method
Type
Description

submit

() => Promise

-

cancel

() => void

-

validate

() => Promise

-

getFormData

() => IFormData

-

setFormData

(data: IFormData) => void

-

getErrors

() => Record<string, string>

-

clearErrors

() => void

-

setErrors

(errors: Record<string, string>) => void

-

clearFieldError

(fieldName: string | string[]) => void

-

isProcessing

() => boolean

-

goToNext

() => void

-

goToPrevious

() => void

-

Last updated