@evoke-platform/ui-components 1.10.0-dev.33 → 1.10.0-dev.34

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

@@ -400,9 +400,31 @@ const CriteriaBuilder = (props) => {
     const fields = useMemo(() => {
         return properties
             .filter(({ type }) => type !== 'collection')
-            .map((property) => {
+            .flatMap((property) => {
+            if (property.type === 'object') {
+                const result = [
+                    {
+                        name: `${property.id}.id`,
+                        label: `${property.name} ID`,
+                        inputType: property.type,
+                    },
+                    {
+                        name: `${property.id}.name`,
+                        label: `${property.name} Name`,
+                        inputType: property.type,
+                    },
+                ];
+                if (!property.objectId) {
+                    result.push({
+                        name: `${property.id}.objectId`,
+                        label: `${property.name} Object ID`,
+                        inputType: property.type,
+                    });
+                }
+                return result;
+            }
             return {
-                name: property.type === 'object' ? `${property.id}.id` : property.id,
+                name: property.id,
                 label: property.name,
                 inputType: property.type,
                 ...(property.enum && {

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.test.js

@@ -56,6 +56,17 @@ const mockProperties = [
         name: 'Boolean',
         type: 'boolean',
     },
+    {
+        id: 'regularRelatedObject',
+        name: 'Regular Related Object',
+        type: 'object',
+        objectId: 'relatedObjectId',
+    },
+    {
+        id: 'dynamicRelatedObject',
+        name: 'Dynamic Related Object',
+        type: 'object',
+    },
 ];
 describe('CriteriaBuilder', () => {
     // Mock function for setCriteria
@@ -64,6 +75,40 @@ describe('CriteriaBuilder', () => {
         // Reset the mock before each test
         setCriteriaMock.mockReset();
     });
+    describe('when passed regular related object fields', () => {
+        it('should render the field ID', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'regularRelatedObject.id': 'relatedInstanceId',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Regular Related Object ID');
+        });
+        it('should render the field Name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'regularRelatedObject.name': 'relatedInstanceName',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Regular Related Object Name');
+        });
+    });
+    describe('when passed dynamic related object fields', () => {
+        it('should render the field ID', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'dynamicRelatedObject.id': 'relatedInstanceId',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Dynamic Related Object ID');
+        });
+        it('should render the field Name', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'dynamicRelatedObject.name': 'relatedInstanceName',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Dynamic Related Object Name');
+        });
+        it('should render the field Object ID', () => {
+            render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {
+                    'dynamicRelatedObject.objectId': 'relatedInstanceObjectId',
+                }, setCriteria: setCriteriaMock }));
+            expect(screen.getByRole('combobox', { name: /select property/i })).toHaveValue('Dynamic Related Object Object ID');
+        });
+    });
     describe('when passed single-select fields', () => {
         it('should render the field name', () => {
             render(React.createElement(CriteriaBuilder, { properties: mockProperties, criteria: {

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

@@ -1,6 +1,6 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
 import axios from 'axios';
-import { cloneDeep, get, isArray, isEmpty, isEqual, merge, omit, pick, set, uniq } from 'lodash';
+import { cloneDeep, get, isArray, isEmpty, isEqual, omit, pick, set, uniq } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
@@ -278,100 +278,83 @@ function FormRendererContainer(props) {
     };
     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);
-                        }
+        const unnestedEntries = getUnnestedEntries(entries);
+        for (const entry of unnestedEntries) {
+            if ((entry.type === 'input' || entry.type === 'inputField') &&
+                isAddressProperty(entry.parameterId || entry.input?.id)) {
+                const fieldId = getEntryId(entry);
+                if (!fieldId)
+                    continue;
+                const fieldValue = get(instanceData, fieldId);
+                if ((isEmpty(instanceData) || fieldValue === undefined || fieldValue === null || fieldValue === '') &&
+                    entry?.display?.defaultValue &&
+                    parameters) {
+                    const defaultValuesArray = await evalDefaultVals(parameters, unnestedEntries, entry, fieldValue, fieldId, apiServices, userAccount, instanceData);
+                    if (isArray(defaultValuesArray)) {
+                        defaultValuesArray.forEach(({ fieldId, fieldValue }) => {
+                            set(result, fieldId, fieldValue);
+                        });
                     }
                 }
-                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 (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 (associatedObject?.propertyId === fieldId &&
-                            associatedObject?.instanceId &&
-                            parameter &&
-                            action?.type === 'create') {
-                            try {
-                                const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`));
-                                result[associatedObject.propertyId] = instance;
-                            }
-                            catch (error) {
-                                console.error(error);
-                            }
+            }
+            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 (associatedObject?.propertyId === fieldId &&
+                        associatedObject?.instanceId &&
+                        parameter &&
+                        action?.type === 'create') {
+                        try {
+                            const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`));
+                            result[associatedObject.propertyId] = instance;
                         }
-                        else 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, formDataRef.current, userAccount);
-                                        for (const field of dependentFields) {
-                                            set(result, field.fieldId, field.fieldValue);
-                                        }
+                        catch (error) {
+                            console.error(error);
+                        }
+                    }
+                    else if (entry.type !== 'readonlyField' && isEmptyWithDefault(fieldValue, entry, instanceData)) {
+                        if (fieldId && parameters && parameters.length > 0) {
+                            const defaultValuesArray = await evalDefaultVals(parameters, unnestedEntries, 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(unnestedEntries, parameters, fieldValue, apiServices, fieldId, formDataRef.current, userAccount);
+                                    for (const field of dependentFields) {
+                                        set(result, field.fieldId, field.fieldValue);
                                     }
-                                    set(result, fieldId, fieldValue);
                                 }
+                                set(result, fieldId, fieldValue);
                             }
                         }
-                        else if (parameter?.type === 'boolean' && (fieldValue === undefined || fieldValue === null)) {
-                            result[fieldId] = false;
-                        }
-                        else if (fieldValue !== undefined && fieldValue !== null) {
-                            if (parameter?.type === 'richText' && typeof fieldValue === 'string') {
-                                let RTFFieldValue = fieldValue;
-                                if (!fieldValue.trim().startsWith('{\\rtf')) {
-                                    RTFFieldValue = plainTextToRtf(fieldValue);
-                                }
-                                result[fieldId] = RTFFieldValue;
-                            }
-                            else {
-                                result[fieldId] = fieldValue;
+                    }
+                    else if (parameter?.type === 'boolean' && (fieldValue === undefined || fieldValue === null)) {
+                        result[fieldId] = false;
+                    }
+                    else if (fieldValue !== undefined && fieldValue !== null) {
+                        if (parameter?.type === 'richText' && typeof fieldValue === 'string') {
+                            let RTFFieldValue = fieldValue;
+                            if (!fieldValue.trim().startsWith('{\\rtf')) {
+                                RTFFieldValue = plainTextToRtf(fieldValue);
                             }
+                            result[fieldId] = RTFFieldValue;
+                        }
+                        else {
+                            result[fieldId] = fieldValue;
                         }
                     }
                 }
             }
-        };
-        await processEntries(entries);
+        }
         return result;
     };
     const handleAutosave = async (fieldId) => {
@@ -423,7 +406,7 @@ function FormRendererContainer(props) {
         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, formDataRef.current, userAccount);
+                const dependentFields = await processValueUpdate(entries, parameters, value, apiServices, id, formDataRef.current, userAccount);
                 for (const field of dependentFields) {
                     onChange(field.fieldId, field.fieldValue);
                 }

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

@@ -1,10 +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<{
+export declare function evalDefaultVals(parameters: InputParameter[], unnestedEntries: FormEntry[], 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<{
+export declare function processValueUpdate(unnestedEntries: FormEntry[], 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

@@ -1,7 +1,7 @@
 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) {
+export async function evalDefaultVals(parameters, unnestedEntries, entry, fieldValue, fieldId, apiServices, userAccount, formValues, updatedRelatedObjectValue) {
     const updates = [];
     const parameter = parameters.find((param) => param.id === fieldId);
     const defaultValue = entry.display?.defaultValue;
@@ -15,9 +15,9 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
             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];
+                let relatedObjectInstance = updatedRelatedObjectValue;
+                if (!relatedObjectInstance && !isEmpty(formValues)) {
+                    relatedObjectInstance = formValues[groups.relatedObjectProperty];
                 }
                 if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
                     fieldValue = uniq([
@@ -28,9 +28,14 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
                     ]);
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObject && relatedObject.id && relatedObjectParameter) {
+                else if (relatedObjectInstance?.id && relatedObjectParameter) {
+                    let relatedObjectId = relatedObjectParameter.objectId;
+                    if (!relatedObjectId) {
+                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
+                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
+                    }
                     const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
                             if (error) {
                                 console.error(error);
                                 return resolve(undefined);
@@ -64,17 +69,22 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
             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];
+                let relatedObjectInstance = updatedRelatedObjectValue;
+                if (!relatedObjectInstance && !isEmpty(formValues)) {
+                    relatedObjectInstance = 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) {
+                else if (relatedObjectInstance?.id && relatedObjectParameter) {
+                    let relatedObjectId = relatedObjectParameter.objectId;
+                    if (!relatedObjectId) {
+                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
+                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
+                    }
                     const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
                             if (error) {
                                 console.error(error);
                                 return resolve(undefined);
@@ -99,17 +109,22 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
             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];
+                let relatedObjectInstance = updatedRelatedObjectValue;
+                if (!relatedObjectInstance && !isEmpty(formValues)) {
+                    relatedObjectInstance = formValues[groups.relatedObjectProperty];
                 }
                 if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
                     fieldValue = updatedRelatedObjectValue[groups.nestedProperty];
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObject?.id && relatedObjectParameter) {
+                else if (relatedObjectInstance?.id && relatedObjectParameter) {
+                    let relatedObjectId = relatedObjectParameter.objectId;
+                    if (!relatedObjectId) {
+                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
+                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
+                    }
                     const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectParameter.objectId}/instances/${relatedObject?.id}`), (error, instance) => {
+                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
                             if (error) {
                                 console.error(error);
                                 return resolve(undefined);
@@ -153,16 +168,9 @@ export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, ap
     }
     return updates;
 }
-export async function processValueUpdate(entries, parameters, updatedRelatedObjectValue, apiServices, changedEntryId, formValues, userAccount) {
+export async function processValueUpdate(unnestedEntries, 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);
-            }
-        }
+    for (const entry of unnestedEntries) {
         if ((entry.type === 'input' || entry.type === 'inputField') && entry?.display?.defaultValue) {
             const parameterId = getEntryId(entry);
             if (!parameterId)
@@ -175,7 +183,7 @@ export async function processValueUpdate(entries, parameters, updatedRelatedObje
                     groups?.addressProperty &&
                     groups?.nestedAddressProperty &&
                     changedEntryId === groups.relatedObjectProperty) {
-                    const result = await evalDefaultVals(parameters, entry, formValues?.[addressObject]?.[addressField], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    const result = await evalDefaultVals(parameters, unnestedEntries, entry, formValues?.[addressObject]?.[addressField], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
                     updates.push(...result);
                 }
             }
@@ -187,7 +195,7 @@ export async function processValueUpdate(entries, parameters, updatedRelatedObje
                     if (groups?.relatedObjectProperty &&
                         groups?.nestedProperty &&
                         changedEntryId === groups.relatedObjectProperty) {
-                        const result = await evalDefaultVals(parameters, entry, entry.display.defaultValue, parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                        const result = await evalDefaultVals(parameters, unnestedEntries, entry, entry.display.defaultValue, parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
                         updates.push(...result);
                     }
                 }
@@ -198,7 +206,7 @@ export async function processValueUpdate(entries, parameters, updatedRelatedObje
                 if (groups?.relatedObjectProperty &&
                     groups?.nestedProperty &&
                     changedEntryId === groups.relatedObjectProperty) {
-                    const result = await evalDefaultVals(parameters, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    const result = await evalDefaultVals(parameters, unnestedEntries, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
                     updates.push(...result);
                 }
             }

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -10,7 +10,7 @@ import { Box } from '../../../../../layout';
 import { getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
-    const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, } = props;
+    const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, relatedObjectId, } = props;
     const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
@@ -88,7 +88,7 @@ const ObjectPropertyInput = (props) => {
             });
             if (updatedFilter.where) {
                 setLoadingOptions(true);
-                apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), async (error, instances) => {
+                apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), async (error, instances) => {
                     if (error) {
                         console.error(error);
                         setLoadingOptions(false);
@@ -114,7 +114,7 @@ const ObjectPropertyInput = (props) => {
                 });
             }
         }
-    }, [fieldDefinition, defaultValueCriteria, sortBy, orderBy]);
+    }, [relatedObjectId, defaultValueCriteria, sortBy, orderBy]);
     const getDropdownOptions = useCallback(() => {
         if (((!fetchedOptions?.[`${id}Options`] ||
             (fetchedOptions?.[`${id}Options`]).length === 0) &&
@@ -129,7 +129,7 @@ const ObjectPropertyInput = (props) => {
                 direction: 'asc',
             };
             updatedFilter.order = `${propertyId} ${direction}`;
-            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
+            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
                 if (error) {
                     console.error(error);
                     setLoadingOptions(false);
@@ -143,7 +143,7 @@ const ObjectPropertyInput = (props) => {
             });
         }
     }, [
-        fieldDefinition,
+        relatedObjectId,
         updatedCriteria,
         layout,
         fetchedOptions?.[`${id}Options`],
@@ -183,10 +183,10 @@ const ObjectPropertyInput = (props) => {
             }
         };
         fetchForm();
-    }, [action, formId, id, fieldDefinition.objectId, apiServices, fetchedOptions]);
+    }, [action, formId, id, apiServices, fetchedOptions]);
     useEffect(() => {
         if (!fetchedOptions[`${id}RelatedObject`]) {
-            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), (error, object) => {
+            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/effective?sanitizedVersion=true`), (error, object) => {
                 if (error) {
                     console.error(error);
                 }
@@ -195,15 +195,15 @@ const ObjectPropertyInput = (props) => {
                 }
             });
         }
-    }, [fieldDefinition.objectId, fetchedOptions, id]);
+    }, [relatedObjectId, fetchedOptions, id]);
     useEffect(() => {
         (async () => {
             if (parameters && fetchedOptions[`${id}NavigationSlug`] === undefined) {
                 const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
-                if (fieldDefinition.objectId && pages[fieldDefinition.objectId]) {
-                    setNavigationSlug(pages[fieldDefinition.objectId]);
+                if (relatedObjectId && pages[relatedObjectId]) {
+                    setNavigationSlug(pages[relatedObjectId]);
                     setFetchedOptions({
-                        [`${id}NavigationSlug`]: pages[fieldDefinition.objectId],
+                        [`${id}NavigationSlug`]: pages[relatedObjectId],
                     });
                 }
                 else {
@@ -214,7 +214,7 @@ const ObjectPropertyInput = (props) => {
                 }
             }
         })();
-    }, [parameters, defaultPages, findDefaultPageSlugFor, fieldDefinition, fetchedOptions]);
+    }, [parameters, defaultPages, findDefaultPageSlugFor, relatedObjectId, fetchedOptions]);
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -522,7 +522,7 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, actionId: createActionId, setSnackbarError: setSnackbarError, fieldDefinition: fieldDefinition }),
+        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, actionId: createActionId, setSnackbarError: setSnackbarError }),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
                 isError: snackbarError.isError,
                 showAlert: false,

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.d.ts

@@ -1,11 +1,11 @@
-import { InputParameter, Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
+import { Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
 import React from 'react';
 import { BaseProps } from '../../types';
 export type RelatedObjectInstanceProps = BaseProps & {
     id: string;
     open: boolean;
     title: string;
-    relatedObject: Obj | undefined;
+    relatedObject?: Obj;
     setSelectedInstance: (selectedInstance: ObjectInstance) => void;
     handleClose: () => void;
     mode: 'default' | 'existingOnly' | 'newOnly';
@@ -21,7 +21,6 @@ export type RelatedObjectInstanceProps = BaseProps & {
     layout?: TableViewLayout;
     formId?: string;
     actionId?: string;
-    fieldDefinition: InputParameter;
 };
 declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => React.JSX.Element;
 export default RelatedObjectInstance;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js

@@ -6,6 +6,7 @@ import { Close } from '../../../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
 import { Button, Dialog, DialogContent, DialogTitle, FormControlLabel, IconButton, Radio, RadioGroup, } from '../../../../../core';
 import Box from '../../../../../layout/Box/Box';
+import ErrorComponent from '../../../../ErrorComponent';
 import FormRenderer from '../../../FormRenderer';
 import FormRendererContainer from '../../../FormRendererContainer';
 import Body from '../../Body';
@@ -28,7 +29,7 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, fieldDefinition, setSnackbarError, setOptions, options, } = props;
+    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, setOptions, options, } = props;
     const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
@@ -120,7 +121,7 @@ const RelatedObjectInstance = (props) => {
         }, value: relationType },
         React.createElement(FormControlLabel, { value: "existing", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "Existing" }),
         React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))) : null;
-    const DialogForm = useCallback(() => (React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, objectId: fieldDefinition.objectId, onSubmit: createNewInstance, onDiscardChanges: onClose, onSubmitError: handleSubmitError, richTextEditor: richTextEditor, renderHeader: () => null, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: styles.dialogContent },
+    const DialogForm = useCallback(() => (React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, objectId: relatedObject.id, onSubmit: createNewInstance, onDiscardChanges: onClose, onSubmitError: handleSubmitError, richTextEditor: richTextEditor, renderHeader: () => null, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: styles.dialogContent },
             relationType === 'new' ? (React.createElement("div", { ref: validationErrorsRef }, !isEmpty(bodyProps.errors) && bodyProps.shouldShowValidationErrors ? (React.createElement(FormRenderer.ValidationErrors, { errors: bodyProps.errors, sx: {
                     my: isSm || isXs ? 2 : 3,
                 } })) : null)) : null,
@@ -136,7 +137,7 @@ const RelatedObjectInstance = (props) => {
                     React.createElement(RadioButtons, null),
                     defaultContainer)),
                 status === 'ready' && defaultContainer));
-        }, sx: { border: 'none' } })), [formId, actionId, fieldDefinition, fieldHeight, richTextEditor, RadioButtons]);
+        }, sx: { border: 'none' } })), [formId, actionId, relatedObject, fieldHeight, richTextEditor, RadioButtons]);
     return (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: open, onClose: (e, reason) => reason !== 'backdropClick' && handleClose(), sx: {
             background: 'none',
         }, PaperProps: {
@@ -159,7 +160,7 @@ const RelatedObjectInstance = (props) => {
                 title,
                 React.createElement(IconButton, { onClick: onClose, "aria-label": "Close" },
                     React.createElement(Close, { fontSize: "small" })))),
-        relationType === 'new' ? (React.createElement(DialogForm, null)) : ((mode === 'default' || mode === 'existingOnly') &&
+        relationType === 'new' ? (relatedObject ? (React.createElement(DialogForm, null)) : (React.createElement(ErrorComponent, { code: "Misconfigured" }))) : ((mode === 'default' || mode === 'existingOnly') &&
             relatedObject && (React.createElement(React.Fragment, null,
             React.createElement(DialogContent, { sx: styles.dialogContent },
                 shouldShowRadioButtons && React.createElement(RadioButtons, null),

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

@@ -85,7 +85,7 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'object') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(ObjectPropertyInput, { fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
+                React.createElement(ObjectPropertyInput, { relatedObjectId: !fieldDefinition.objectId ? display?.relatedObjectId : fieldDefinition.objectId, fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
                         ? updateCriteriaInputs(validation.criteria, getValues(), userAccount)
                         : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
                         ? display?.defaultValue.sortBy

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

@@ -54,6 +54,7 @@ export type ObjectPropertyInputProps = {
     hasDescription?: boolean;
     createActionId?: string;
     formId?: string;
+    relatedObjectId?: string;
 };
 export type Page = {
     id: string;

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

@@ -622,14 +622,14 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
  * Returns the cleaned submission ready for submitting.
  */
 export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
+    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
     for (const [key, value] of Object.entries(submission)) {
+        const entry = allEntries?.find((entry) => getEntryId(entry) === key);
         if (isArray(value)) {
             // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
                 try {
-                    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
-                    const entry = allEntries?.find((entry) => getEntryId(entry) === key);
                     const uploadedDocuments = await uploadDocuments(value, {
                         type: '',
                         view_permission: '',
@@ -654,10 +654,16 @@ export async function formatSubmission(submission, apiServices, objectId, instan
         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
+                // only submit the name and id of a regular related object
+                // and include objectId if it is a dynamic related object
             }
             else if ('id' in value && 'name' in value) {
-                submission[key] = pick(value, 'id', 'name');
+                submission[key] =
+                    entry &&
+                        ['input', 'inputField'].includes(entry.type) &&
+                        entry.display?.relatedObjectId
+                        ? pick(value, 'id', 'name', 'objectId')
+                        : pick(value, 'id', 'name');
             }
             else if (value instanceof LocalDateTime) {
                 submission[key] = normalizeDateTime(value);

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

@@ -363,7 +363,7 @@ describe('FormRenderer', () => {
             });
         });
     });
-    describe('when passed a related object entry', () => {
+    describe('when passed a regular related object entry', () => {
         const setupTestMocks = (object, form, instances) => {
             server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
         };
@@ -1127,6 +1127,132 @@ describe('FormRenderer', () => {
             });
         });
     });
+    describe('when passed a dynamic related object entry', () => {
+        const setupTestMocks = (object, form, instances) => {
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
+        };
+        const form = {
+            id: 'relatedObjectTestForm',
+            name: 'Related Object Test Form',
+            entries: [
+                {
+                    type: 'input',
+                    parameterId: 'specialtyType',
+                    display: {
+                        label: 'Speciality Type',
+                        createActionId: '_create',
+                        relatedObjectId: 'specialtyType',
+                    },
+                },
+            ],
+            actionId: '_update',
+            objectId: 'relatedObjectTestForm',
+        };
+        beforeEach(async () => {
+            const relatedObjectTestFormObject = {
+                id: 'relatedObjectTestForm',
+                name: 'Related Object Test Form',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        parameters: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [
+                    {
+                        id: 'specialtyType',
+                        name: 'Related Object',
+                        type: 'object',
+                    },
+                ],
+            };
+            setupTestMocks(relatedObjectTestFormObject, form);
+            const specialtyTypeForm = {
+                id: 'specialtyTypeForm',
+                name: 'Specialty Type Form',
+                entries: [
+                    {
+                        type: 'content',
+                        html: '<div>Specialty Type Form Content</div>',
+                    },
+                    {
+                        type: 'input',
+                        parameterId: 'requiredField',
+                        display: {
+                            label: 'Required Field',
+                            required: true,
+                        },
+                    },
+                ],
+                actionId: '_create',
+                objectId: 'specialtyType',
+                display: {
+                    submitLabel: 'Create Specialty Type',
+                },
+            };
+            const specialtyTypeObject = {
+                id: 'specialtyType',
+                name: 'Specialty Type',
+                actions: [
+                    {
+                        id: '_create',
+                        name: 'Create',
+                        type: 'create',
+                        parameters: [
+                            {
+                                id: 'requiredField',
+                                name: 'Required Field',
+                                type: 'string',
+                                required: true,
+                            },
+                        ],
+                        outputEvent: 'created',
+                        defaultFormId: 'specialtyTypeForm',
+                    },
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        parameters: [],
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            setupTestMocks(specialtyTypeObject, specialtyTypeForm);
+        });
+        it('displays form if user switches to creating a new record', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            await screen.findByRole('radiogroup', { name: 'Relation Type' });
+            const existingRecordButton = await screen.findByRole('radio', { name: /existing/i });
+            expect(existingRecordButton).toBeChecked();
+            const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+            await user.click(newRecordButton);
+            await screen.findByText('Specialty Type Form Content');
+        });
+        it('displays a not found error in record creation mode if a form could not be found', async () => {
+            const user = userEvent.setup();
+            server.use(http.get('/api/data/forms/specialtyTypeForm', () => {
+                return HttpResponse.json({ error: 'Not found' }, { status: 404 });
+            }));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+            await user.click(newRecordButton);
+            await screen.findByText(/not found/i);
+        });
+    });
     describe('when passed a one-to-many collection entry', () => {
         const setupTestMocks = (object, form, instances) => {
             server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])), http.get(`/api/data/objects/${object.id}/instances/checkAccess`, () => HttpResponse.json({

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -57,6 +57,12 @@ const defaultProperties = [
         required: false,
         objectId: 'application',
     },
+    {
+        id: 'dynamicObject',
+        name: 'Dynamic Object',
+        type: 'object',
+        required: false,
+    },
     {
         id: 'applicantName',
         name: 'Application Info',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-dev.33",
+    "version": "1.10.0-dev.34",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",