@solidstarters/solid-core-ui 1.1.69 → 1.1.71

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

@@ -9,6 +9,10 @@ import SolidFormView from "../../SolidFormView";
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
 import { usePathname } from "next/navigation";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
+import { Message } from "primereact/message";
+import FieldMetaData from "@/components/core/model/FieldMetaData";
+import { Chip } from "primereact/chip";
 
 
 export class SolidRelationOneToManyField implements ISolidField {
@@ -56,94 +60,10 @@ export class SolidRelationOneToManyField implements ISolidField {
         const fieldMetadata = this.fieldContext.fieldMetadata;
 
         const fieldLayoutInfo = this.fieldContext.field;
-        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;
-        const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
-        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 readOnlyPermission = this.fieldContext.readOnly;
-        const pathname = usePathname();
-        const lastPathSegment = pathname.split('/').pop();
-
-        const handlePopupOpen = (id: any) => {
-            const formviewparams = {
-                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
-                id: id,
-                embeded: true,
-                isCustomCreate: false,
-                customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
-            }
-            setformViewParams(formviewparams);
-            setvisibleCreateRelationEntity(true);
-
-        }
-
-        const handlePopupClose = () => {
-            setvisibleCreateRelationEntity(false);
-            setRefreshList((prev) => !prev);
-            const customFilter = this.fieldContext.fieldMetadata.relationCoModelFieldName ? this.fieldContext.fieldMetadata.relationCoModelFieldName : `${this.fieldContext.modelName}`
-            const lisviewparams = {
-                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
-                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
-                inlineCreate: readOnlyPermission === false ? true : false,
-                customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
-                embeded: true,
-                id: this.fieldContext.data ? this?.fieldContext?.data?.id : 'new',
-                customFilter: {
-                    [customFilter]: {
-                        id: {
-                            $eq: this.fieldContext.data ? this?.fieldContext?.data?.id : -1
-                        }
-                    }
-                }
-            }
-            setListViewParams(lisviewparams)
-        }
-        //Intial Params 
-        useEffect(() => {
-
-            const customFilter = this.fieldContext.fieldMetadata.relationCoModelFieldName ? this.fieldContext.fieldMetadata.relationCoModelFieldName : `${this.fieldContext.modelName}`
-            const listviewparams = {
-                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
-                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
-                inlineCreate: readOnlyPermission === false ? true : false,
-                customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
-                embeded: true,
-                id: this.fieldContext.data ? this?.fieldContext?.data?.id : 'new',
-                customFilter: {
-                    [customFilter]: {
-                        id: {
-                            $eq: this.fieldContext.data ? this?.fieldContext?.data?.id : -1
-                        }
-                    }
-                }
-            }
-            setListViewParams(listviewparams);
-            const formviewparams = {
-                moduleName: this.fieldContext.fieldMetadata.relationModelModuleName,
-                id: "new",
-                embeded: true,
-                isCustomCreate: false,
-                customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
-            }
-            setformViewParams(formviewparams)
-
-        }, [readOnlyPermission])
-
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-        const viewMode: string = this.fieldContext.viewMode;
 
         const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
 
@@ -152,79 +72,240 @@ export class SolidRelationOneToManyField implements ISolidField {
             label: fieldLabel,
             value: (this.fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map(
                 (item: any) => ({ label: item[userKeyFieldName] ?? '' })
-            )
+            ),
+            layout: fieldLayoutInfo
         }
 
+        DefaultRelationOneToManyFormEditWidget
 
+
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultRelationManyToOneFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultRelationOneToManyFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
         return (
             <>
-                {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" &&
-                    (
-                        <div className={className}>
-                            {/* <div className="justify-content-center align-items-center"> */}
-                            {showFieldLabel != false &&
-                                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                    {/* &nbsp;{fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                                </label>
-                            }
-
-                            {/* </div>
-                <br></br> */}
-                            {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>}
-                            {listViewParams && lastPathSegment !== 'new' &&
-                                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" && (
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
                             }
-                            {readOnlyPermission !== true &&
-                                this.renderSolidFormEmbededView(visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose)}
-
-                        </div>
-                    )}
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
+                        </>
+                    )
+                    }
+                </div>
             </>
         );
 
     }
 
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
 
-    renderSolidFormEmbededView(visibleCreateRelationEntity: any, setvisibleCreateRelationEntity: any, formViewParams: any, handlePopupClose: any) {
 
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+}
 
 
-        return (
-            <div className="many-to-many-add" >
-                {/* <Button icon="pi pi-plus"
-                    rounded
-                    outlined
-                    aria-label="Filter"
-                    type="button"
-                    onClick={() => setvisibleCreateRelationEntity(true)}
-                /> */}
-                <Dialog
-                    header=""
-                    showHeader={false}
-                    visible={visibleCreateRelationEntity}
-                    className="solid-dialog"
-                    style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "40vw" }}
-                    onHide={() => {
-                        if (!visibleCreateRelationEntity) return;
-                        setvisibleCreateRelationEntity(false);
-                    }}
-                >
-                    {formViewParams &&
-                        < SolidFormView {...formViewParams} handlePopupClose={handlePopupClose} />
+export const DefaultRelationOneToManyFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+    const [visibleCreateRelationEntity, setvisibleCreateRelationEntity] = useState(false);
+    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 readOnlyPermission = fieldContext.readOnly;
+    const pathname = usePathname();
+    const lastPathSegment = pathname.split('/').pop();
+
+    const handlePopupOpen = (id: any) => {
+        const formviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            id: id,
+            embeded: true,
+            isCustomCreate: false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName)
+        }
+        setformViewParams(formviewparams);
+        setvisibleCreateRelationEntity(true);
+
+    }
+
+    const handlePopupClose = () => {
+        setvisibleCreateRelationEntity(false);
+        setRefreshList((prev) => !prev);
+        const customFilter = fieldContext.fieldMetadata.relationCoModelFieldName ? fieldContext.fieldMetadata.relationCoModelFieldName : `${fieldContext.modelName}`
+        const lisviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+            inlineCreate: readOnlyPermission === false ? true : false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
+            embeded: true,
+            id: fieldContext.data ? fieldContext?.data?.id : 'new',
+            customFilter: {
+                [customFilter]: {
+                    id: {
+                        $eq: fieldContext.data ? fieldContext?.data?.id : -1
                     }
-                </Dialog>
-            </div>
-        )
+                }
+            }
+        }
+        setListViewParams(lisviewparams)
     }
+    //Intial Params 
+    useEffect(() => {
+
+        const customFilter = fieldContext.fieldMetadata.relationCoModelFieldName ? fieldContext.fieldMetadata.relationCoModelFieldName : `${fieldContext.modelName}`
+        const listviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+            inlineCreate: readOnlyPermission === false ? true : false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
+            embeded: true,
+            id: fieldContext.data ? fieldContext?.data?.id : 'new',
+            customFilter: {
+                [customFilter]: {
+                    id: {
+                        $eq: fieldContext.data ? fieldContext?.data?.id : -1
+                    }
+                }
+            }
+        }
+        setListViewParams(listviewparams);
+        const formviewparams = {
+            moduleName: fieldContext.fieldMetadata.relationModelModuleName,
+            id: "new",
+            embeded: true,
+            isCustomCreate: false,
+            customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
+            modelName: camelCase(fieldContext.fieldMetadata.relationCoModelSingularName),
+        }
+        setformViewParams(formviewparams)
+
+    }, [readOnlyPermission])
+
+    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    return (
+        <div>
+            {/* <div className="justify-content-center align-items-center"> */}
+            {showFieldLabel != false &&
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                </label>
+            }
+
+            {lastPathSegment === 'new' && <p>Please save the {solidFormViewMetaData.data.solidView.model.displayName} to be able to save {fieldMetadata.displayName}</p>}
+            {listViewParams && lastPathSegment !== 'new' &&
+                <SolidListView key={refreshList.toString()}  {...listViewParams} handlePopUpOpen={handlePopupOpen} />
+            }
+            {readOnlyPermission !== true &&
+                <RenderSolidFormEmbededView formik={formik} fieldContext={fieldContext} visibleCreateRelationEntity={visibleCreateRelationEntity} setvisibleCreateRelationEntity={setvisibleCreateRelationEntity} formViewParams={formViewParams} handlePopupClose={handlePopupClose}></RenderSolidFormEmbededView>
+            }
+
+        </div>
+    );
 }
 
+export const RenderSolidFormEmbededView = ({ formik, fieldContext, customCreateHandler, visibleCreateRelationEntity, setvisibleCreateRelationEntity, formViewParams, handlePopupClose }: any) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const className = fieldLayoutInfo.attrs?.className || 'col-12';
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+
+    return (
+        <div className="many-to-many-add" >
+            {/* <Button icon="pi pi-plus"
+                rounded
+                outlined
+                aria-label="Filter"
+                type="button"
+                onClick={() => setvisibleCreateRelationEntity(true)}
+            /> */}
+            <Dialog
+                header=""
+                showHeader={false}
+                visible={visibleCreateRelationEntity}
+                className="solid-dialog"
+                style={{ width: fieldLayoutInfo?.attrs?.inlineCreateLayout?.attrs?.width ?? "40vw" }}
+                onHide={() => {
+                    if (!visibleCreateRelationEntity) return;
+                    setvisibleCreateRelationEntity(false);
+                }}
+            >
+                {formViewParams &&
+                    < SolidFormView {...formViewParams} handlePopupClose={handlePopupClose} />
+                }
+            </Dialog>
+        </div>
+    )
+}
+
+export const DefaultRelationOneToManyFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+    const [fieldValue, setFieldValue] = useState<any>([]);
+    useEffect(() => {
+        const value = (fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map((item: any) => ({ label: item[userKeyFieldName] ?? '' }));
+        if (Array.isArray(value)) {
+
+            if (value.length > 0) {
+                const data = value.map((v: any) => v.label);
+                setFieldValue(data);
+            }
+        }
+        if (value && !Array.isArray(value) && typeof value === "object") {
+            setFieldValue([value.label]);
+        }
+    }, [fieldContext]);
+
+    return (
+        <div className="mt-2 flex-column">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div className="flex flex-wrap gap-2 mt-2">
+                {fieldValue.map((v: any) => (
+                    <Chip key={v} label={v} className="view-widget-chip" />
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useState } from "react";
+import { Message } from "primereact/message";
+import { classNames } from "primereact/utils";
+import { SelectButton } from "primereact/selectbutton";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { RadioButton } from "primereact/radiobutton";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
+import { AvatarWidget } from "@/components/core/list/widgets/SolidRelationAvatarWidget";
+
+export const SolidRelationFieldAvatarFormWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const userKeyFieldName = fieldMetadata.relationModel?.userKeyField?.name;
+    const [fieldValue, setFieldValue] = useState<any>([]);
+    useEffect(() => {
+        console.log("fieldContext.data?.[fieldLayoutInfo.attrs.name]",fieldContext.data?.[fieldLayoutInfo.attrs.name]);
+        
+        const value = (fieldContext.data?.[fieldLayoutInfo.attrs.name] || []).map((item: any) => ({ label: item[userKeyFieldName] ?? '' }));
+        if (Array.isArray(value)) {
+
+            if (value.length > 0) {
+                const data = value.map((v: any) => v.label);
+                setFieldValue(data);
+            }
+        }
+        if (value && !Array.isArray(value) && typeof value === "object") {
+            setFieldValue([value.label]);
+        }
+    }, [fieldContext]);
+
+
+
+    return (
+        <div className="mt-2 flex-column">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div className="flex flex-wrap gap-2 mt-2">
+                {fieldValue.map((v: any) => (
+                    <AvatarWidget value={v} />
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/components/core/kanban/kanban-fields/SolidShortTextKanbanField.tsx

@@ -11,7 +11,7 @@ import Image from 'next/image';
 import { ExcelSvg } from '@/components/Svg/ExcelSvg';
 const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fieldLayout, data, setLightboxUrls, setOpenLightbox, groupedView }: SolidKanbanViewFieldsParams) => {
     const [visible, setVisible] = useState(false);
-    const renderMode = fieldLayout?.attrs?.renderMode ? fieldLayout?.attrs?.renderMode : "text";
+    const widget = fieldLayout?.attrs?.widget ? fieldLayout?.attrs?.widget : "text";
     const mimeType = data && data?.mimeType
     const fileName = data?.originalFileName;
     const PDFHeader = () => {
@@ -34,16 +34,16 @@ const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fie
     }
     return (
         <div>
-            {renderMode === "text" && groupedView &&
+            {widget === "text" && groupedView &&
                 <p className='font-medium'>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}` : ""}</p>
             }
-            {renderMode === "text" && !groupedView && fieldMetadata?.name === 'originalFileName' &&
+            {widget === "text" && !groupedView && fieldMetadata?.name === 'originalFileName' &&
                 <p className='font-medium'>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}` : ""}</p>
             }
-            {renderMode === "text" && !groupedView && fieldMetadata?.name === 'mimeType' &&
+            {widget === "text" && !groupedView && fieldMetadata?.name === 'mimeType' &&
                 <span className='solid-mimetype-chip'>{data && data[fieldMetadata.name] ? `${data[fieldMetadata.name]}` : ""}</span>
             }
-            {renderMode === "image" && !groupedView && mimeType && mimeType.includes("image/") &&
+            {widget === "image" && !groupedView && mimeType && mimeType.includes("image/") &&
                 < div className='mt-3'>
                     <img
                         src={data[fieldMetadata.name]}
@@ -56,7 +56,7 @@ const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fie
                     ></img>
                 </div>
             }
-            {renderMode === "image" && !groupedView && mimeType && mimeType.includes("pdf") && (
+            {widget === "image" && !groupedView && mimeType && mimeType.includes("pdf") && (
                 <div className='mt-3' onClick={(e) => e.stopPropagation()}>
                     <div className='kanban-media-view-card' onClick={() => setVisible(true)} style={{ cursor: 'pointer' }}>
                         <PDFSvg />
@@ -69,12 +69,12 @@ const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fie
                 </div>
             )}
 
-            {renderMode === "image" && !groupedView && mimeType && (mimeType.includes("excel") || mimeType.includes("spreadsheet")) && (
+            {widget === "image" && !groupedView && mimeType && (mimeType.includes("excel") || mimeType.includes("spreadsheet")) && (
                 <a href={data[fieldMetadata.name]} className='kanban-media-view-card mt-3' onClick={(e) => e.stopPropagation()} style={{ cursor: 'pointer' }} download target="_blank" rel="noopener noreferrer">
                     <ExcelSvg />
                 </a>
             )}
-            {renderMode === "image" && !groupedView && mimeType && mimeType.includes("audio") && (
+            {widget === "image" && !groupedView && mimeType && mimeType.includes("audio") && (
                 <a href={data[fieldMetadata.name]} className='kanban-media-view-card my-2' onClick={(e) => e.stopPropagation()} style={{ cursor: 'pointer' }} download target="_blank" rel="noopener noreferrer">
                     <Image
                         src={MP3Image}
@@ -85,7 +85,7 @@ const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fie
                     />
                 </a>
             )}
-            {renderMode === "image" && !groupedView && mimeType && mimeType.includes("video") && (
+            {widget === "image" && !groupedView && mimeType && mimeType.includes("video") && (
                 <a href={data[fieldMetadata.name]} className='kanban-media-view-card mt-3' onClick={(e) => e.stopPropagation()} style={{ cursor: 'pointer' }} download target="_blank" rel="noopener noreferrer">
                     <Image
                         src={MP4Image}
@@ -97,7 +97,7 @@ const SolidShortTextKanbanField = ({ solidKanbanViewMetaData, fieldMetadata, fie
                 </a>
             )}
 
-            {renderMode === "image" && !groupedView && mimeType && !mimeType.includes("image/") &&
+            {widget === "image" && !groupedView && mimeType && !mimeType.includes("image/") &&
                 !mimeType.includes("pdf") &&
                 !mimeType.includes("excel") &&
                 !mimeType.includes("spreadsheet") &&

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

@@ -197,7 +197,7 @@ export const SolidListView = (params: SolidListViewParams) => {
       }
 
       // Form the "toPopulate" array. 
-      if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
+      if (fieldMetadata.type === 'relation') {
         toPopulate.push(fieldMetadata.name);
       }
       if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.type === 'mediaMultiple') {
@@ -866,17 +866,17 @@ export const SolidListView = (params: SolidListViewParams) => {
                         />
                       }
                       {solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons &&
-                        solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowAction: any) => {
+                        solidListViewMetaData?.data?.solidView?.layout?.attrs?.rowButtons.map((rowButton: any) => {
                           return (
                             <Button
                               text
                               size="small"
-                              icon={rowAction?.attrs?.className ? rowAction?.attrs?.className : "pi pi-pencil"}
+                              icon={rowButton?.attrs?.className ? rowButton?.attrs?.className : "pi pi-pencil"}
                               onClick={() => {
                                 setListRowActionData({
                                   modelName: params.modelName,
                                   moduleName: params.moduleName,
-                                  rowAction: rowAction,
+                                  rowAction: rowButton,
                                   rowData: selectedSolidViewData,
                                   closeListViewRowActionPopup: closeListViewRowActionPopup
 
@@ -885,7 +885,7 @@ export const SolidListView = (params: SolidListViewParams) => {
                               }
                               }
                               className="w-full text-left gap-2"
-                              label="Generate Code"
+                              label={rowButton?.attrs?.label}
                             />
                           );
                         })}

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

@@ -2,6 +2,8 @@
 import { Column, ColumnFilterElementTemplateOptions } from "primereact/column";
 import { Dropdown } from 'primereact/dropdown';
 import { SolidListViewColumnParams } from '../SolidListViewColumn';
+import { SolidListFieldWidgetProps } from "@/types/solid-core";
+import { getExtensionComponent } from "@/helpers/registry";
 
 const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: SolidListViewColumnParams) => {
     const filterable = column.attrs.filterable;
@@ -50,7 +52,25 @@ const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: So
             showFilterOperator={showFilterOperator}
             // filterMatchModeOptions={filterMatchModeOptions}
             filterElement={filterTemplate}
-            body={bodyTemplate}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultBooleanListWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
             filterPlaceholder={`Search by ${fieldMetadata.displayName}`}
             style={{ minWidth: "12rem" }}
             headerClassName="table-header-fs"
@@ -58,4 +78,12 @@ const SolidBooleanColumn = ({ solidListViewMetaData, fieldMetadata, column }: So
     );
 };
 
-export default SolidBooleanColumn;
+export default SolidBooleanColumn;
+
+
+
+
+export const DefaultBooleanListWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
+    const fieldKey = column.attrs.label ?? fieldMetadata.name;
+    return rowData[fieldKey] ? 'Yes' : 'No';
+}

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

@@ -5,6 +5,8 @@ import { FormEvent } from "primereact/ts-helpers";
 import { getNumberOfInputs, SolidListViewColumnParams } from '../SolidListViewColumn';
 import { InputTypes, SolidVarInputsFilterElement } from "../SolidVarInputsFilterElement";
 import SolidTableRowCell from '../SolidTableRowCell';
+import { SolidListFieldWidgetProps } from '@/types/solid-core';
+import { getExtensionComponent } from '@/helpers/registry';
 
 export const dateFilterMatchModeOptions = [
     { label: 'Equals', value: FilterMatchMode.EQUALS },
@@ -59,17 +61,30 @@ const SolidDateColumn = ({ solidListViewMetaData, fieldMetadata, column }: Solid
             // style={{ minWidth: "12rem" }}
             // headerClassName="table-header-fs"
             header={() => {
-                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace:'nowrap', textOverflow:'ellipsis', overflow:'hidden'}}>{header}</div>)
+                return (<div style={{ maxWidth: truncateAfter ? `${truncateAfter}ch` : '30ch', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{header}</div>)
             }}
-            body={(rowData) => (
-                <SolidTableRowCell
-                    value={rowData[fieldMetadata.name]}
-                    truncateAfter={truncateAfter}
-                />
-            )}
+            body={(rowData) => {
+                let viewWidget = column.attrs.viewWidget;
+                if (!viewWidget) {
+                    viewWidget = 'DefaultTextRenderModeWidget';
+                }
+                let DynamicWidget = getExtensionComponent(viewWidget);
+                const widgetProps: SolidListFieldWidgetProps = {
+                    rowData,
+                    solidListViewMetaData,
+                    fieldMetadata,
+                    column
+                }
+                return (
+                    <>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </>
+                )
+            }
+            }
         ></Column>
     );
 
 };
 
-export default SolidDateColumn;
+export default SolidDateColumn;