Introduction - Forms

This is a wrapper for the React Hook Forms Library.

We are using Yup Library for Validation.

It exports RenderField and RenderForm Components and the types for the typescript support.

RenderForm

This Component Generates the Form from the Object. It uses the Form Component from UI5 Web Components for React Library.

It has the following Properties and Methods

metaData - The meta Information for the Form. we can create this object by the createFormMetaData function.

onSubmit - Submit Handler Function. Receives the form data as argument.

validationSchema [optional] - Expects validation Schema from yup Library.

editMode [optional] - Boolean value to enable Edit Mode.

editModeContent [optional] - Expects Edit mode Form Data.

onCancel [optional] - onClick Cancel Button in the Toolbar.

hideToolbar [optional] - Hide the Toolbar inside the RenderForm Component. Default value is false

tip

By creating the ref Object, we can handle the Form submission and reset method from Parent Component.

submitButtonText [optional] Submit Button Text in Toolbar. Default Create and Update on Editmode

RenderField

This Component Render Individual Field. It should be wrapped by the FormProvider component from React Hook Form Library. It has the following Properties.

fieldType - Expects string value for the type of Form Element.

fieldProps - Expects object contains fieldName.

<RenderField fieldtype='input' fieldProps={{ fieldName: "firstname" }} />