@solidstarters/solid-core-ui 1.1.70 → 1.1.72

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

@@ -6,6 +6,8 @@ import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { Password } from "primereact/password";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
+import { useState } from "react";
 
 export class SolidPasswordField implements ISolidField {
 
@@ -65,66 +67,121 @@ export class SolidPasswordField implements ISolidField {
     render(formik: FormikObject) {
         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 showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
-
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-        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 viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldPasswordViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultPasswordFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultPasswordFormViewWidget';
         }
+        const viewMode: string = this.fieldContext.viewMode;
+
         return (
             <>
-              {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" &&
-                    (
-                        <div className={className}>
-                            <div className="relative">
-                                <div className="flex flex-column gap-2 mt-4">
-                                    {showFieldLabel != false &&
-                                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
-                                            {fieldLabel}
-                                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                        </label>
-                                    }
-                                    <Password
-                                        id={fieldLayoutInfo.attrs.name}
-                                        name={fieldMetadata.name}
-                                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                                        onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                                        onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
-                                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                                        disabled={formDisabled || fieldDisabled}
-                                        toggleMask
-                                    />
-
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" &&
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                                 </div>
-                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                    <div className="absolute mt-1">
-                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    )}
+                            )}
+                        </>
+                    }
+                </div>
             </>
         );
     }
-}
+
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+}
+
+export const DefaultPasswordFormEditWidget = ({ 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 showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+    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 className="relative">
+            <div className="flex flex-column gap-2 mt-4">
+                {showFieldLabel != false &&
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                        {fieldLabel}
+                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                    </label>
+                }
+                <Password
+                    id={fieldLayoutInfo.attrs.name}
+                    name={fieldMetadata.name}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
+                    onBlur={(e) => fieldContext.onBlur(e, 'onFieldBlur')}
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    disabled={formDisabled || fieldDisabled}
+                    toggleMask
+                />
+
+            </div>
+        </div>
+    );
+}
+
+export const DefaultPasswordFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+    const [isText, setIsText] = useState(false)
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <div className="flex align-items-center gap-4">
+                <p className="m-0">
+                    {isText ? formik.values[fieldLayoutInfo.attrs.name] : "••••••••"}
+                </p>
+                <i
+                    className={`pi ${isText ? 'pi-eye' : 'pi-eye-slash'}`}
+                    onClick={() => setIsText(!isText)}
+                    style={{ cursor: 'pointer' }}
+                />
+            </div>
+
+        </div>
+    );
+}
+
+

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

@@ -6,6 +6,7 @@ import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 
 export class SolidRichTextField implements ISolidField {
 
@@ -58,67 +59,119 @@ export class SolidRichTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         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 showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
 
-        const [text, setText] = useState();
-
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
-        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultRichTextFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultRichTextFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
 
-        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
-        const viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldRichTextViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
-        }
         return (
             <>
-               {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" &&
-                    (
-                        <div className={className}>
-                            <div className="relative">
-                                <div className="flex flex-column gap-2 mt-4">
-                                    {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>
-                                    }
-                                    <Editor
-                                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                                        disabled={formDisabled || fieldDisabled}
-                                        key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
-                                        id={fieldLayoutInfo.attrs.name}
-                                        value={formik.values[fieldLayoutInfo.attrs.name]}
-                                        onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
-                                        style={{ height: "320px" }}
-                                        className="solid-custom-editor"
-                                    />
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" &&
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                                 </div>
-                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                    <div className="absolute mt-1">
-                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    )}
+                            )}
+                        </>
+                    }
+                </div>
             </>
         );
     }
+
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
+}
+
+
+
+export const DefaultRichTextFormEditWidget = ({ 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 showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+    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 className="relative">
+            <div className="flex flex-column gap-2 mt-4">
+                {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>
+                }
+                <Editor
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    disabled={formDisabled || fieldDisabled}
+                    key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
+                    id={fieldLayoutInfo.attrs.name}
+                    value={formik.values[fieldLayoutInfo.attrs.name]}
+                    onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
+                    style={{ height: "320px" }}
+                    className="solid-custom-editor"
+                />
+            </div>
+        </div>
+    );
+}
+
+export const DefaultRichTextFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+    const [isText, setIsText] = useState(false)
+    return (
+        <div>
+            <Editor
+                readOnly={true}
+                key={fieldLabel}  // React will re-render the component whenever this value changes
+                id={fieldLabel}
+                value={formik.values[fieldLayoutInfo.attrs.name]}
+                style={{ height: "320px" }}
+                className="solid-custom-editor"
+            />
+        </div>
+    );
 }

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

@@ -8,6 +8,7 @@ import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 
 
 export class SolidSelectionDynamicField implements ISolidField {
@@ -53,105 +54,151 @@ export class SolidSelectionDynamicField 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 showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
-
-        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 whereClause = fieldLayoutInfo.attrs.whereClause;
-
-        // selection dynamic specific code. 
-        const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
-        const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
-        const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
-
-            // Get the list view layout & metadata first. 
-            const queryData = {
-                offset: 0,
-                limit: 10,
-                query: event.query,
-                fieldId: fieldMetadata.id
-            };
-            if (whereClause) {
-                queryData.query = whereClause;
-            }
-            let sdQs = qs.stringify(queryData, {
-                encodeValuesOnly: true,
-                encoder: (str, defaultEncoder, charset, type) => {
-                    if (type === 'key' || type === 'value') {
-                      if (str === queryData.query) return str;
-                    }
-                    return defaultEncoder(str);
-                }
-            });
-            // TODO: do error handling here, possible errors like modelname is incorrect etc...
-            const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
-
-            // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
-            const sdData = sdResponse.data.data;
-
-            // @ts-ignore
-            setSelectionDynamicItems(sdData);
-        }
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
-        const viewMode: string = this.fieldContext.viewMode;
-        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name] && formik.values[fieldLayoutInfo.attrs.name].value,
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultSelectionDynamicFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultSelectionDynamicFormViewWidget';
         }
+        const viewMode: string = this.fieldContext.viewMode;
         return (
             <>
-                {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {viewMode === "edit" &&
-                    (
-
-                        <div className={className}>
-                            <div className="relative">
-                                <div className="flex flex-column gap-2 mt-4">
-                                    {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>
-                                    }
-                                    <AutoComplete
-                                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                                        disabled={formDisabled || fieldDisabled}
-                                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                                        id={fieldLayoutInfo.attrs.name}
-                                        field="label"
-                                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                                        dropdown
-                                        suggestions={selectionDynamicItems}
-                                        completeMethod={selectionDynamicSearch}
-                                        // onChange={(e) => updateInputs(index, e.value)} />
-                                        // onChange={formik.handleChange}
-                                        onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                                        className="solid-standard-autocomplete"
-                                    />
+                <div className={className}>
+                    {viewMode === "view" &&
+                        this.renderExtensionRenderMode(viewWidget, formik)
+                    }
+                    {viewMode === "edit" &&
+                        <>
+                            {editWidget &&
+                                this.renderExtensionRenderMode(editWidget, formik)
+                            }
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                                 </div>
-                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                    <div className="absolute mt-1">
-                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                    </div>
-                                )}
-                            </div>
-                        </div>
-                    )}
+                            )}
+                        </>
+                    }
+                </div>
             </>
         );
     }
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
+        }
+        return (
+            <>
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
+            </>
+        )
+    }
 }
+
+
+
+
+export const DefaultSelectionDynamicFormEditWidget = ({ 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 showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+    const readOnlyPermission = fieldContext.readOnly;
+
+    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 whereClause = fieldLayoutInfo.attrs.whereClause;
+
+    // selection dynamic specific code. 
+    const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
+    const [selectionDynamicItems, setSelectionDynamicItems] = useState([]);
+    const selectionDynamicSearch = async (event: AutoCompleteCompleteEvent) => {
+
+        // Get the list view layout & metadata first. 
+        const queryData = {
+            offset: 0,
+            limit: 10,
+            query: event.query,
+            fieldId: fieldMetadata.id
+        };
+        if (whereClause) {
+            queryData.query = whereClause;
+        }
+        let sdQs = qs.stringify(queryData, {
+            encodeValuesOnly: true,
+            encoder: (str, defaultEncoder, charset, type) => {
+                if (type === 'key' || type === 'value') {
+                    if (str === queryData.query) return str;
+                }
+                return defaultEncoder(str);
+            }
+        });
+        // TODO: do error handling here, possible errors like modelname is incorrect etc...
+        const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
+
+        // TODO: if no data found then can we show no matching "entities", where entities can be replaced with the model plural name,
+        const sdData = sdResponse.data.data;
+
+        // @ts-ignore
+        setSelectionDynamicItems(sdData);
+    }
+
+
+    return (
+        <div className="relative">
+            <div className="flex flex-column gap-2 mt-4">
+                {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>
+                }
+                <AutoComplete
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    disabled={formDisabled || fieldDisabled}
+                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                    id={fieldLayoutInfo.attrs.name}
+                    field="label"
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    dropdown
+                    suggestions={selectionDynamicItems}
+                    completeMethod={selectionDynamicSearch}
+                    // onChange={(e) => updateInputs(index, e.value)} />
+                    // onChange={formik.handleChange}
+                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
+                    className="solid-standard-autocomplete"
+                />
+            </div>
+        </div>
+    );
+}
+
+
+export const DefaultSelectionDynamicFormViewWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const value  =formik.values[fieldLayoutInfo.attrs.name];
+    
+    return (
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0 form-field-label font-medium">{fieldLabel}</p>
+            <p className="m-0">{value && value.label && value.label}</p>
+        </div>
+    );
+}
+