@solidstarters/solid-core-ui 1.1.10 → 1.1.12

package/src/components/core/form/SolidFormView.tsx

@@ -141,7 +141,7 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
         solidFormViewMetaData: solidFormViewMetaData,
         modelName: modelName,
     }
-    const solidField = fieldFactory(fieldMetadata.type, fieldContext);
+    const solidField = fieldFactory(fieldMetadata?.type, fieldContext);
 
     return solidField?.render(formik);
 };
@@ -151,6 +151,10 @@ const SolidGroup = ({ children, attrs }: any) => {
     const className = attrs.className;
 
     return (
+        <div className={className}>
+            {attrs.label && <p>{attrs.label}</p>}
+            <div className="grid">{children}</div>
+        </div>
         // <div className={className}>
         //     <div className="s_group">
         //         <fieldset>
@@ -160,9 +164,9 @@ const SolidGroup = ({ children, attrs }: any) => {
         //     </div>
 
         // </div>
-        <div className="formgrid grid">
-            {children}
-        </div>
+        // <div className="formgrid grid">
+        //     {children}
+        // </div>
     );
 };
 
@@ -181,7 +185,11 @@ const SolidRow = ({ children, attrs }: any) => {
         //     </div>
 
         // </div>
-        <div>{children}</div>
+        <div className={`row ${className}`}>
+            {attrs.label && <p >{attrs.label}</p>}
+            <div className="grid">{children}</div>
+        </div>
+        // <div>{children}</div>
     );
 };
 const SolidColumn = ({ children, attrs }: any) => {
@@ -197,31 +205,36 @@ const SolidColumn = ({ children, attrs }: any) => {
         //     </div>
 
         // </div>
-        <div className="formgrid grid">
-            {children}
+        <div className={`${className}`}>
+            {attrs.label && <p>{attrs.label}</p>}
+            <div className="grid">{children}</div>
         </div>
+        // <div className="formgrid grid">
+        //     {children}
+        // </div>
     );
 };
 
 const SolidSheet = ({ children }: any) => (
-
-    <div>
+    <div className="p-fluid p-grid">
         {children}
     </div>
 );
 const SolidNotebook = ({ children }: any) => {
 
     return (
-        <TabView>
-            {children}
-        </TabView>
+        <div className="solid-tab-view w-full">
+            <TabView>
+                {children}
+            </TabView>
+        </div>
     )
 };
 
 
 const SolidPage = ({ attrs, children, key }: any) => (
     <TabPanel key={key} header={attrs.label} >
-        <div>{children}</div>
+        <div className="p-fluid">{children}</div>
     </TabPanel>
 );
 
@@ -281,6 +294,8 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
     const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
 
+    const errorFields: string[] = [];
+
     const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
     useEffect(() => {
 
@@ -456,7 +471,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     modelName: params.modelName,
                 }
 
-                let solidField = fieldFactory(fieldMetadata.type, fieldContext);
+                let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
 
                 // Append each field to the FormData
                 if (value !== undefined && value !== null && solidField) {
@@ -480,6 +495,26 @@ const SolidFormView = (params: SolidFormViewProps) => {
         }
     }
 
+    const showFieldError = () => {
+        if (errorFields.length === 0) return;
+        errorFields.forEach((error) => {
+            toast?.current?.show({
+                severity: "error",
+                summary: "Metadata Error",
+                detail: error,
+                life: 3000,
+            });
+
+        });
+
+        // errorFields.length = 0;
+    };
+    useEffect(() => {
+        if (errorFields.length > 0) {
+            showFieldError();
+        }
+    }, [errorFields])
+
     // - - - - - - - - - - - -- - - - - - - - - - - - DATA here
     // Fetch the actual data here. 
     // This is the initial value of this form, will come from an API call in the case of edit. 
@@ -493,10 +528,10 @@ const SolidFormView = (params: SolidFormViewProps) => {
         for (let i = 0; i < layoutFields.length; i++) {
             const formLayoutField = layoutFields[i];
             const fieldMetadata = solidFieldsMetadata[formLayoutField.attrs.name];
-            if (fieldMetadata.type === 'relation') {
+            if (fieldMetadata?.type === 'relation') {
                 toPopulate.push(fieldMetadata.name);
             }
-            if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.type === 'mediaMultiple') {
+            if (fieldMetadata?.type === 'mediaSingle' || fieldMetadata?.type === 'mediaMultiple') {
                 toPopulateMedia.push(fieldMetadata.name);
             }
         }
@@ -550,7 +585,13 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 solidFormViewMetaData: solidFormViewMetaData,
                 modelName: params.modelName,
             }
-            let solidField = fieldFactory(fieldMetadata.type, fieldContext);
+            let solidField = fieldFactory(fieldMetadata?.type, fieldContext);
+            if (!fieldMetadata?.type) {
+                const errorMessage = formLayoutField.attrs.label;
+                if (!errorFields.includes(errorMessage)) {
+                    errorFields.push(errorMessage);
+                }
+            }
             if (solidField) {
                 // @ts-ignore
                 validationSchema[formLayoutField.attrs.name] = solidField.validationSchema();
@@ -651,7 +692,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
             <div className="solid-form-wrapper">
                 <Toast ref={toast} />
 
-                <form onSubmit={formik.handleSubmit}>
+                <form style={{ width: '77.5%', borderRight: '1px solid var(--primary-light-color' }} onSubmit={formik.handleSubmit}>
                     <div className="solid-form-header">
                         {params.id === "new" ? (
                             <>
@@ -807,13 +848,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         <SolidFormStepper />
                     </div>
                     <div className="p-4 solid-form-content">
-                        <div className="grid">
-                            <div className="col-8 mx-auto">
-                                {renderFormDynamically(formViewMetaData)}
-                            </div>
-                        </div>
+                        {renderFormDynamically(formViewMetaData)}
                     </div>
-                </form >
+                </form>
+                <div style={{ width: '22.5%' }}>
+                </div>
                 <Dialog
                     visible={isDeleteDialogVisible}
                     header="Confirm Delete"
@@ -828,7 +867,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 >
                     <p>Are you sure you want to delete?</p>
                 </Dialog>
-            </div >
+            </div>
         );
 
     }

package/src/components/core/form/fields/SolidBooleanField.tsx

@@ -23,7 +23,12 @@ export class SolidBooleanField implements ISolidField {
     }
 
     initialValue(): any {
-        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
     validationSchema(): Schema {
@@ -59,7 +64,7 @@ export class SolidBooleanField implements ISolidField {
 
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const booleanOptions = ["false", "true"];
@@ -77,6 +82,7 @@ export class SolidBooleanField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
@@ -100,9 +106,10 @@ export class SolidBooleanField implements ISolidField {
                         })}
 
                     />
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
+                </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/SolidDateField.tsx

@@ -22,7 +22,12 @@ export class SolidDateField implements ISolidField {
     }
 
     initialValue(): any {
-        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
     validationSchema(): Schema {
@@ -41,7 +46,7 @@ export class SolidDateField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -56,8 +61,8 @@ export class SolidDateField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
                     <Calendar
@@ -74,7 +79,7 @@ export class SolidDateField implements ISolidField {
                         hideOnDateTimeSelect
                         className=""
                     />
-
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidDateTimeField.tsx

@@ -22,7 +22,12 @@ export class SolidDateTimeField implements ISolidField {
     }
 
     initialValue(): any {
-        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
     validationSchema(): Schema {
@@ -41,7 +46,7 @@ export class SolidDateTimeField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
@@ -54,26 +59,27 @@ export class SolidDateTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <Calendar
-                    disabled={formDisabled || fieldDisabled}
-                    ref={calendarRef} // Attach ref to Calendar
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    //@ts-ignore
-                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                    // dateFormat="mm/dd/yy"
-                    // placeholder="mm/dd/yyyy hh:mm"
-                    mask="99/99/9999 99:99"
-                    hideOnDateTimeSelect
-                    showTime className=""
-                    hourFormat="24"
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <Calendar
+                        disabled={formDisabled || fieldDisabled}
+                        ref={calendarRef} // Attach ref to Calendar
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        //@ts-ignore
+                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                        // dateFormat="mm/dd/yy"
+                        // placeholder="mm/dd/yyyy hh:mm"
+                        mask="99/99/9999 99:99"
+                        hideOnDateTimeSelect
+                        showTime className=""
+                        hourFormat="24"
 
-                />
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidDecimalField.tsx

@@ -21,7 +21,12 @@ export class SolidDecimalField implements ISolidField {
     }
 
     initialValue(): any {
-        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
     validationSchema(): Schema {
@@ -43,7 +48,7 @@ export class SolidDecimalField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -58,6 +63,7 @@ export class SolidDecimalField implements ISolidField {
 
         return (
             <div className={className}>
+                <div className="flex flex-column gap-2 mt-4">
                     <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
@@ -75,6 +81,7 @@ export class SolidDecimalField implements ISolidField {
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     )}
+                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidIntegerField.tsx

@@ -21,7 +21,12 @@ export class SolidIntegerField implements ISolidField {
     }
 
     initialValue(): any {
-        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
     validationSchema(): Schema {
@@ -44,7 +49,7 @@ export class SolidIntegerField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -59,19 +64,21 @@ export class SolidIntegerField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <InputNumber
-                    readOnly={formReadonly || fieldReadonly}
-                    disabled={formDisabled || fieldDisabled}
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={(e: any) => {
-                        formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
-                    }}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                />
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <InputNumber
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={(e: any) => {
+                            formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                        }}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidJsonField.tsx

@@ -43,7 +43,7 @@ export class SolidJsonField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -55,18 +55,20 @@ export class SolidJsonField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                </label>
-                <CodeEditor
-                    formik={formik}
-                    field={fieldLayoutInfo.attrs.name}
-                    height={fieldLayoutInfo.attrs?.height}
-                    fontSize={fieldLayoutInfo.attrs?.fontSize}
-                    readOnly={formReadonly || fieldReadonly}
-                >
-                </CodeEditor>
+                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                    </label>
+                    <CodeEditor
+                        formik={formik}
+                        field={fieldLayoutInfo.attrs.name}
+                        height={fieldLayoutInfo.attrs?.height}
+                        fontSize={fieldLayoutInfo.attrs?.fontSize}
+                        readOnly={formReadonly || fieldReadonly}
+                    >
+                    </CodeEditor>
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -21,7 +21,12 @@ export class SolidLongTextField implements ISolidField {
     }
 
     initialValue(): any {
-        return this.fieldContext.data[this.fieldContext.field.attrs.name];
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
     }
 
     validationSchema(): Schema {
@@ -56,7 +61,7 @@ export class SolidLongTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -71,20 +76,21 @@ export class SolidLongTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-
-                    &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
-                </label>
-                <InputTextarea
-                    readOnly={formReadonly || fieldReadonly}
-                    disabled={formDisabled || fieldDisabled}
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    rows={5}
-                    cols={30}
-                />
+                <div className="flex flex-column gap-2 mt-4">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                        &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
+                    </label>
+                    <InputTextarea
+                        readOnly={formReadonly || fieldReadonly}
+                        disabled={formDisabled || fieldDisabled}
+                        id={fieldLayoutInfo.attrs.name}
+                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                        onChange={formik.handleChange}
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        rows={5}
+                        cols={30}
+                    />
+                </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 )}