@evoke-platform/ui-components 1.7.0-testing.3 → 1.7.0-testing.4

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -153,7 +153,7 @@ function FormRenderer(props) {
                         paddingBottom: '0px',
                         paddingTop: !hasSections ? undefined : '0px',
                     } },
-                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { fieldHeight: fieldHeight, key: index, entry: entry, handleChange: onChange, errors: errors, showSubmitError: !!(isSubmitted && errors), instance: instance, richTextEditor: richTextEditor, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, triggerFieldReset: triggerFieldReset, parameters: parameters }))),
+                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { fieldHeight: fieldHeight, key: index, entry: entry, handleChange: onChange, errors: errors, showSubmitError: !!(isSubmitted && errors), instance: instance, richTextEditor: richTextEditor, expandedSections: expandedSections, setExpandedSections: setExpandedSections, expandAll: expandAll, setExpandAll: setExpandAll, triggerFieldReset: triggerFieldReset, parameters: parameters, isDocument: !!(form.id === 'documentForm') }))),
                     !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
                             ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
                             bottom: isModal ? -5 : isSmallerThanMd ? 0 : 24,

package/dist/published/components/custom/FormV2/FormRendererContainer.d.ts

@@ -0,0 +1,21 @@
+import React, { ComponentType } from 'react';
+import { BaseProps, SimpleEditorProps } from './components/types';
+export type FormProps = BaseProps & {
+    formId?: string;
+    instanceId?: string;
+    defaultPages?: Record<string, string>;
+    pageNavigation?: string;
+    documentId?: string;
+    dataType?: 'documents' | 'objectInstances';
+    display?: {
+        fieldHeight?: 'small' | 'medium';
+    };
+    actionId?: string;
+    stickyFooter?: boolean;
+    objectId: string;
+    richTextEditor?: ComponentType<SimpleEditorProps>;
+    onClose?: () => void;
+    onSubmit?: (submission: Record<string, unknown>) => Promise<void>;
+};
+declare function FormRendererContainer(props: FormProps): React.JSX.Element;
+export default FormRendererContainer;

package/dist/published/components/custom/FormV2/FormRendererContainer.js

@@ -0,0 +1,489 @@
+import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
+import { LocalDateTime } from '@js-joda/core';
+import axios from 'axios';
+import { get, isArray, isEmpty, isEqual, merge, omit, pick, set, uniq } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { Skeleton, Snackbar } from '../../core';
+import { Box } from '../../layout';
+import ErrorComponent from '../ErrorComponent';
+import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
+import { convertDocToEntries, encodePageSlug, formatDataToDoc, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, normalizeDateTime, } from './components/utils';
+import FormRenderer from './FormRenderer';
+function FormRendererContainer(props) {
+    const { instanceId, pageNavigation, documentId, dataType, display, formId, stickyFooter, objectId, actionId, richTextEditor, } = props;
+    const apiServices = useApiServices();
+    const navigateTo = useNavigate();
+    const { id: appId, defaultPages } = useApp();
+    const [hasDocumentUpdateAccess, setHasDocumentUpdateAccess] = useState();
+    const [defaultPagesWithSlugs, setDefaultPagesWithSlugs] = useState({});
+    const [sanitizedObject, setSanitizedObject] = useState();
+    const [navigationSlug, setNavigationSlug] = useState();
+    const [parameters, setParameters] = useState();
+    const [document, setDocument] = useState();
+    const [instance, setInstance] = useState();
+    const [formData, setFormData] = useState();
+    const [action, setAction] = useState();
+    const [error, setError] = useState();
+    const [form, setForm] = useState();
+    const [snackbarError, setSnackbarError] = useState({
+        showAlert: false,
+        isError: true,
+    });
+    const userAccount = useAuthenticationContext()?.account;
+    const objectStore = useObject(form?.objectId ?? objectId);
+    const onError = (err) => {
+        const code = axios.isAxiosError(err) ? err.response?.status : undefined;
+        setSnackbarError({ ...snackbarError, isError: true });
+        setError(code ?? true);
+    };
+    useEffect(() => {
+        (async () => {
+            try {
+                if (dataType === 'documents') {
+                    const object = await objectStore.get({ sanitized: true });
+                    const document = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/documents/${documentId}`));
+                    if (document) {
+                        setDocument(document);
+                        const accessCheck = await apiServices.get(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/documents/${documentId}/checkAccess?action=update`));
+                        setHasDocumentUpdateAccess(accessCheck.result);
+                    }
+                    setSanitizedObject(omit(object, 'properties'));
+                }
+                else {
+                    if (instanceId) {
+                        objectStore.getInstance(instanceId).then((instance) => {
+                            setInstance(instance);
+                        });
+                    }
+                    const object = await apiServices.get(getPrefixedUrl(`/objects/${form?.objectId || objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } });
+                    setSanitizedObject(object);
+                    const action = object?.actions?.find((a) => a.id === (form?.actionId || actionId));
+                    if (action && (instanceId || action.type === 'create')) {
+                        setAction(action);
+                    }
+                    else {
+                        setError(true);
+                    }
+                }
+            }
+            catch (error) {
+                onError(error);
+            }
+        })();
+    }, [dataType, form, instanceId, documentId]);
+    useEffect(() => {
+        if (pageNavigation) {
+            apiServices
+                .get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`))
+                .then((page) => {
+                setNavigationSlug(page?.slug);
+            });
+        }
+        if (defaultPages) {
+            for (const [objectId, defaultPage] of Object.entries(defaultPages)) {
+                const pageId = defaultPage.includes('/')
+                    ? encodePageSlug(defaultPage.split('/').slice(2).join('/'))
+                    : defaultPage;
+                apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${pageId}`)).then((page) => {
+                    setDefaultPagesWithSlugs({
+                        ...defaultPagesWithSlugs,
+                        [objectId]: '/' + page.appId + '/' + page.slug,
+                    });
+                });
+            }
+        }
+    }, []);
+    useEffect(() => {
+        if (dataType === 'documents' || form)
+            return;
+        if (formId || action?.defaultFormId) {
+            apiServices
+                .get(getPrefixedUrl(`data/forms/${formId || action?.defaultFormId}`))
+                .then((evokeForm) => {
+                if (evokeForm?.actionId === actionId) {
+                    setForm(evokeForm);
+                }
+                else {
+                    setError(true);
+                }
+            })
+                .catch((error) => {
+                onError(error);
+            });
+        }
+        else if (action && !action?.defaultFormId) {
+            apiServices
+                .get(getPrefixedUrl(`data/forms?filter[where][actionId]=${action.id}`))
+                .then((matchingForms) => {
+                if (matchingForms.length === 1) {
+                    if (matchingForms[0]?.actionId === actionId) {
+                        setForm(matchingForms[0]);
+                    }
+                    else {
+                        setError(true);
+                    }
+                }
+            })
+                .catch((error) => {
+                onError(error);
+            });
+        }
+    }, [action]);
+    useEffect(() => {
+        if (form?.id === 'documentForm') {
+            setParameters([
+                {
+                    id: 'type',
+                    name: 'Type',
+                    type: 'string',
+                },
+                {
+                    id: 'view_permission',
+                    name: 'View Permission',
+                    type: 'string',
+                    enum: ['Public', 'Private', 'Portal'],
+                },
+            ]);
+        }
+        else if (form) {
+            const unnestedEntries = getUnnestedEntries(form.entries);
+            const inputFieldParams = unnestedEntries
+                .filter((entry) => entry.type === 'inputField')
+                .map((entry) => entry.input);
+            setParameters(uniq([...(action?.parameters ?? []), ...inputFieldParams]));
+        }
+    }, [form, action]);
+    useEffect(() => {
+        const getInitialValues = async () => {
+            if (document && objectId) {
+                const defaultValues = await getDefaultValues(convertDocToEntries(document), document);
+                setFormData(defaultValues);
+                if (!form) {
+                    setForm({
+                        id: 'documentForm',
+                        name: 'Document Form',
+                        entries: convertDocToEntries(document),
+                        objectId: objectId,
+                    });
+                }
+            }
+            else if (form && (instance || !instanceId)) {
+                const defaultValues = await getDefaultValues(form.entries, instance || {});
+                setFormData(defaultValues);
+            }
+        };
+        getInitialValues();
+    }, [form, instance, sanitizedObject]);
+    const uploadDocuments = async (files, metadata) => {
+        const allDocuments = [];
+        const formData = new FormData();
+        for (const [index, file] of files.entries()) {
+            if ('size' in file) {
+                formData.append(`files[${index}]`, file);
+            }
+            else {
+                allDocuments.push(file);
+            }
+        }
+        if (metadata) {
+            for (const [key, value] of Object.entries(metadata)) {
+                formData.append(key, value);
+            }
+        }
+        const docs = await apiServices?.post(getPrefixedUrl(`/objects/${form?.objectId}/instances/${instanceId}/documents`), formData);
+        return allDocuments.concat(docs?.map((doc) => ({
+            id: doc.id,
+            name: doc.name,
+        })) ?? []);
+    };
+    const deleteDocuments = async (submittedFields, requestSuccess, action) => {
+        const documentProperties = action?.parameters
+            ? action.parameters.filter((param) => param.type === 'document')
+            : sanitizedObject?.properties?.filter((prop) => prop.type === 'document');
+        for (const docProperty of documentProperties ?? []) {
+            const savedValue = submittedFields[docProperty.id];
+            const originalValue = instance?.[docProperty.id];
+            const documentsToRemove = requestSuccess
+                ? (originalValue?.filter((file) => !savedValue?.some((f) => f.id === file.id)) ?? [])
+                : (savedValue?.filter((file) => !originalValue?.some((f) => f.id === file.id)) ?? []);
+            for (const doc of documentsToRemove) {
+                try {
+                    await apiServices?.delete(getPrefixedUrl(`/objects/${form?.objectId}/instances/${instanceId}/documents/${doc.id}`));
+                }
+                catch (error) {
+                    if (error) {
+                        setSnackbarError({
+                            showAlert: true,
+                            message: `An error occurred while removing document '${doc.name}'`,
+                            isError: true,
+                        });
+                    }
+                }
+            }
+        }
+    };
+    const onSubmissionSuccess = (updatedInstance) => {
+        setSnackbarError({
+            showAlert: true,
+            message: 'Your changes have been submitted',
+            isError: false,
+        });
+        if (navigationSlug) {
+            if (navigationSlug.includes(':instanceId') && navigationSlug.includes(':documentId')) {
+                navigateTo(`/${appId}/${navigationSlug
+                    .replace(':instanceId', instanceId ?? ':instanceId')
+                    .replace(':documentId', documentId ?? ':documentId')}`);
+            }
+            else if (navigationSlug.includes(':instanceId')) {
+                const navigateInstanceId = action?.type === 'create' ? updatedInstance?.id : instanceId;
+                navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', navigateInstanceId ?? ':instanceId')}`);
+            }
+            else {
+                navigateTo(`/${appId}/${navigationSlug}`);
+            }
+        }
+        setInstance(updatedInstance);
+    };
+    const saveHandler = async (submission) => {
+        if (!form)
+            return;
+        // checks for a file upload and handles getting the new format to upload
+        for (const [key, value] of Object.entries(submission)) {
+            if (isArray(value)) {
+                const fileInArray = value.some((item) => item instanceof File);
+                if (fileInArray) {
+                    try {
+                        const uploadedDocuments = await uploadDocuments(value, {
+                            type: '',
+                            view_permission: '',
+                        });
+                        submission[key] = uploadedDocuments;
+                    }
+                    catch (err) {
+                        if (err) {
+                            setSnackbarError({
+                                showAlert: true,
+                                message: `An error occurred while uploading associated documents`,
+                                isError: true,
+                            });
+                        }
+                        return;
+                    }
+                }
+                // if there are address fields with no value address needs to be set to undefined to be able to submit
+            }
+            else if (typeof value === 'object' && value !== null) {
+                if (Object.values(value).every((v) => v === undefined)) {
+                    submission[key] = undefined;
+                    // only submit the name and id of a related object
+                }
+                else if ('id' in value && 'name' in value) {
+                    submission[key] = pick(value, 'id', 'name');
+                }
+            }
+            else if ((value === '' && !document) || value === undefined) {
+                submission[key] = null;
+            }
+            else if (value instanceof LocalDateTime) {
+                submission[key] = normalizeDateTime(value);
+            }
+        }
+        if (document) {
+            submission = formatDataToDoc(submission);
+        }
+        try {
+            if (dataType === 'documents' && !!document) {
+                try {
+                    await apiServices.patch(getPrefixedUrl(`/objects/${form.objectId}/instances/${instanceId}/documents/${documentId}`), pick(submission, ['metadata']).metadata ?? submission);
+                    setDocument((prev) => ({
+                        ...prev,
+                        metadata: submission.metadata,
+                    }));
+                    setSnackbarError({
+                        showAlert: true,
+                        message: 'Your changes have been submitted',
+                        isError: false,
+                    });
+                }
+                catch (error) {
+                    setSnackbarError({
+                        isError: true,
+                        showAlert: true,
+                        message: error.response?.data?.error?.message ?? 'An error occurred',
+                    });
+                }
+            }
+            else if (action?.type === 'create') {
+                const response = await apiServices.post(getPrefixedUrl(`/objects/${form.objectId}/instances/actions`), {
+                    actionId: form.actionId,
+                    input: pick(submission, sanitizedObject?.properties
+                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                        .map((property) => property.id) ?? []),
+                });
+                if (response) {
+                    onSubmissionSuccess(response);
+                }
+            }
+            else if (instanceId && action) {
+                const response = await objectStore.instanceAction(instanceId, {
+                    actionId: action.id,
+                    input: pick(submission, sanitizedObject?.properties
+                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                        .map((property) => property.id) ?? []),
+                });
+                if (response) {
+                    onSubmissionSuccess(response);
+                    deleteDocuments(submission, !!response, action ?? undefined);
+                }
+            }
+        }
+        catch (error) {
+            setSnackbarError({
+                isError: true,
+                showAlert: true,
+                message: error.response?.data?.error?.message ?? 'An error occurred',
+            });
+        }
+    };
+    const getDefaultValues = async (entries, instanceData) => {
+        const result = {};
+        const processEntries = async (entries) => {
+            if (!entries)
+                return;
+            for (const entry of entries) {
+                if (entry.type === 'sections' || entry.type === 'columns') {
+                    const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+                    for (const subEntry of subEntries) {
+                        if (subEntry.entries) {
+                            const nested = await getDefaultValues(subEntry.entries, instanceData);
+                            merge(result, nested);
+                        }
+                    }
+                }
+                if ((entry.type === 'input' || entry.type === 'inputField') &&
+                    isAddressProperty(entry.parameterId || entry.input?.id)) {
+                    const fieldId = getEntryId(entry);
+                    if (!fieldId)
+                        return;
+                    const fieldValue = get(instanceData, fieldId);
+                    if ((isEmpty(instanceData) ||
+                        fieldValue === undefined ||
+                        fieldValue === null ||
+                        fieldValue === '') &&
+                        entry?.display?.defaultValue &&
+                        parameters) {
+                        const defaultValuesArray = await evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
+                        if (isArray(defaultValuesArray)) {
+                            defaultValuesArray.forEach(({ fieldId, fieldValue }) => {
+                                set(result, fieldId, fieldValue);
+                            });
+                        }
+                    }
+                    else if (fieldValue !== undefined && fieldValue !== null) {
+                        set(result, fieldId, fieldValue);
+                    }
+                }
+                else if (entry.type !== 'sections' && entry.type !== 'columns' && entry.type !== 'content') {
+                    const fieldId = entry.type === 'input'
+                        ? entry.parameterId
+                        : entry.type === 'inputField'
+                            ? entry.input?.id
+                            : undefined;
+                    if (fieldId) {
+                        const fieldValue = instanceData?.[fieldId] ??
+                            instanceData?.metadata?.[fieldId];
+                        const parameter = parameters?.find((param) => param.id === fieldId);
+                        if (entry.type !== 'readonlyField' && isEmptyWithDefault(fieldValue, entry, instanceData)) {
+                            if (fieldId && parameters && parameters.length > 0) {
+                                const defaultValuesArray = await evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
+                                for (const { fieldId, fieldValue } of defaultValuesArray) {
+                                    const parameter = parameters?.find((param) => param.id === fieldId);
+                                    if (parameter?.type === 'object') {
+                                        const dependentFields = await processValueUpdate(form?.entries, parameters, fieldValue, apiServices, fieldId, formData, userAccount);
+                                        for (const field of dependentFields) {
+                                            set(result, field.fieldId, field.fieldValue);
+                                        }
+                                    }
+                                    set(result, fieldId, fieldValue);
+                                }
+                            }
+                        }
+                        else if (parameter?.type === 'boolean' && (fieldValue === undefined || fieldValue === null)) {
+                            result[fieldId] = false;
+                        }
+                        else if (fieldValue !== undefined && fieldValue !== null) {
+                            result[fieldId] = fieldValue;
+                        }
+                    }
+                }
+            }
+        };
+        await processEntries(entries);
+        return result;
+    };
+    async function onChange(id, value) {
+        const parameter = parameters?.find((param) => param.id === id);
+        const entries = getUnnestedEntries(form.entries);
+        const isReadOnlyField = entries.some((e) => e.type === 'readonlyField' && e.propertyId === id) &&
+            !entries.some((e) => (e.type === 'input' && e.parameterId === id) || (e.type === 'inputField' && e.input.id === id));
+        if (isReadOnlyField)
+            return;
+        if (parameter) {
+            if (parameter.type === 'object' && parameters && parameters.length > 0) {
+                // On change of a related object, update default values dependent on that object
+                const dependentFields = await processValueUpdate(form?.entries, parameters, value, apiServices, id, formData, userAccount);
+                for (const field of dependentFields) {
+                    onChange(field.fieldId, field.fieldValue);
+                }
+            }
+            else if (parameter.type === 'string' && parameter.enum && value) {
+                // If a single select property has a sortBy option that isn't NONE the value gets spread and doesn't save properly,
+                // this will make it correctly save the value
+                value = value.value ? value.value : value;
+            }
+        }
+        if (!isEqual(value, get(formData, id))) {
+            setFormData((prev) => {
+                const newData = { ...prev };
+                set(newData, id, value);
+                return newData;
+            });
+        }
+    }
+    function onCancel() {
+        (async () => {
+            if (document) {
+                const defaultValues = await getDefaultValues(convertDocToEntries(document), document);
+                setFormData(defaultValues);
+            }
+            else if (form) {
+                const defaultValues = await getDefaultValues(form.entries, instance || {});
+                setFormData(defaultValues);
+            }
+        })();
+    }
+    const isLoading = (instanceId && !formData && !document) || !form || !sanitizedObject;
+    return !error ? (React.createElement(Box, { sx: {
+            backgroundColor: '#ffffff',
+            borderRadius: '6px',
+            padding: '0px',
+            border: !isLoading ? '1px solid #dbe0e4' : undefined,
+        } },
+        !isLoading ? (React.createElement(React.Fragment, null,
+            React.createElement(FormRenderer, { onSubmit: saveHandler, hideButtons: document && !hasDocumentUpdateAccess, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, stickyFooter: stickyFooter, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, onCancel: onCancel }))) : (React.createElement(Box, { sx: { padding: '20px' } },
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '33%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
+            React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
+                React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } }),
+                React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))),
+        React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
+                isError: snackbarError.isError,
+                showAlert: false,
+            }), message: snackbarError.message, error: snackbarError.isError }))) : (React.createElement(ErrorComponent, { colspan: props.colspan, code: error === 403 ? 'AccessDenied' : error === 404 ? 'NotFound' : 'Misconfigured' }));
+}
+export default FormRendererContainer;

package/dist/published/components/custom/FormV2/components/DefaultValues.d.ts

@@ -0,0 +1,10 @@
+import { ApiServices, FormEntry, InputField, InputParameter, InputParameterReference, ObjectInstance, Reference, UserAccount } from '@evoke-platform/context';
+import { FieldValues } from 'react-hook-form';
+export declare function evalDefaultVals(parameters: InputParameter[], entry: InputParameterReference | InputField, fieldValue: unknown, fieldId: string, apiServices: ApiServices, userAccount?: UserAccount, formValues?: FieldValues, updatedRelatedObjectValue?: ObjectInstance | null | Reference): Promise<{
+    fieldId: string;
+    fieldValue: unknown;
+}[]>;
+export declare function processValueUpdate(entries: FormEntry[] | undefined, parameters: InputParameter[], updatedRelatedObjectValue: ObjectInstance | null | Reference, apiServices: ApiServices, changedEntryId?: string, formValues?: FieldValues, userAccount?: UserAccount): Promise<{
+    fieldId: string;
+    fieldValue: unknown;
+}[]>;

package/dist/published/components/custom/FormV2/components/DefaultValues.js

@@ -0,0 +1,208 @@
+import { isArray, isEmpty, uniq } from 'lodash';
+import { DateTime } from 'luxon';
+import { getEntryId, getPrefixedUrl, isAddressProperty } from './utils';
+export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, formValues, updatedRelatedObjectValue) {
+    const updates = [];
+    const parameter = parameters.find((param) => param.id === fieldId);
+    const defaultValue = entry.display?.defaultValue;
+    // Handles dynamic default values
+    // Identifies a combination of static and dynamic values mixed in the same array,
+    // Example of mixed values: ["{{input.relatedObject.nestedProperty}}", "{{input.secondRelatedObject.nestedProperty}}", "option1"]
+    if (isArray(defaultValue) && defaultValue.some((item) => /^{{.*}}$/.test(item))) {
+        const staticValues = defaultValue.filter((item) => !/^{{.*}}$/.test(item));
+        for (const item of defaultValue.filter((item) => /^{{.*}}$/.test(item))) {
+            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+            const groups = regex.exec(item)?.groups;
+            if (groups?.relatedObjectProperty && groups?.nestedProperty) {
+                const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
+                let relatedObject = updatedRelatedObjectValue;
+                if (!relatedObject && !isEmpty(formValues)) {
+                    relatedObject = formValues[groups.relatedObjectProperty];
+                }
+                if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
+                    fieldValue = uniq([
+                        ...staticValues,
+                        ...(isArray(updatedRelatedObjectValue[groups.nestedProperty])
+                            ? updatedRelatedObjectValue[groups.nestedProperty]
+                            : []),
+                    ]);
+                    updates.push({ fieldId, fieldValue });
+                }
+                else if (relatedObject && relatedObject.id && relatedObjectParameter) {
+                    const instance = await new Promise((resolve) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                            if (error) {
+                                console.error(error);
+                                return resolve(undefined);
+                            }
+                            resolve(instance);
+                        });
+                    });
+                    if (instance) {
+                        fieldValue = uniq([
+                            ...staticValues,
+                            ...(isArray(instance[groups.nestedProperty])
+                                ? instance[groups.nestedProperty]
+                                : []),
+                        ]);
+                        updates.push({ fieldId, fieldValue });
+                    }
+                }
+                else {
+                    updates.push({ fieldId, fieldValue: staticValues });
+                }
+            }
+            else {
+                staticValues.length > 0 && updates.push({ fieldId, fieldValue: staticValues });
+            }
+        }
+        // Identifies dynamic values using Handlebars syntax: {{input.relatedObject.nestedProperty}} or {{input.relatedObject.address.nestedAddressProperty}}
+    }
+    else if (typeof defaultValue === 'string' && /^{{.*}}$/.test(defaultValue)) {
+        if (isAddressProperty(fieldId)) {
+            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<addressProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedAddressProperty>line1|line2|city|county|state|zipCode)}}$/;
+            const groups = regex.exec(defaultValue)?.groups;
+            if (groups?.relatedObjectProperty && groups?.addressProperty && groups?.nestedAddressProperty) {
+                const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
+                let relatedObject = updatedRelatedObjectValue;
+                if (!relatedObject && !isEmpty(formValues)) {
+                    relatedObject = formValues[groups.relatedObjectProperty];
+                }
+                if (updatedRelatedObjectValue?.[groups.addressProperty]?.[groups.nestedAddressProperty]) {
+                    fieldValue = updatedRelatedObjectValue?.[groups.addressProperty]?.[groups.nestedAddressProperty];
+                    updates.push({ fieldId, fieldValue });
+                }
+                else if (relatedObject && relatedObject.id && relatedObjectParameter) {
+                    const instance = await new Promise((resolve) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                            if (error) {
+                                console.error(error);
+                                return resolve(undefined);
+                            }
+                            resolve(instance);
+                        });
+                    });
+                    // Clear dependent fields only if value is explicitly null (user cleared it).
+                    // If updatedRelatedObjectValue is undefined (not triggered by onChange), use the value from the instance.
+                    if (updatedRelatedObjectValue === null) {
+                        updates.push({ fieldId, fieldValue: '' });
+                    }
+                    else if (instance) {
+                        fieldValue = instance?.[groups.addressProperty]?.[groups.nestedAddressProperty];
+                        updates.push({ fieldId, fieldValue });
+                    }
+                }
+            }
+        }
+        else {
+            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+            const groups = regex.exec(defaultValue)?.groups;
+            if (groups?.relatedObjectProperty && groups?.nestedProperty) {
+                const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
+                let relatedObject = updatedRelatedObjectValue;
+                if (!relatedObject && !isEmpty(formValues)) {
+                    relatedObject = formValues[groups.relatedObjectProperty];
+                }
+                if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
+                    fieldValue = updatedRelatedObjectValue[groups.nestedProperty];
+                    updates.push({ fieldId, fieldValue });
+                }
+                else if (relatedObject?.id && relatedObjectParameter) {
+                    const instance = await new Promise((resolve) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                            if (error) {
+                                console.error(error);
+                                return resolve(undefined);
+                            }
+                            resolve(instance);
+                        });
+                    });
+                    // Clear dependent fields only if value is explicitly null (user cleared it).
+                    // If updatedRelatedObjectValue is undefined (not triggered by onChange), use the value from the instance.
+                    if (updatedRelatedObjectValue === null) {
+                        updates.push({ fieldId, fieldValue: null });
+                    }
+                    else if (instance) {
+                        fieldValue = instance?.[groups.nestedProperty] || null;
+                        updates.push({ fieldId, fieldValue });
+                    }
+                }
+            }
+        }
+        // all other default values set here
+    }
+    else if (parameter?.type !== 'object') {
+        let updatedValue = defaultValue;
+        // handles current default values ie: "Current logged in user", "Today" etc.
+        if (updatedValue === 'currentDate') {
+            updatedValue = DateTime.now().toISODate();
+        }
+        else if (updatedValue === 'currentTime') {
+            updatedValue = DateTime.now().toISOTime({
+                includeOffset: false,
+                suppressMilliseconds: true,
+            });
+        }
+        else if (updatedValue === 'currentDateTime') {
+            updatedValue = DateTime.now().toISO();
+        }
+        else if (updatedValue === '$_CURRENT') {
+            updatedValue = { name: userAccount?.name, id: userAccount?.id };
+        }
+        updates.push({ fieldId, fieldValue: updatedValue });
+    }
+    return updates;
+}
+export async function processValueUpdate(entries, parameters, updatedRelatedObjectValue, apiServices, changedEntryId, formValues, userAccount) {
+    const updates = [];
+    for (const entry of entries || []) {
+        if (entry.type === 'sections' || entry.type === 'columns') {
+            const subEntries = entry.type === 'sections' ? entry.sections : entry.columns;
+            for (const subEntry of subEntries) {
+                const subUpdates = await processValueUpdate(subEntry.entries, parameters, updatedRelatedObjectValue, apiServices, changedEntryId, formValues, userAccount);
+                updates.push(...subUpdates);
+            }
+        }
+        if ((entry.type === 'input' || entry.type === 'inputField') && entry?.display?.defaultValue) {
+            const parameterId = getEntryId(entry);
+            if (!parameterId)
+                return [];
+            if (isAddressProperty(parameterId)) {
+                const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<addressProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedAddressProperty>line1|line2|city|county|state|zipCode)}}$/;
+                const groups = regex.exec(entry.display.defaultValue)?.groups;
+                const [addressObject, addressField] = parameterId.split('.');
+                if (groups?.relatedObjectProperty &&
+                    groups?.addressProperty &&
+                    groups?.nestedAddressProperty &&
+                    changedEntryId === groups.relatedObjectProperty) {
+                    const result = await evalDefaultVals(parameters, entry, formValues?.[addressObject]?.[addressField], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    updates.push(...result);
+                }
+            }
+            else if (isArray(entry.display.defaultValue) &&
+                entry.display.defaultValue.some((item) => /^{{.*}}$/.test(item))) {
+                for (const item of entry.display.defaultValue.filter((item) => /^{{.*}}$/.test(item))) {
+                    const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+                    const groups = regex.exec(item)?.groups;
+                    if (groups?.relatedObjectProperty &&
+                        groups?.nestedProperty &&
+                        changedEntryId === groups.relatedObjectProperty) {
+                        const result = await evalDefaultVals(parameters, entry, entry.display.defaultValue, parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                        updates.push(...result);
+                    }
+                }
+            }
+            else {
+                const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
+                const groups = regex.exec(entry.display.defaultValue)?.groups;
+                if (groups?.relatedObjectProperty &&
+                    groups?.nestedProperty &&
+                    changedEntryId === groups.relatedObjectProperty) {
+                    const result = await evalDefaultVals(parameters, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    updates.push(...result);
+                }
+            }
+        }
+    }
+    return updates;
+}

package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js

@@ -18,7 +18,7 @@ import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
 import FormSections from './FormSections';
-import { entryIsVisible, fetchCollectionData, getEntryId, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
+import { docProperties, entryIsVisible, fetchCollectionData, getEntryId, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, fieldHeight, errors, validation) {
     return {
         inputId: entryId,
@@ -38,7 +38,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
     };
 }
 export function RecursiveEntryRenderer(props) {
-    const { handleChange, errors, showSubmitError, fieldHeight, instance, richTextEditor, expandedSections, setExpandedSections, expandAll, setExpandAll, parameters, entry, triggerFieldReset, } = props;
+    const { handleChange, errors, showSubmitError, fieldHeight, instance, richTextEditor, expandedSections, setExpandedSections, expandAll, setExpandAll, parameters, entry, triggerFieldReset, isDocument, } = props;
     const { fetchedOptions, setFetchedOptions, object, getValues } = useFormContext();
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, getValues(), instance)) {
@@ -58,9 +58,11 @@ export function RecursiveEntryRenderer(props) {
             def = parameters?.find((param) => param.id === entry.parameterId);
         }
         else if (entry.type === 'readonlyField') {
-            def = isAddressProperty(entry.propertyId)
-                ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
-                : object?.properties?.find((prop) => prop.id === entry.propertyId);
+            def = isDocument
+                ? docProperties.find((prop) => prop.id === entry.propertyId)
+                : isAddressProperty(entry.propertyId)
+                    ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
+                    : object?.properties?.find((prop) => prop.id === entry.propertyId);
         }
         else if (entry.type === 'inputField') {
             def = entry.input;

package/dist/published/components/custom/FormV2/components/types.d.ts

@@ -104,6 +104,7 @@ export type EntryRendererProps = BaseProps & {
     parameters?: InputParameter[];
     readOnly?: boolean;
     triggerFieldReset?: boolean;
+    isDocument?: boolean;
 };
 export type SectionsProps = {
     entry: Sections;
@@ -120,3 +121,13 @@ export type SectionsProps = {
     triggerFieldReset?: boolean;
     showSubmitError?: boolean;
 };
+export type DocumentData = {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    versionId: string;
+    type: string;
+    view_permission: string;
+};

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -1,8 +1,8 @@
-import { ApiServices, Column, Columns, FormEntry, InputParameter, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
+import { ApiServices, Column, Columns, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { AutocompleteOption } from '../../../core';
-import { Document } from './types';
+import { Document, DocumentData } from './types';
 export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
 export declare const normalizeDateTime: (dateTime: LocalDateTime) => string;
 export declare function isAddressProperty(key: string): boolean;
@@ -45,3 +45,19 @@ export declare const convertDocToParameters: (obj: Document) => InputParameter[]
 export declare const propertyToParameter: (property: Property) => InputParameter;
 export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];
 export declare const convertPropertiesToParams: (object: Obj) => InputParameter[] | undefined;
+export declare function convertDocToEntries(document: Document): FormEntry[];
+export declare function formatDataToDoc(data: DocumentData): {
+    id: string;
+    name: string;
+    contentType: string;
+    size: number;
+    uploadedDate: string;
+    versionId: string;
+    metadata: {
+        type: string;
+        view_permission: string;
+    };
+};
+export declare function getUnnestedEntries(entries: FormEntry[]): FormEntry[];
+export declare const isEmptyWithDefault: (fieldValue: unknown, entry: InputParameterReference | InputField, instance: Record<string, unknown> | object) => boolean | "" | 0 | undefined;
+export declare const docProperties: Property[];

package/dist/published/components/custom/FormV2/components/utils.js

@@ -1,6 +1,6 @@
 import { LocalDateTime } from '@js-joda/core';
 import jsonLogic from 'json-logic-js';
-import { get, isArray, isObject, omit, startCase, transform } from 'lodash';
+import { get, isArray, isEmpty, isObject, omit, startCase, transform } from 'lodash';
 import { DateTime } from 'luxon';
 import Handlebars from 'no-eval-handlebars';
 import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB } from 'react-querybuilder';
@@ -389,13 +389,7 @@ export const convertDocToParameters = (obj) => {
                 },
             ];
         }
-        return [
-            {
-                id: key,
-                name: startCase(key),
-                type: 'string',
-            },
-        ];
+        return [];
     });
 };
 export const propertyToParameter = (property) => {
@@ -432,3 +426,139 @@ export const convertPropertiesToParams = (object) => {
         .sort((a, b) => a.name.localeCompare(b.name))
         .map(propertyToParameter);
 };
+export function convertDocToEntries(document) {
+    const entries = [
+        {
+            type: 'readonlyField',
+            propertyId: 'id',
+            display: {
+                label: 'Id',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'name',
+            display: {
+                label: 'Name',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'contentType',
+            display: {
+                label: 'Content Type',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'size',
+            display: {
+                label: 'Size',
+            },
+        },
+        {
+            type: 'readonlyField',
+            propertyId: 'uploadedDate',
+            display: {
+                label: 'Uploaded Date',
+            },
+        },
+    ];
+    if (!isEmpty(document.metadata)) {
+        entries.push({
+            type: 'input',
+            parameterId: 'type',
+            display: {
+                label: 'Type',
+            },
+        }, {
+            type: 'input',
+            parameterId: 'view_permission',
+            display: {
+                label: 'View Permission',
+                choicesDisplay: {
+                    type: 'dropdown',
+                    sortBy: 'ASC',
+                },
+            },
+            enumWithLabels: [
+                { label: 'Public', value: 'Public' },
+                { label: 'Private', value: 'Private' },
+                { label: 'Portal', value: 'Portal' },
+            ],
+        });
+    }
+    entries.push({
+        type: 'readonlyField',
+        propertyId: 'versionId',
+        display: {
+            label: 'Version Id',
+        },
+    });
+    return entries;
+}
+export function formatDataToDoc(data) {
+    return {
+        id: data.id,
+        name: data.name,
+        contentType: data.contentType,
+        size: data.size,
+        uploadedDate: data.uploadedDate,
+        versionId: data.versionId,
+        metadata: {
+            type: data.type,
+            view_permission: data.view_permission,
+        },
+    };
+}
+export function getUnnestedEntries(entries) {
+    return entries?.flatMap((entry) => {
+        if (entry.type === 'columns' && isArray(entry.columns)) {
+            return entry.columns.flatMap((column) => isArray(column.entries) ? getUnnestedEntries(column.entries) : []);
+        }
+        if (entry.type === 'sections' && isArray(entry.sections)) {
+            return entry.sections.flatMap((section) => isArray(section.entries) ? getUnnestedEntries(section.entries) : []);
+        }
+        return [entry];
+    });
+}
+export const isEmptyWithDefault = (fieldValue, entry, instance) => {
+    return ((isEmpty(instance) ||
+        fieldValue === undefined ||
+        fieldValue === null ||
+        (isArray(fieldValue) && fieldValue.length === 0)) &&
+        entry.display?.defaultValue &&
+        (!isObject(entry.display?.defaultValue) || !isEmpty(entry.display?.defaultValue)));
+};
+export const docProperties = [
+    {
+        id: 'id',
+        name: 'id',
+        type: 'string',
+    },
+    {
+        id: 'name',
+        name: 'Name',
+        type: 'string',
+    },
+    {
+        id: 'contentType',
+        name: 'contentType',
+        type: 'string',
+    },
+    {
+        id: 'size',
+        name: 'size',
+        type: 'string',
+    },
+    {
+        id: 'uploadedDate',
+        name: 'uploadedDate',
+        type: 'string',
+    },
+    {
+        id: 'versionId',
+        name: 'versionId',
+        type: 'string',
+    },
+];

package/dist/published/components/custom/FormV2/index.d.ts

@@ -1 +1,2 @@
 export { default as FormRenderer } from './FormRenderer';
+export { default as FormRendererContainer } from './FormRendererContainer';

package/dist/published/components/custom/FormV2/index.js

@@ -1 +1,2 @@
 export { default as FormRenderer } from './FormRenderer';
+export { default as FormRendererContainer } from './FormRendererContainer';

package/dist/published/components/custom/index.d.ts

@@ -5,7 +5,7 @@ export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export type { FormRef } from './Form';
 export { FormField } from './FormField';
-export { FormRenderer } from './FormV2';
+export { FormRenderer, FormRendererContainer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

package/dist/published/components/custom/index.js

@@ -4,7 +4,7 @@ export { DataGrid } from './DataGrid';
 export { ErrorComponent } from './ErrorComponent';
 export { Form } from './Form';
 export { FormField } from './FormField';
-export { FormRenderer } from './FormV2';
+export { FormRenderer, FormRendererContainer } from './FormV2';
 export { HistoryLog } from './HistoryLog';
 export { MenuBar } from './Menubar';
 export { MultiSelect } from './MultiSelect';

package/dist/published/index.d.ts

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMe
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export type { FormRef } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';

package/dist/published/index.js

@@ -2,7 +2,7 @@ export { ClickAwayListener, createTheme, darken, lighten, styled, Toolbar, useMe
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.7.0-testing.3",
+    "version": "1.7.0-testing.4",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",