@evoke-platform/ui-components 1.8.0-testing.4 → 1.8.0-testing.5

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

@@ -14,6 +14,10 @@ export type FormProps = BaseProps & {
     instance?: ObjectInstance | Document;
     onChange: (id: string, value: unknown) => void;
     onValidationChange?: (errors: FieldErrors) => void;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
 declare function FormRenderer(props: FormProps): React.JSX.Element;
 export default FormRenderer;

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

@@ -1,5 +1,5 @@
 import { useObject } from '@evoke-platform/context';
-import { isEqual } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useResponsive } from '../../../theme';
@@ -12,7 +12,7 @@ import { convertDocToParameters, convertPropertiesToParams } from './components/
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
 function FormRenderer(props) {
-    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, } = props;
+    const { onSubmit, value, fieldHeight, richTextEditor, hideButtons, stickyFooter, onCancel, form, instance, onChange, onValidationChange, associatedObject, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -99,10 +99,9 @@ function FormRenderer(props) {
     }, []);
     if (entries && parameters && (!actionId || action)) {
         return (React.createElement(React.Fragment, null,
-            React.createElement(Box, { sx: {
+            ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title) && (React.createElement(Box, { sx: {
                     paddingX: isSmallerThanMd ? 2 : 3,
                     paddingTop: '0px',
-                    borderBottom: '2px solid #F4F6F8',
                 } },
                 React.createElement(Box, { sx: {
                         display: 'flex',
@@ -111,13 +110,14 @@ function FormRenderer(props) {
                         flexWrap: 'wrap',
                         paddingY: isSm || isXs ? 2 : 3,
                     } },
-                    React.createElement(Typography, { sx: {
+                    title && (React.createElement(Typography, { sx: {
                             fontSize: '20px',
                             lineHeight: '30px',
                             fontWeight: 700,
                             flexGrow: '1',
-                        } }, title),
+                        } }, title)),
                     isSmallerThanMd && hasSections && (React.createElement(Box, { sx: {
+                            color: '#212B36',
                             display: 'flex',
                             alignItems: 'center',
                             maxHeight: '22px',
@@ -140,7 +140,7 @@ function FormRenderer(props) {
                                 fontWeight: 400,
                                 fontSize: '14px',
                             }, onClick: handleCollapseAll }, "Collapse all")))),
-                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title })),
+                React.createElement(ValidationErrorDisplay, { formId: form.id, title: title, errors: errors, showSubmitError: isSubmitted }))),
             React.createElement(FormContext.Provider, { value: {
                     fetchedOptions,
                     setFetchedOptions: updateFetchedOptions,
@@ -159,26 +159,25 @@ function FormRenderer(props) {
                     handleChange: onChange,
                     triggerFieldReset,
                     showSubmitError: isSubmitted,
+                    associatedObject,
                 } },
                 React.createElement(Box, { sx: {
-                        padding: isModal ? '0px' : isSm || isXs ? 2 : 3,
-                        paddingBottom: '0px',
-                        paddingTop: !hasSections ? undefined : '0px',
+                        paddingX: isSm || isXs ? 2 : 3,
+                        // when rendering the default delete action, we don't want a border
+                        borderTop: !form.id || isModal ? undefined : '1px solid #e9ecef',
                     } },
                     entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, 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,
+                            bottom: isModal || isSmallerThanMd ? 0 : 24,
                             zIndex: 1000,
                             borderTop: action?.type !== 'delete' ? '1px solid #f4f6f8' : 'none',
                             backgroundColor: '#fff',
-                            paddingY: isSmallerThanMd ? '16px' : '20px',
-                            paddingX: isSmallerThanMd ? '16px' : '20px',
+                            padding: isSmallerThanMd ? '16px' : '20px',
                             display: 'flex',
                             justifyContent: isXs ? 'center' : 'flex-end',
                             alignItems: 'center',
                             marginX: isSmallerThanMd ? -2 : -3,
-                            marginBottom: '1px',
                             borderRadius: '0px 0px 6px 6px',
                         } },
                         React.createElement(ActionButtons, { onSubmit: onSubmit, handleSubmit: handleSubmit, isModal: isModal, actionType: action?.type, submitButtonLabel: display?.submitLabel, onReset: handleReset, unregister: unregister, entries: entries, setValue: setValue, formId: form.id })))))));

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

@@ -16,6 +16,10 @@ export type FormProps = BaseProps & {
     richTextEditor?: ComponentType<SimpleEditorProps>;
     onClose?: () => void;
     onSubmit?: (submission: Record<string, unknown>) => Promise<void>;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
 declare function FormRendererContainer(props: FormProps): React.JSX.Element;
 export default FormRendererContainer;

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

@@ -1,5 +1,4 @@
 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';
@@ -7,10 +6,10 @@ 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 { convertDocToEntries, deleteDocuments, encodePageSlug, formatDataToDoc, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, } from './components/utils';
 import FormRenderer from './FormRenderer';
 function FormRendererContainer(props) {
-    const { instanceId, pageNavigation, documentId, dataType, display, formId, stickyFooter, objectId, actionId, richTextEditor, } = props;
+    const { instanceId, pageNavigation, documentId, dataType, display, formId, stickyFooter, objectId, actionId, richTextEditor, onClose, onSubmit, associatedObject, } = props;
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
     const { id: appId, defaultPages } = useApp();
@@ -101,7 +100,8 @@ function FormRendererContainer(props) {
                 .get(getPrefixedUrl(`data/forms/${formId || action?.defaultFormId}`))
                 .then((evokeForm) => {
                 if (evokeForm?.actionId === actionId) {
-                    setForm(evokeForm);
+                    const form = onClose ? { ...evokeForm, name: '' } : evokeForm;
+                    setForm(form);
                 }
                 else {
                     setError(true);
@@ -111,24 +111,50 @@ function FormRendererContainer(props) {
                 onError(error);
             });
         }
-        else if (action && !action?.defaultFormId) {
+        else if (action) {
             apiServices
-                .get(getPrefixedUrl(`data/forms?filter[where][actionId]=${action.id}`))
+                .get(getPrefixedUrl('data/forms'), {
+                params: {
+                    filter: {
+                        where: {
+                            actionId: action.id,
+                            objectId: objectId,
+                        },
+                    },
+                },
+            })
                 .then((matchingForms) => {
                 if (matchingForms.length === 1) {
-                    if (matchingForms[0]?.actionId === actionId) {
-                        setForm(matchingForms[0]);
-                    }
-                    else {
-                        setError(true);
-                    }
+                    const form = onClose ? { ...matchingForms[0], name: '' } : matchingForms[0];
+                    setForm(form);
+                    // use this default form if no delete form is found
+                }
+                else if (action.type === 'delete' && instance) {
+                    setForm({
+                        id: '',
+                        name: '',
+                        entries: [
+                            {
+                                type: 'content',
+                                html: `<p>You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
+                            },
+                        ],
+                        objectId: objectId,
+                        actionId: '_delete',
+                        display: {
+                            submitLabel: 'Delete',
+                        },
+                    });
+                }
+                else if (instance) {
+                    setError(true);
                 }
             })
                 .catch((error) => {
                 onError(error);
             });
         }
-    }, [action]);
+    }, [action, objectId, instance]);
     useEffect(() => {
         if (form?.id === 'documentForm') {
             setParameters([
@@ -174,54 +200,6 @@ function FormRendererContainer(props) {
         };
         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,
@@ -247,47 +225,7 @@ function FormRendererContainer(props) {
     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);
-            }
-        }
+        submission = await formatSubmission(submission, apiServices, objectId, instanceId, setSnackbarError);
         if (document) {
             submission = formatDataToDoc(submission);
         }
@@ -331,9 +269,9 @@ function FormRendererContainer(props) {
                         ?.filter((property) => !property.formula && property.type !== 'collection')
                         .map((property) => property.id) ?? []),
                 });
-                if (response) {
+                if (response && sanitizedObject && instance) {
                     onSubmissionSuccess(response);
-                    deleteDocuments(submission, !!response, action ?? undefined);
+                    deleteDocuments(submission, !!response, apiServices, sanitizedObject, instance, action ?? undefined, setSnackbarError);
                 }
             }
         }
@@ -393,7 +331,17 @@ function FormRendererContainer(props) {
                         const fieldValue = instanceData?.[fieldId] ??
                             instanceData?.metadata?.[fieldId];
                         const parameter = parameters?.find((param) => param.id === fieldId);
-                        if (entry.type !== 'readonlyField' && isEmptyWithDefault(fieldValue, entry, instanceData)) {
+                        if (associatedObject?.propertyId === fieldId && associatedObject?.instanceId && parameter) {
+                            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 !== '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) {
@@ -463,9 +411,13 @@ function FormRendererContainer(props) {
         })();
     }
     const isLoading = (instanceId && !formData && !document) || !form || !sanitizedObject;
-    return !error ? (React.createElement(React.Fragment, null,
-        !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' } },
+    return !error ? (React.createElement(Box, { sx: {
+            backgroundColor: '#ffffff',
+            borderRadius: '6px',
+            padding: '0px',
+            border: !isLoading && !onClose ? '1px solid #dbe0e4' : undefined,
+        } },
+        !isLoading ? (React.createElement(FormRenderer, { onSubmit: 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: onClose ?? onCancel, associatedObject: associatedObject })) : (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' } })),

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

@@ -20,6 +20,10 @@ type FormContextType = {
     fieldHeight?: 'small' | 'medium';
     triggerFieldReset?: boolean;
     showSubmitError?: boolean;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
 export declare const FormContext: import("react").Context<FormContextType>;
 export {};

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts

@@ -1,14 +1,18 @@
-import { Action, ActionType, EvokeForm, InputParameter, Obj } from '@evoke-platform/context';
+import { Action, InputParameter, Obj } from '@evoke-platform/context';
 import React from 'react';
+import { FieldValues } from 'react-hook-form';
 export type ActionDialogProps = {
     open: boolean;
     onClose: () => void;
     action: Action;
-    instanceInput: Record<string, unknown>;
-    handleSubmit: (actionType: ActionType, input: Record<string, unknown> | undefined, instanceId?: string, setSubmitting?: (value: boolean) => void) => void;
+    handleSubmit: (action: Action, input: FieldValues, instanceId?: string, setSubmitting?: (value: boolean) => void) => void;
     object: Obj;
     instanceId?: string;
-    relatedParameter?: InputParameter;
-    relatedForm?: EvokeForm;
+    relatedParameter: InputParameter;
+    relatedFormId?: string;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
 export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.js

@@ -1,9 +1,11 @@
 import { useApiServices } from '@evoke-platform/context';
 import { Close } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../../../theme/hooks';
 import { Dialog, DialogContent, DialogTitle, IconButton, Skeleton } from '../../../../../core';
 import { Box } from '../../../../../layout';
 import ErrorComponent from '../../../../ErrorComponent';
+import FormRendererContainer from '../../../FormRendererContainer';
 import { getPrefixedUrl } from '../../utils';
 const styles = {
     button: {
@@ -36,12 +38,11 @@ const styles = {
     },
 };
 export const ActionDialog = (props) => {
-    const { open, onClose, action, object, instanceId, relatedForm, instanceInput } = props;
+    const { open, onClose, action, object, instanceId, relatedFormId, relatedParameter, handleSubmit, associatedObject, } = props;
     const [loading, setLoading] = useState(false);
     const [hasAccess, setHasAccess] = useState();
-    const [form, setForm] = useState();
+    const { stickyFooter, fieldHeight, richTextEditor } = useFormContext();
     const apiServices = useApiServices();
-    const isDeleteAction = action.type === 'delete';
     useEffect(() => {
         if (instanceId) {
             setLoading(true);
@@ -57,31 +58,18 @@ export const ActionDialog = (props) => {
             setLoading(false);
         }
     }, [object, instanceId]);
-    useEffect(() => {
-        setForm(isDeleteAction && !form
-            ? {
-                id: '',
-                name: '',
-                entries: [
-                    {
-                        type: 'content',
-                        html: `<p>You are about to delete ${instanceInput?.name}. Deleted records can't be restored. Are you sure you want to continue?</p>`,
-                    },
-                ],
-                objectId: object.id,
-                actionId: '_delete',
-                display: {
-                    submitLabel: 'Delete',
-                },
-            }
-            : relatedForm);
-    }, [relatedForm, action, form]);
+    const handleFormSave = async (data) => {
+        return handleSubmit(action, data, instanceId);
+    };
     return (React.createElement(Dialog, { maxWidth: 'md', fullWidth: true, open: open, onClose: (e, reason) => reason !== 'backdropClick' && onClose() },
-        React.createElement(DialogTitle, { sx: styles.dialogTitle },
+        React.createElement(DialogTitle, { sx: { ...styles.dialogTitle, borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef' } },
             React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
                 React.createElement(Close, { fontSize: "small" })),
             action && hasAccess && !loading ? action?.name : ''),
-        React.createElement(DialogContent, { sx: { paddingBottom: loading ? undefined : '0px' } }, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } })) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
+        React.createElement(DialogContent, { sx: { paddingBottom: loading ? undefined : '0px' } }, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } },
+            React.createElement(FormRendererContainer, { instanceId: instanceId, formId: relatedFormId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: action.id, stickyFooter: stickyFooter, 
+                // relatedParameter will have an objectId here
+                objectId: relatedParameter.objectId, onClose: onClose, onSubmit: handleFormSave, richTextEditor: richTextEditor, associatedObject: associatedObject }))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }))) : (React.createElement(ErrorComponent, { code: 'AccessDenied', message: 'You do not have permission to perform this action.', styles: { boxShadow: 'none' } })))))));

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts

@@ -1,10 +1,14 @@
-import { InputParameter, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
+import { InputField, InputParameter, InputParameterReference, Property, ReadonlyField, ViewLayoutEntityReference } from '@evoke-platform/context';
 import React from 'react';
 export type ObjectPropertyInputProps = {
     fieldDefinition: InputParameter | Property;
     canUpdateProperty: boolean;
     criteria?: object;
     viewLayout?: ViewLayoutEntityReference;
+    entry: InputField | InputParameterReference | ReadonlyField;
+    createActionId?: string;
+    updateActionId?: string;
+    deleteActionId?: string;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
 export default RepeatableField;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -1,6 +1,5 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { LocalDateTime } from '@js-joda/core';
-import { get, isEqual, isObject, pick, startCase } from 'lodash';
+import { get, isEqual, pick, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
@@ -11,7 +10,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, Skel
 import { Box } from '../../../../../layout';
 import { getReadableQuery } from '../../../../CriteriaBuilder';
 import { retrieveCustomErrorMessage } from '../../../../Form/utils';
-import { getPrefixedUrl, normalizeDateTime, transformToWhere } from '../../utils';
+import { deleteDocuments, formatSubmission, getPrefixedUrl, transformToWhere } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
@@ -36,7 +35,7 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    const { fieldDefinition, canUpdateProperty, criteria, viewLayout } = props;
+    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry, createActionId, updateActionId, deleteActionId, } = props;
     const { fetchedOptions, setFetchedOptions, instance } = useFormContext();
     const { instanceChanges } = useNotification();
     const apiServices = useApiServices();
@@ -54,11 +53,49 @@ const RepeatableField = (props) => {
     const [hasCreateAction, setHasCreateAction] = useState(fetchedOptions[`${fieldDefinition.id}HasCreateAction`] || false);
     const [loading, setLoading] = useState((relatedObject && relatedInstances) || !fieldDefinition ? false : true);
     const [tableViewLayout, setTableViewLayout] = useState(fetchedOptions[`${fieldDefinition.id}TableViewLayout`]);
+    const [createForm, setCreateForm] = useState(fetchedOptions[`${fieldDefinition.id}-createForm`]);
+    const [updateForm, setUpdateForm] = useState(fetchedOptions[`${fieldDefinition.id}-updateForm`]);
+    const [deleteForm, setDeleteForm] = useState(fetchedOptions[`${fieldDefinition.id}-deleteForm`]);
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: false,
     });
-    const DEFAULT_CREATE_ACTION = '_create';
+    const createAction = relatedObject?.actions?.find((item) => item.id === createActionId);
+    const updateAction = relatedObject?.actions?.find((item) => item.id === updateActionId);
+    const deleteAction = relatedObject?.actions?.find((item) => item.id === deleteActionId);
+    function getForm(setForm, action, formId) {
+        if (formId || action?.defaultFormId) {
+            apiServices
+                .get(getPrefixedUrl(`data/forms/${formId || action?.defaultFormId}`))
+                .then((evokeForm) => {
+                setForm(evokeForm);
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+        else if (action) {
+            apiServices
+                .get(getPrefixedUrl('data/forms'), {
+                params: {
+                    filter: {
+                        where: {
+                            actionId: action.id,
+                            objectId: fieldDefinition.objectId,
+                        },
+                    },
+                },
+            })
+                .then((matchingForms) => {
+                if (matchingForms.length === 1) {
+                    setForm(matchingForms[0]);
+                }
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+    }
     const fetchRelatedInstances = useCallback(async (refetch = false) => {
         let relatedObject;
         if (fieldDefinition.objectId) {
@@ -168,6 +205,14 @@ const RepeatableField = (props) => {
         if (relatedObject)
             fetchCriteriaObjects();
     }, [fetchCriteriaObjects, relatedObject]);
+    useEffect(() => {
+        if (createAction && !createForm)
+            getForm(setCreateForm, createAction); // TODO: pass entry.display?.createForm as a third argument
+        if (updateAction && !updateForm)
+            getForm(setUpdateForm, updateAction); // TODO: pass entry.display?.updateForm as a third argument
+        if (deleteAction && !deleteForm)
+            getForm(setDeleteForm, deleteAction); // TODO: pass entry.display?.deleteForm as a third argument
+    }, [entry.display, createAction, updateAction, deleteAction]);
     useEffect(() => {
         if (relatedObject?.rootObjectId) {
             // pass true here so while it doesn't refetch on every tab change it does refetch on changes made
@@ -226,11 +271,7 @@ const RepeatableField = (props) => {
             })
                 .then((checkAccess) => {
                 const action = relatedObject.actions?.find((item) => item.id === '_create');
-                if (action &&
-                    fieldDefinition.relatedPropertyId &&
-                    // TODO: replace with the entries create form or defaultFormId of the
-                    // default create action, keeping it like this to get minimum changes out so other can use it
-                    !!fieldDefinition.createForm) {
+                if (action && fieldDefinition.relatedPropertyId) {
                     const { relatedObjectProperty, criteria } = retrieveCriteria(fieldDefinition.relatedPropertyId, action, relatedObject);
                     if (!criteria || JSON.stringify(criteria).includes('{{{input.') || !relatedObjectProperty) {
                         setHasCreateAction(checkAccess.result);
@@ -301,22 +342,17 @@ const RepeatableField = (props) => {
                 },
                 'min-width': '44px',
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
-    const save = async (actionType, input, instanceId) => {
-        // date-time fields are stored in the database in ISO format so convert all
-        // LocalDateTime objects to ISO format.
-        if (isObject(input)) {
-            input = Object.entries(input).reduce((agg, [key, value]) => Object.assign(agg, {
-                [key]: value instanceof LocalDateTime ? normalizeDateTime(value) : value,
-            }), {});
-        }
-        if (actionType === 'create') {
+    const save = async (action, input, instanceId) => {
+        // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
+        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, instanceId);
+        if (action.type === 'create' && createActionId) {
             const updatedInput = {
                 ...input,
                 [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
             };
             try {
                 const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
-                    actionId: DEFAULT_CREATE_ACTION,
+                    actionId: createActionId,
                     input: updatedInput,
                 });
                 const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
@@ -337,13 +373,16 @@ const RepeatableField = (props) => {
         else {
             const relatedObjectId = relatedObject?.id;
             try {
-                await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
-                    actionId: `_${actionType}`,
+                const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
+                    actionId: `_${action.type}`,
                     input: pick(input, relatedObject?.properties
                         ?.filter((property) => !property.formula && property.type !== 'collection')
                         .map((property) => property.id) ?? []),
                 });
-                if (actionType === 'delete') {
+                if (response && relatedObject && instance) {
+                    deleteDocuments(input, !!response, apiServices, relatedObject, instance, action);
+                }
+                if (action.type === 'delete') {
                     setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== instanceId));
                 }
                 else {
@@ -357,7 +396,7 @@ const RepeatableField = (props) => {
                 setSnackbarError({
                     showAlert: true,
                     message: retrieveCustomErrorMessage(err) ??
-                        `An error occurred while ${actionType === 'delete' ? ' deleting' : ' updating'} an instance`,
+                        `An error occurred while ${action.type === 'delete' ? ' deleting' : ' updating'} an instance`,
                     isError: true,
                 });
             }
@@ -501,7 +540,7 @@ const RepeatableField = (props) => {
                                             cursor: 'pointer',
                                         },
                                     }
-                                    : {}, onClick: !!fieldDefinition.updatedForm && // TODO: replace with the entries update form
+                                    : {}, onClick: updateActionId &&
                                     canUpdateProperty &&
                                     prop.id === 'name'
                                     ? () => editRow(relatedInstance.id)
@@ -511,16 +550,27 @@ const RepeatableField = (props) => {
                                     users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
-                            !!fieldDefinition.updateForm && ( // TODO: replace with the entries update form
-                            React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
+                            updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Edit" },
                                     React.createElement(Edit, null)))),
                             React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Delete" },
                                     React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
-            hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), instanceInput: relatedInstances.find((i) => i.id === selectedRow) ?? {}, handleSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
-                (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, relatedParameter: fieldDefinition })),
+            hasCreateAction && createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), handleSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
+                (dialogType === 'create'
+                    ? createActionId
+                    : dialogType === 'update'
+                        ? updateActionId
+                        : deleteActionId)), relatedFormId: dialogType === 'create'
+                ? createForm?.id
+                : dialogType === 'update'
+                    ? updateForm?.id
+                    : dialogType === 'delete'
+                        ? deleteForm?.id
+                        : undefined, instanceId: selectedRow, relatedParameter: fieldDefinition, associatedObject: instance?.id && fieldDefinition.relatedPropertyId
+                ? { instanceId: instance.id, propertyId: fieldDefinition.relatedPropertyId }
+                : undefined })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };
 export default RepeatableField;

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

@@ -193,7 +193,7 @@ const InstanceLookup = (props) => {
             setRows([]);
         }
     }, [filter, searchString.length]);
-    return (React.createElement(Grid, { container: true, sx: { paddingBottom: '30px' } },
+    return (React.createElement(Grid, { container: true, sx: { padding: '30px 24px' } },
         React.createElement(Grid, { item: true, xs: 12 }, searchableColumns.length ? (React.createElement(SearchField, { searchString: searchString, setSearchString: setSearchString, filter: filter, setFilter: setFilter, searchableColumns: searchableColumns })) : (React.createElement(Typography, { sx: { fontSize: '16px', fontWeight: '700' } }, "There are no searchable properties configured for this object"))),
         React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: retrieveColumns(layout), onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
                 field: object.viewLayout?.table?.sort?.colId ?? 'name',

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

@@ -1,16 +1,16 @@
 import { useApiServices, useApp, useNavigate, } from '@evoke-platform/context';
 import cleanDeep from 'clean-deep';
-import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
+import { cloneDeep, debounce, isEmpty, isEqual, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
-import { Autocomplete, Button, Dialog, IconButton, Link, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
+import { Autocomplete, Button, Dialog, DialogContent, DialogTitle, IconButton, Link, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
 import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
-    const { id, fieldDefinition, nestedFieldsView, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, } = props;
+    const { id, fieldDefinition, nestedFieldsView, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, } = props;
     const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
@@ -30,15 +30,12 @@ const ObjectPropertyInput = (props) => {
         showAlert: false,
         isError: true,
     });
-    const DEFAULT_CREATE_ACTION = '_create';
-    const action = relatedObject?.actions?.find((action) => action.id === DEFAULT_CREATE_ACTION);
+    const action = relatedObject?.actions?.find((action) => action.id === createActionId);
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
-    const updatedCriteria = filter
-        ? {
-            where: transformToWhere(filter),
-        }
-        : undefined;
+    const updatedCriteria = useMemo(() => {
+        return filter ? { where: transformToWhere(filter) } : undefined;
+    }, [filter]);
     useEffect(() => {
         if (relatedObject) {
             let defaultViewLayout;
@@ -94,10 +91,12 @@ const ObjectPropertyInput = (props) => {
         }
     }, [fieldDefinition, defaultValueCriteria, sortBy, orderBy]);
     const getDropdownOptions = useCallback((name) => {
-        if ((!fetchedOptions[`${id}Options`] ||
-            fetchedOptions[`${id}Options`].length === 0) &&
-            !hasFetched) {
+        if (((!fetchedOptions?.[`${id}Options`] ||
+            (fetchedOptions?.[`${id}Options`]).length === 0) &&
+            !hasFetched) ||
+            !isEqual(fetchedOptions?.[`${id}UpdatedCriteria`], updatedCriteria)) {
             setLoadingOptions(true);
+            setFetchedOptions && setFetchedOptions({ [`${id}UpdatedCriteria`]: updatedCriteria });
             const updatedFilter = cloneDeep(updatedCriteria) || {};
             updatedFilter.limit = 100;
             const { propertyId, direction } = layout?.sort ?? {
@@ -146,17 +145,38 @@ const ObjectPropertyInput = (props) => {
         return () => debouncedGetDropdownOptions.cancel();
     }, [dropdownInput]);
     useEffect(() => {
-        if (action?.defaultFormId) {
+        if (formId || action?.defaultFormId) {
             apiServices
-                .get(getPrefixedUrl(`data/forms/${action.defaultFormId}`))
+                .get(getPrefixedUrl(`data/forms/${formId || action?.defaultFormId}`))
                 .then((evokeForm) => {
                 setForm(evokeForm);
             })
                 .catch((error) => {
-                console.error('Error fetching form:', error);
+                console.error(error);
+            });
+        }
+        else if (action) {
+            apiServices
+                .get(getPrefixedUrl('data/forms'), {
+                params: {
+                    filter: {
+                        where: {
+                            actionId: action.id,
+                            objectId: fieldDefinition.objectId,
+                        },
+                    },
+                },
+            })
+                .then((matchingForms) => {
+                if (matchingForms.length === 1) {
+                    setForm(matchingForms[0]);
+                }
+            })
+                .catch((error) => {
+                console.error(error);
             });
         }
-    }, [action]);
+    }, [action, formId]);
     useEffect(() => {
         if (!fetchedOptions[`${id}RelatedObject`]) {
             apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), (error, object) => {
@@ -254,7 +274,7 @@ const ObjectPropertyInput = (props) => {
                             },
                         } },
                         mode !== 'newOnly' && children,
-                        mode !== 'existingOnly' && form && (React.createElement(Button, { fullWidth: true, sx: {
+                        mode !== 'existingOnly' && createActionId && (React.createElement(Button, { fullWidth: true, sx: {
                                 justifyContent: 'flex-start',
                                 pl: 2,
                                 minHeight: '48px',
@@ -422,15 +442,19 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
-            React.createElement(Typography, { sx: {
-                    marginTop: '28px',
-                    fontSize: '22px',
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { id: id, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, nestedFieldsView: nestedFieldsView, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: form?.id, actionId: createActionId, setSnackbarError: setSnackbarError, fieldDefinition: fieldDefinition })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+            React.createElement(DialogTitle, { sx: {
+                    fontSize: '18px',
                     fontWeight: 700,
-                    marginLeft: '24px',
-                    marginBottom: '10px',
-                } }, `Add ${fieldDefinition.name}`),
-            React.createElement(RelatedObjectInstance, { handleClose: handleClose, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, form: form, action: action, setSnackbarError: setSnackbarError, selectedInstance: selectedInstance }))))),
+                    paddingTop: '35px',
+                    paddingBottom: '20px',
+                    borderBottom: '1px solid #e9ecef',
+                } },
+                React.createElement(IconButton, { sx: { position: 'absolute', right: '17px', top: '22px' }, onClick: handleClose },
+                    React.createElement(Close, { fontSize: "small" })),
+                form?.name ?? `Add ${fieldDefinition.name}`),
+            React.createElement(DialogContent, { sx: { padding: '0px' } },
+                React.createElement(RelatedObjectInstance, { handleClose: handleClose, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, 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(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
                 isError: snackbarError.isError,
                 showAlert: false,

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

@@ -1,9 +1,9 @@
-import { Action, EvokeForm, Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
+import { InputParameter, Obj, ObjectInstance, TableViewLayout } from '@evoke-platform/context';
 import React from 'react';
 import { BaseProps } from '../../types';
 export type RelatedObjectInstanceProps = BaseProps & {
-    relatedObject: Obj | undefined;
     id: string;
+    relatedObject: Obj | undefined;
     setSelectedInstance: (selectedInstance: ObjectInstance) => void;
     handleClose: () => void;
     mode: 'default' | 'existingOnly' | 'newOnly';
@@ -18,9 +18,9 @@ export type RelatedObjectInstanceProps = BaseProps & {
     options: ObjectInstance[];
     filter?: Record<string, unknown>;
     layout?: TableViewLayout;
-    form?: EvokeForm;
-    action?: Action;
-    selectedInstance?: ObjectInstance;
+    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

@@ -1,8 +1,11 @@
+import { useApiServices } from '@evoke-platform/context';
 import { InfoRounded } from '@mui/icons-material';
 import React, { useState } from 'react';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Alert, Button, FormControlLabel, Radio, RadioGroup } from '../../../../../core';
 import { Box, Grid } from '../../../../../layout';
+import FormRendererContainer from '../../../FormRendererContainer';
+import { formatSubmission, getPrefixedUrl } from '../../utils';
 import InstanceLookup from './InstanceLookup';
 const styles = {
     actionButtons: {
@@ -14,11 +17,12 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, id, setSelectedInstance, handleClose, nestedFieldsView, mode, displayOption, filter, layout, form, } = props;
-    const { handleChange: handleChangeObjectField } = useFormContext();
+    const { relatedObject, id, setSelectedInstance, handleClose, nestedFieldsView, mode, displayOption, filter, layout, formId, actionId, fieldDefinition, setSnackbarError, setOptions, options, } = props;
+    const { handleChange: handleChangeObjectField, richTextEditor, stickyFooter, fieldHeight } = useFormContext();
     const [errors, setErrors] = useState([]);
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
+    const apiServices = useApiServices();
     const linkExistingInstance = async () => {
         if (selectedRow) {
             setSelectedInstance(selectedRow);
@@ -30,19 +34,53 @@ const RelatedObjectInstance = (props) => {
         handleClose();
         setErrors([]);
     };
+    const createNewInstance = async (submission) => {
+        if (!relatedObject) {
+            // Handle the case where relatedObject is undefined
+            return;
+        }
+        submission = await formatSubmission(submission, apiServices, relatedObject.id);
+        try {
+            await apiServices
+                .post(getPrefixedUrl(`/objects/${relatedObject.id}/instances/actions`), {
+                actionId: actionId,
+                input: submission,
+            })
+                .then((response) => {
+                handleChangeObjectField(id, response);
+                setSelectedInstance(response);
+                setSnackbarError({
+                    showAlert: true,
+                    message: 'New instance created',
+                    isError: false,
+                });
+                setOptions(options.concat([response]));
+                onClose();
+            });
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        }
+        catch (err) {
+            setSnackbarError({
+                showAlert: true,
+                message: err.response?.data?.error?.details?.[0]?.message ??
+                    err.response?.data?.error?.message ??
+                    `An error occurred. The new instance was not created.`,
+                isError: true,
+            });
+        }
+    };
     return (React.createElement(Box, { sx: {
             background: nestedFieldsView ? '#F4F6F8' : 'none',
             borderRadius: '8px',
         } },
         React.createElement(Box, { sx: {
-                padding: '8px 24px 0px',
                 '.MuiInputBase-root': { background: '#FFFF', borderRadius: '8px' },
             } },
             !nestedFieldsView &&
                 displayOption !== 'dropdown' &&
                 mode !== 'existingOnly' &&
                 mode !== 'newOnly' &&
-                form && (React.createElement(Grid, { container: true },
+                actionId && (React.createElement(Grid, { container: true, sx: { paddingX: '24px' } },
                 React.createElement(Grid, { container: true, item: true },
                     React.createElement(RadioGroup, { row: true, "aria-labelledby": "related-object-link-type", onChange: (event) => {
                             event.target.value === 'existing' && setErrors([]);
@@ -57,9 +95,9 @@ const RelatedObjectInstance = (props) => {
                 "There are ",
                 React.createElement("strong", null, errors.length),
                 " errors")))) : undefined,
-            (relationType === 'new' || mode === 'newOnly') && form ? (React.createElement(Box, { id: 'related-object-wrapper', sx: { width: '100%' } })) : (relatedObject &&
-                mode !== 'newOnly' && (React.createElement(React.Fragment, null,
-                React.createElement(InstanceLookup, { colspan: 12, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout }))))),
+            relationType === 'new' || mode === 'newOnly' ? (React.createElement(Box, { sx: { width: '100%' } },
+                React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, stickyFooter: stickyFooter, objectId: fieldDefinition.objectId, onClose: onClose, onSubmit: createNewInstance, richTextEditor: richTextEditor }))) : ((mode === 'default' || mode === 'existingOnly') &&
+                relatedObject && (React.createElement(InstanceLookup, { colspan: 12, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout })))),
         relationType !== 'new' && mode !== 'newOnly' && (React.createElement(Box, { sx: styles.actionButtons },
             React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {
                     border: '1px solid #ced4da',

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

@@ -38,7 +38,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry, isDocument } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, } = useFormContext();
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, getValues(), instance)) {
         return null;
@@ -78,6 +78,8 @@ export function RecursiveEntryRenderer(props) {
         return def;
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
+    if (associatedObject?.propertyId === entryId)
+        return null;
     useEffect(() => {
         if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
             fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
@@ -107,7 +109,9 @@ export function RecursiveEntryRenderer(props) {
                         ? display?.defaultValue.orderBy
                         : undefined, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
                         ? display?.defaultValue?.criteria
-                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description })));
+                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, 
+                    // formId={display?.createFormId}  // TODO: this should be added as part of the builder update
+                    createActionId: '_create' })));
         }
         else if (fieldDefinition.type === 'user') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -116,7 +120,7 @@ export function RecursiveEntryRenderer(props) {
         else if (fieldDefinition.type === 'collection') {
             return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
                 React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout })));
+                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry, createActionId: '_create', updateActionId: '_update', deleteActionId: '_delete' })));
         }
         else if (fieldDefinition.type === 'richText') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
@@ -140,7 +144,6 @@ export function RecursiveEntryRenderer(props) {
         else {
             // Add `aria-describedby` to ensure screen readers read the description
             // when the input is tabbed into.
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const additionalProps = {};
             if (fieldDefinition.enum && display?.description) {
                 additionalProps.renderInput = (params) => (React.createElement(TextField, { ...params, inputProps: {

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
+import { FieldErrors } from 'react-hook-form';
 export type ValidationErrorDisplayProps = {
     formId: string;
     title?: string;
+    errors?: FieldErrors;
+    showSubmitError?: boolean;
 };
 declare function ValidationErrorDisplay(props: ValidationErrorDisplayProps): React.JSX.Element | null;
 export default ValidationErrorDisplay;

package/dist/published/components/custom/FormV2/components/ValidationFiles/ValidationErrorDisplay.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { useResponsive } from '../../../../../theme';
-import { useFormContext } from '../../../../../theme/hooks';
 import { List, ListItem, Typography } from '../../../../core';
 import { Box } from '../../../../layout';
 function ValidationErrorDisplay(props) {
-    const { formId, title } = props;
-    const { errors, showSubmitError } = useFormContext();
+    const { formId, title, errors, showSubmitError } = props;
     const { isSm, isXs } = useResponsive();
     function extractErrorMessages(errors) {
         const messages = [];

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

@@ -38,7 +38,7 @@ export type SimpleEditorProps = {
 };
 export type ObjectPropertyInputProps = {
     id: string;
-    fieldDefinition: InputParameter;
+    fieldDefinition: InputParameter | Property;
     mode: 'default' | 'existingOnly' | 'newOnly';
     nestedFieldsView?: boolean;
     readOnly?: boolean;
@@ -53,6 +53,8 @@ export type ObjectPropertyInputProps = {
     initialValue?: ObjectInstance | null;
     viewLayout?: ViewLayoutEntityReference;
     hasDescription?: boolean;
+    createActionId?: string;
+    formId?: string;
 };
 export type Page = {
     id: string;
@@ -85,6 +87,10 @@ export type ExpandedSection = Section & {
 export type EntryRendererProps = BaseProps & {
     entry: FormEntry;
     isDocument?: boolean;
+    associatedObject?: {
+        instanceId?: string;
+        propertyId?: string;
+    };
 };
 export type SectionsProps = {
     entry: Sections;

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

@@ -1,8 +1,9 @@
-import { ApiServices, Column, Columns, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
+/// <reference types="react" />
+import { Action, 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, DocumentData } from './types';
+import { Document, DocumentData, SavedDocumentReference } 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;
@@ -61,3 +62,27 @@ export declare function formatDataToDoc(data: DocumentData): {
 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[];
+export declare const uploadDocuments: (files: (File | SavedDocumentReference)[], metadata: Record<string, string>, apiServices: ApiServices, instanceId: string, objectId: string) => Promise<SavedDocumentReference[]>;
+export declare const deleteDocuments: (submittedFields: FieldValues, requestSuccess: boolean, apiServices: ApiServices, object: Obj, instance: FieldValues, action?: Action, setSnackbarError?: React.Dispatch<React.SetStateAction<{
+    showAlert: boolean;
+    message?: string;
+    isError: boolean;
+}>>) => Promise<void>;
+/**
+ * Transforms a form submission into a format safe for API submission.
+ *
+ * Responsibilities:
+ * - Uploads any files found in submission fields.
+ * - Normalizes related objects (keeping only id and name not the whole instance).
+ * - Converts an object of undefined address fields to undefined instead of an empty object.
+ * - Normalizes LocalDateTime values to API-friendly format.
+ * - Converts empty strings or undefined values to null.
+ * - Optionally reports file upload errors via snackbar.
+ *
+ * Returns the cleaned submission ready for submitting.
+ */
+export declare function formatSubmission(submission: FieldValues, apiServices: ApiServices, objectId: string, instanceId?: string, setSnackbarError?: React.Dispatch<React.SetStateAction<{
+    showAlert: boolean;
+    message?: string;
+    isError: boolean;
+}>>): Promise<FieldValues>;

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, isEmpty, isObject, omit, startCase, transform } from 'lodash';
+import { get, isArray, isEmpty, isObject, omit, pick, startCase, transform } from 'lodash';
 import { DateTime } from 'luxon';
 import Handlebars from 'no-eval-handlebars';
 import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB } from 'react-querybuilder';
@@ -562,3 +562,109 @@ export const docProperties = [
         type: 'string',
     },
 ];
+export const uploadDocuments = async (files, metadata, apiServices, instanceId, objectId) => {
+    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/${objectId}/instances/${instanceId}/documents`), formData);
+    return allDocuments.concat(docs?.map((doc) => ({
+        id: doc.id,
+        name: doc.name,
+    })) ?? []);
+};
+export const deleteDocuments = async (submittedFields, requestSuccess, apiServices, object, instance, action, setSnackbarError) => {
+    const documentProperties = action?.parameters
+        ? action.parameters.filter((param) => param.type === 'document')
+        : object?.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/${object.id}/instances/${instance.id}/documents/${doc.id}`));
+            }
+            catch (error) {
+                if (error) {
+                    setSnackbarError &&
+                        setSnackbarError({
+                            showAlert: true,
+                            message: `An error occurred while removing document '${doc.name}'`,
+                            isError: true,
+                        });
+                }
+            }
+        }
+    }
+};
+/**
+ * Transforms a form submission into a format safe for API submission.
+ *
+ * Responsibilities:
+ * - Uploads any files found in submission fields.
+ * - Normalizes related objects (keeping only id and name not the whole instance).
+ * - Converts an object of undefined address fields to undefined instead of an empty object.
+ * - Normalizes LocalDateTime values to API-friendly format.
+ * - Converts empty strings or undefined values to null.
+ * - Optionally reports file upload errors via snackbar.
+ *
+ * Returns the cleaned submission ready for submitting.
+ */
+export async function formatSubmission(submission, apiServices, objectId, instanceId, setSnackbarError) {
+    for (const [key, value] of Object.entries(submission)) {
+        if (isArray(value)) {
+            const fileInArray = value.some((item) => item instanceof File);
+            if (fileInArray && instanceId) {
+                try {
+                    const uploadedDocuments = await uploadDocuments(value, {
+                        type: '',
+                        view_permission: '',
+                    }, apiServices, instanceId, objectId);
+                    submission[key] = uploadedDocuments;
+                }
+                catch (err) {
+                    if (err) {
+                        setSnackbarError &&
+                            setSnackbarError({
+                                showAlert: true,
+                                message: `An error occurred while uploading associated documents`,
+                                isError: true,
+                            });
+                    }
+                    return submission;
+                }
+            }
+            // 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 instanceof LocalDateTime) {
+                submission[key] = normalizeDateTime(value);
+            }
+        }
+        else if (value === '' || value === undefined) {
+            submission[key] = null;
+        }
+    }
+    return submission;
+}

package/dist/published/theme/hooks.d.ts

@@ -126,4 +126,8 @@ export declare function useFormContext(): {
     fieldHeight?: "medium" | "small" | undefined;
     triggerFieldReset?: boolean | undefined;
     showSubmitError?: boolean | undefined;
+    associatedObject?: {
+        instanceId?: string | undefined;
+        propertyId?: string | undefined;
+    } | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.8.0-testing.4",
+    "version": "1.8.0-testing.5",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -90,7 +90,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.3.2-testing.0",
+        "@evoke-platform/context": "^1.3.2-0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },