@solidstarters/solid-core-ui 1.1.17 → 1.1.18

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

@@ -51,6 +51,7 @@ export class SolidDateTimeField implements ISolidField {
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -60,9 +61,11 @@ export class SolidDateTimeField 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>
+                    {showFieldLabel != false &&
+                        <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

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

@@ -52,6 +52,7 @@ export class SolidDecimalField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -64,9 +65,11 @@ 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>
+                    {showFieldLabel != false &&
+                        <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}

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

@@ -53,6 +53,7 @@ export class SolidIntegerField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -65,9 +66,11 @@ export class SolidIntegerField 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>
+                    {showFieldLabel != false &&
+                        <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}

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

@@ -47,6 +47,7 @@ export class SolidJsonField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -56,10 +57,12 @@ export class SolidJsonField 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}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <CodeEditor
                         formik={formik}
                         field={fieldLayoutInfo.attrs.name}

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

@@ -65,6 +65,7 @@ export class SolidLongTextField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
@@ -77,9 +78,11 @@ export class SolidLongTextField 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>({fieldDescription}) </span>}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
+                        </label>
+                    }
                     <InputTextarea
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -93,6 +93,7 @@ export class SolidMediaMultipleField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const [imagesPreview, setImagesPreview] = useState<Array<string | ArrayBuffer>>([]);
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
@@ -274,10 +275,12 @@ export class SolidMediaMultipleField 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}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <div
                         {...getRootProps()}
                         className="solid-dropzone-wrapper"

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

@@ -78,6 +78,7 @@ export class SolidMediaSingleField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const [isDeleteImageDialogVisible, setDeleteImageDialogVisible] = useState(false);
         const [imageToBeDeletedData, setImageToBeDeletedData] = useState<any>();
@@ -230,9 +231,11 @@ export class SolidMediaSingleField 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>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <div
                         {...getRootProps()}
                         className="solid-dropzone-wrapper"

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

@@ -61,6 +61,8 @@ export class SolidRichTextField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
         const [text, setText] = useState();
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
@@ -74,9 +76,11 @@ export class SolidRichTextField 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>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Editor
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -55,6 +55,7 @@ export class SolidSelectionDynamicField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -94,9 +95,11 @@ export class SolidSelectionDynamicField 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>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -76,6 +76,7 @@ export class SolidSelectionStaticField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -99,9 +100,11 @@ export class SolidSelectionStaticField 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>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -68,6 +68,8 @@ export class SolidShortTextField implements ISolidField {
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
@@ -79,11 +81,13 @@ export class SolidShortTextField 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>}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
 
-                        {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
-                    </label>
+                            {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
+                        </label>
+                    }
                     <InputText
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}

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

@@ -51,7 +51,8 @@ export class SolidTimeField implements ISolidField {
         const calendarRef = useRef<any>(null); // Reference for the Calendar component
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
@@ -60,10 +61,12 @@ export class SolidTimeField 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}
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
+                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                        </label>
+                    }
                     <Calendar
                         disabled={formDisabled || fieldDisabled}
                         ref={calendarRef} // Attach ref to Calendar

package/src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx

@@ -136,6 +136,7 @@ export class SolidRelationManyToManyField implements ISolidField {
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         // auto complete specific code. 
         const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
@@ -235,9 +236,11 @@ export class SolidRelationManyToManyField implements ISolidField {
             return (
                 <div className={className}>
                     <div className="flex align-items-center gap-3">
-                        <label className="form-field-label">
-                            {capitalize(fieldLayoutInfo.attrs.name)}
-                        </label>
+                        {showFieldLabel != false &&
+                            <label className="form-field-label">
+                                {capitalize(fieldLayoutInfo.attrs.name)}
+                            </label>
+                        }
                         {fieldLayoutInfo.attrs.inlineCreate === "true" &&
                             this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
                         }
@@ -291,6 +294,7 @@ export class SolidRelationManyToManyField implements ISolidField {
         const fieldLayoutInfo = this.fieldContext.field;
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
         // auto complete specific code. 
         const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
@@ -358,29 +362,29 @@ export class SolidRelationManyToManyField 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}
-
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                        {fieldLabel}
                     </label>
-                    <div className="flex align-items-center gap-3">
-                        <AutoComplete
-                            readOnly={readOnly}
-                            disabled={disabled}
-                            multiple
-                            {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                            id={fieldLayoutInfo.attrs.name}
-                            field="label"
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                            dropdown
-                            suggestions={autoCompleteItems}
-                            completeMethod={autoCompleteSearch}
-                            onChange={formik.handleChange}
-                            className="solid-standard-autocomplete w-full"
-                        />
-                        {fieldLayoutInfo.attrs.inlineCreate === "true" &&
-                            this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
-                        }
-                    </div>
+                }
+                <div className="flex align-items-center gap-3">
+                    <AutoComplete
+                        readOnly={readOnly}
+                        disabled={disabled}
+                        multiple
+                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                        id={fieldLayoutInfo.attrs.name}
+                        field="label"
+                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        dropdown
+                        suggestions={autoCompleteItems}
+                        completeMethod={autoCompleteSearch}
+                        onChange={formik.handleChange}
+                        className="solid-standard-autocomplete w-full"
+                    />
+                    {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                        this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                    }
                 </div>
             </div>
         );

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -7,6 +7,12 @@ import { useState } from "react";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
+import { camelCase, capitalize } from "lodash";
+import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
+import { Dialog } from "primereact/dialog";
+import { Panel } from "primereact/panel";
+import SolidFormView from "../../SolidFormView";
 
 
 export class SolidRelationManyToOneField implements ISolidField {
@@ -57,6 +63,8 @@ export class SolidRelationManyToOneField implements ISolidField {
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
 
         // auto complete specific code. 
         const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
@@ -106,11 +114,36 @@ export class SolidRelationManyToOneField implements ISolidField {
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
+
+
+
+        const disabled = fieldLayoutInfo.attrs?.disabled;
+        const readOnly = fieldLayoutInfo.attrs?.readOnly;
+
+
+        const customCreateHandler = (values: any) => {
+            const currentRelationData = formik.values[fieldLayoutInfo.attrs.name] || [];
+            const jsonValues = Object.fromEntries(values.entries());
+            const updatedRelationData = [
+                ...currentRelationData,
+                {
+                    label: jsonValues[fieldMetadata?.relationModel?.userKeyField?.name],
+                    value: "new",
+                    original: jsonValues,
+                },
+            ];
+
+            formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
+
+        }
         return (
             <div className={className}>
                 <div className="flex flex-column gap-2 mt-4">
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                    </label>
+                    {showFieldLabel != false &&
+                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                            {fieldLabel}
+                        </label>
+                    }
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}
@@ -124,6 +157,9 @@ export class SolidRelationManyToOneField implements ISolidField {
                         onChange={formik.handleChange}
                         className="w-full solid-standard-autocomplete"
                     />
+                    {fieldLayoutInfo.attrs.inlineCreate === "true" &&
+                        this.renderSolidFormEmbededView(formik, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity)
+                    }
                 </div>
                 {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                     <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
@@ -131,4 +167,58 @@ export class SolidRelationManyToOneField implements ISolidField {
             </div>
         );
     }
+
+
+    renderSolidFormEmbededView(formik: FormikObject, customCreateHandler: any, visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any) {
+
+        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 fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        const params = {
+            moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
+            id: "new",
+            embeded: true,
+            layout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+            customCreateHandler: ((values: any) => {
+                setvisibleCreateRelationEntity(false);
+                customCreateHandler(values)
+            }),
+            inlineCreateAutoSave: fieldLayoutInfo?.attrs?.inlineCreateAutoSave,
+            handlePopupClose: (() => {
+                setvisibleCreateRelationEntity(false);
+            }),
+            modelName: camelCase(this.fieldContext.fieldMetadata.relationModelSingularName)
+        }
+
+        return (
+            <div >
+                <Button
+                    icon="pi pi-plus"
+                    rounded
+                    outlined
+                    aria-label="Filter"
+                    type="button"
+                    size="small"
+                    onClick={() => setvisibleCreateRelationEntity(true)}
+                    className="custom-add-button"
+                />
+                <Dialog
+                    header=""
+                    showHeader={false}
+                    visible={visibleCreateRelationEntity}
+                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "60vw" }}
+                    onHide={() => {
+                        if (!visibleCreateRelationEntity) return;
+                        setvisibleCreateRelationEntity(false);
+                    }}
+                    className="solid-dialog"
+                >
+                    <SolidFormView {...params} />
+
+                </Dialog>
+            </div>
+        )
+    }
 }

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -62,6 +62,7 @@ export class SolidRelationOneToManyField implements ISolidField {
         const [listViewParams, setListViewParams] = useState<any>()
         const [formViewParams, setformViewParams] = useState<any>()
         const [refreshList, setRefreshList] = useState(false); // Added state for rerender
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
 
 
         const handlePopupOpen = (id: any) => {
@@ -133,7 +134,10 @@ export class SolidRelationOneToManyField implements ISolidField {
         return (
             <div className={className}>
                 {/* <div className="justify-content-center align-items-center"> */}
-                    <label htmlFor={fieldLayoutInfo.attrs.name}  className="form-field-label">{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}&nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}</label>
+                }
+
                 {/* </div>
                 <br></br> */}
                 {listViewParams &&

package/src/components/core/list/SolidListView.tsx

@@ -59,6 +59,7 @@ export const SolidListView = (params: SolidListViewParams) => {
   // const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
 
   const [toPopulate, setToPopulate] = useState<string[]>([]);
+  const [toPopulateMedia, setToPopulateMedia] = useState<string[]>([]);
   const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
 
   const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
@@ -123,6 +124,8 @@ export const SolidListView = (params: SolidListViewParams) => {
 
     const initialFilters: any = {};
     const toPopulate: string[] = [];
+    const toPopulateMedia: string[] = [];
+
     for (let i = 0; i < solidView.layout.children?.length; i++) {
       const column = solidView.layout.children[i];
       const fieldMetadata = solidFieldsMetadata[column.attrs.name];
@@ -155,10 +158,14 @@ export const SolidListView = (params: SolidListViewParams) => {
       if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
         toPopulate.push(fieldMetadata.name);
       }
+      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.relationType === 'mediaMultiple') {
+        toPopulateMedia.push(fieldMetadata.name);
+      }
     }
     // setFilters(initialFilters);
     setRows(solidListViewMetaData?.data?.solidView?.layout?.attrs?.defaultPageSize ? solidListViewMetaData?.data?.solidView?.layout?.attrs.defaultPageSize : 25)
     setToPopulate(toPopulate);
+    setToPopulateMedia(toPopulateMedia);
   }
 
   useEffect(() => {
@@ -268,11 +275,12 @@ export const SolidListView = (params: SolidListViewParams) => {
 
   // Fetch data after toPopulate has been populated...
   useEffect(() => {
-    if (toPopulate) {
+    if (toPopulate || toPopulateMedia) {
       const queryData = {
         offset: 0,
         limit: 25,
         populate: toPopulate,
+        populateMedia: toPopulateMedia,
         sort: [`id:desc`],
         filters: { ...params.customFilter }
       };
@@ -288,7 +296,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       setSelectedRecoverRecords([]);
       setShowArchived(false);
     }
-  }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, toPopulate]);
+  }, [isDeleteSolidEntitiesSucess, isDeleteSolidSingleEntitySuccess, toPopulate, toPopulateMedia]);
 
   // Handle pagination event.
   const onPageChange = (event: any) => {
@@ -402,6 +410,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       limit: limit ?? rows,
       filters: filters ?? filters,
       populate: toPopulate,
+      populateMedia: toPopulateMedia
     };
 
     if (sortField) {
@@ -702,7 +711,7 @@ export const SolidListView = (params: SolidListViewParams) => {
           rows={rows}
           rowsPerPageOptions={solidListViewMetaData?.data?.solidView?.layout?.attrs?.pageSizeOptions}
           dataKey="id"
-          emptyMessage="No Entities found."
+          emptyMessage={solidListViewMetaData?.data?.solidView?.model?.description || 'No Entities found.'}
           filterDisplay="menu"
           totalRecords={totalRecords}
           first={first}

package/src/components/core/list/columns/SolidMediaMultipleColumn.tsx

@@ -9,11 +9,29 @@ const SolidMediaMultipleColumn = ({ solidListViewMetaData, fieldMetadata, column
     const showFilterOperator = false;
     const columnDataType = undefined;
     const header = column.attrs.label ?? fieldMetadata.displayName;
+    const imageBodyTemplate = (product: any) => {
+        if (!product?._media?.[fieldMetadata.name]) return null;
 
+        const imageUrls = product._media[fieldMetadata.name].map((i: any) => i._full_url);
+
+        return (
+            <>
+                {imageUrls.map((url: string, index: number) => (
+                    <img
+                        key={index}
+                        src={url}
+                        alt={`product-image-${index}`}
+                        className="w-6rem shadow-2 border-round"
+                    />
+                ))}
+            </>
+        );
+    };
     return (
         <Column
             key={fieldMetadata.name}
             field={fieldMetadata.name}
+            body={imageBodyTemplate}
             header={header}
             // className="text-sm"
             sortable={column.attrs.sortable}