@evoke-platform/ui-components 1.10.0-dev.11 → 1.10.0-dev.13

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -430,7 +430,7 @@ const RepeatableField = (props) => {
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (relatedInstances.find((i) => i.id === selectedRow) ?? {}) : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
+            objectInputCommonProps: { apiServices, setSnackbarError }, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId
                 ? { instanceId: instance.id, propertyId: property.relatedPropertyId }
                 : undefined, richTextEditor: richTextEditor })),

package/dist/published/components/custom/FormField/DatePickerSelect/DatePickerSelect.js

@@ -1,6 +1,7 @@
 import { DateTimeFormatter } from '@js-joda/core';
 import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate, LocalDate, nativeJs } from '../../../../util';
 import { DatePicker, LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
@@ -29,6 +30,7 @@ const asMonthDayYearFormat = (date) => {
 const DatePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, onChange, additionalProps, } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
+    const { onAutosave } = useFormContext();
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
@@ -36,8 +38,19 @@ const DatePickerSelect = (props) => {
         setValue(date);
         onChange && onChange(property.id, date, property);
     };
+    const handleAccept = async () => {
+        // Trigger autosave when date is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: asMonthDayYearFormat(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DatePicker, { value: value, onChange: handleChange, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+        React.createElement(DatePicker, { value: value, onChange: handleChange, onAccept: handleAccept, inputFormat: "MM/dd/yyyy", renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

package/dist/published/components/custom/FormField/DateTimePickerSelect/DateTimePickerSelect.js

@@ -1,6 +1,7 @@
 import { LocalDate, LocalDateTime, LocalTime, nativeJs } from '@js-joda/core';
 import { omit } from 'lodash';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate } from '../../../../util';
 import { DateTimePicker, LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
@@ -30,6 +31,7 @@ const formatDateTime = (date) => {
 const DateTimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, additionalProps } = props;
     const [value, setValue] = useState(asCalendarDate(defaultValue));
+    const { onAutosave } = useFormContext();
     useEffect(() => {
         setValue(asCalendarDate(defaultValue));
     }, [defaultValue]);
@@ -43,8 +45,19 @@ const DateTimePickerSelect = (props) => {
         setValue(date);
         props.onChange && props.onChange(property.id, date, property);
     };
+    const handleAccept = async () => {
+        // Trigger autosave when date/time is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{ ...props, defaultValue: formatDateTime(value) } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(DateTimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
+        React.createElement(DateTimePicker, { value: value, onChange: handleChange, onAccept: handleAccept, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

package/dist/published/components/custom/FormField/TimePickerSelect/TimePickerSelect.js

@@ -3,11 +3,13 @@ import { TimePicker } from '@mui/x-date-pickers';
 import { isUndefined, omit, padStart } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useEffect, useState } from 'react';
+import { useFormContext } from '../../../../theme/hooks';
 import { InvalidDate } from '../../../../util';
 import { LocalizationProvider, TextField } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
 const TimePickerSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, required, size, onBlur, placeholder, additionalProps, } = props;
+    const { onAutosave } = useFormContext();
     const values = defaultValue ? defaultValue.split(':') : undefined;
     const hour = values ? parseInt(values[0]) : undefined;
     const minute = values ? parseInt(values[1]) : undefined;
@@ -41,11 +43,22 @@ const TimePickerSelect = (props) => {
             props.onChange && props.onChange(property.id, date, property);
         }
     };
+    const handleAccept = async () => {
+        // Trigger autosave when time is accepted (picker closes after selection)
+        if (onAutosave) {
+            try {
+                await onAutosave(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
+        }
+    };
     return readOnly ? (React.createElement(InputFieldComponent, { ...{
             ...props,
             defaultValue: value instanceof LocalDateTime ? DateTime.fromISO(value.toString()).toFormat('hh:mm a') : '',
         } })) : (React.createElement(LocalizationProvider, null,
-        React.createElement(TimePicker, { value: value, onChange: handleChange, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
+        React.createElement(TimePicker, { value: value, onChange: handleChange, onAccept: handleAccept, renderInput: (params) => (React.createElement(TextField, { ...params, id: id, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, required: required, sx: { background: 'white', borderRadius: '8px' }, size: size ?? 'medium', placeholder: placeholder, 
                 // merges MUI inputProps with additionalProps.inputProps in a way that still shows the value
                 inputProps: {
                     ...params.inputProps,

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

@@ -155,9 +155,10 @@ const FormRendererInternal = (props) => {
         errors,
         hasAccordions: hasSections && isSmallerThanMd,
         shouldShowValidationErrors: isSubmitted,
-        form,
+        isDeleteForm: form.id === '',
         action,
         validationErrorsRef: validationErrorsRef,
+        autosaveEnabled: !!form.autosaveActionId,
     };
     const footerProps = {
         onSubmit: unregisterHiddenFieldsAndSubmit,

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

@@ -13,9 +13,8 @@ function FormRendererContainer(props) {
     const { instanceId, pageNavigation, documentId, dataType, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
-    const { id: appId, defaultPages } = useApp();
+    const { id: appId } = useApp();
     const [hasDocumentUpdateAccess, setHasDocumentUpdateAccess] = useState();
-    const [defaultPagesWithSlugs, setDefaultPagesWithSlugs] = useState({});
     const [sanitizedObject, setSanitizedObject] = useState();
     const [navigationSlug, setNavigationSlug] = useState();
     const [parameters, setParameters] = useState();
@@ -103,19 +102,6 @@ function FormRendererContainer(props) {
                 setNavigationSlug(page?.slug);
             });
         }
-        if (defaultPages) {
-            for (const [objectId, defaultPage] of Object.entries(defaultPages)) {
-                const pageId = defaultPage.includes('/')
-                    ? encodePageSlug(defaultPage.split('/').slice(2).join('/'))
-                    : defaultPage;
-                apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${pageId}`)).then((page) => {
-                    setDefaultPagesWithSlugs({
-                        ...defaultPagesWithSlugs,
-                        [objectId]: '/' + page.appId + '/' + page.slug,
-                    });
-                });
-            }
-        }
     }, []);
     useEffect(() => {
         if (dataType === 'documents' || form)

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

@@ -4,10 +4,11 @@ import React, { useEffect } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../../core';
 import { Box } from '../../../layout';
+import { ViewOnlyEntryRenderer } from '../../ViewDetailsV2';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
 import { getErrorCountForSection } from './utils';
 function AccordionSections(props) {
-    const { entry } = props;
+    const { entry, readOnly } = props;
     const { errors, expandedSections, setExpandedSections, expandAll, setExpandAll, showSubmitError, width } = useFormContext();
     const { isAbove } = useWidgetSize({
         scroll: false,
@@ -92,6 +93,8 @@ function AccordionSections(props) {
                 '&:before': {
                     display: 'none',
                 },
+                ...(sectionIndex === lastSection && { marginBottom: '16px  !important' }),
+                ...(sectionIndex === 0 && { marginTop: '16px !important' }),
             } },
             React.createElement(AccordionSummary, { sx: {
                     '&.Mui-expanded': {
@@ -133,7 +136,9 @@ function AccordionSections(props) {
                             margin: '0px',
                             marginRight: '16px',
                         } }, errorCount)))),
-            React.createElement(AccordionDetails, null, section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry }))))));
+            React.createElement(AccordionDetails, null, readOnly
+                ? section.entries?.map((sectionEntry, index) => (React.createElement(ViewOnlyEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry })))
+                : section.entries?.map((sectionEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: sectionEntry.type + index, entry: sectionEntry }))))));
     })));
 }
 export default AccordionSections;

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

@@ -7,7 +7,7 @@ export type BodyProps = {
     entries: FormEntry[];
     isInitializing: boolean;
     errors?: FieldErrors;
-    shouldShowValidationErrors: boolean;
+    shouldShowValidationErrors?: boolean;
     hasAccordions: boolean;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;

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

@@ -55,7 +55,7 @@ const FieldWrapper = (props) => {
     const remainingChars = maxLength ? maxLength - charCount : undefined;
     return (React.createElement(Box, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            inputType !== 'boolean' && (React.createElement(InputLabel, { htmlFor: inputId, sx: {
+            (inputType !== 'boolean' || viewOnly) && (React.createElement(InputLabel, { htmlFor: inputId, sx: {
                     display: 'flex',
                     alignItems: 'center',
                     color: viewOnly ? 'text.secondary' : 'text.primary',

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

@@ -5,7 +5,7 @@ import { ExpandedSection, SimpleEditorProps } from './types';
 type FormContextType = {
     fetchedOptions: FieldValues;
     setFetchedOptions: (newData: FieldValues) => void;
-    getValues: UseFormGetValues<FieldValues>;
+    getValues?: UseFormGetValues<FieldValues>;
     object?: Obj;
     errors?: FieldValues;
     instance?: FieldValues;
@@ -15,7 +15,7 @@ type FormContextType = {
     setExpandedSections?: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
     setExpandAll?: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
     parameters?: InputParameter[];
-    handleChange: (name: string, value: unknown) => void | Promise<void>;
+    handleChange?: (name: string, value: unknown) => void | Promise<void>;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     fieldHeight?: 'small' | 'medium';
     triggerFieldReset?: boolean;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.d.ts

@@ -2,7 +2,16 @@ import { InputField, InputParameter, InputParameterReference, Property, Readonly
 import React from 'react';
 interface AddressProps {
     entry: InputParameterReference | ReadonlyField | InputField;
+    /**
+     * Indicates that the field is a readonlyField in an action form.
+     * Used for regular form read-only fields.
+     */
     readOnly?: boolean;
+    /**
+     * Indicates that the field should not have a gray background.
+     * Used for ViewDetails widgets.
+     */
+    viewOnly?: boolean;
     entryId: string;
     fieldDefinition: InputParameter | Property;
 }

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.js

@@ -6,12 +6,12 @@ import FormField from '../../../FormField';
 import FieldWrapper from '../FieldWrapper';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 function AddressFields(props) {
-    const { entry, readOnly, entryId, fieldDefinition } = props;
+    const { entry, readOnly, viewOnly, entryId, fieldDefinition } = props;
     const { getValues, instance, errors, handleChange, onAutosave, fieldHeight, parameters } = useFormContext();
     const apiServices = useApiServices();
     const addressObject = entryId.split('.')[0];
     const addressField = entryId.split('.')[1];
-    const addressValues = entry.type === 'readonlyField' ? instance?.[addressObject] : getValues(addressObject);
+    const addressValues = entry.type === 'readonlyField' ? instance?.[addressObject] : getValues ? getValues(addressObject) : undefined;
     const fieldValue = addressValues?.[addressField];
     const display = entry?.display;
     const validation = fieldDefinition?.validation
@@ -31,7 +31,7 @@ function AddressFields(props) {
                     const fullKey = `${addressObject}.${key}`;
                     if (parameters?.some((p) => p.id === fullKey)) {
                         const fieldValue = value[key];
-                        await handleChange(fullKey, fieldValue);
+                        handleChange && (await handleChange(fullKey, fieldValue));
                     }
                 }
                 // Autosave immediately after autocomplete fills all fields
@@ -43,7 +43,7 @@ function AddressFields(props) {
                 }
             }
             else {
-                await handleChange(name, value);
+                handleChange && (await handleChange(name, value));
             }
         }
         catch (error) {
@@ -52,7 +52,7 @@ function AddressFields(props) {
     };
     const addressErrors = errors?.[addressObject];
     const addressFieldError = addressErrors?.[addressField];
-    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: entry.display?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!readOnly, prefix: display?.prefix, suffix: display?.suffix }, !readOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, onBlur: () => {
+    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: entry.display?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!(viewOnly ?? readOnly), prefix: display?.prefix, suffix: display?.suffix }, !viewOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, onBlur: () => {
             onAutosave?.(entryId)?.catch((error) => {
                 console.error('Autosave failed:', error);
             });

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Criteria.js

@@ -61,7 +61,7 @@ export default function Criteria(props) {
         if (criteria || value) {
             const newValue = criteria ?? null;
             try {
-                await handleChange(fieldDefinition.id, newValue);
+                handleChange && (await handleChange(fieldDefinition.id, newValue));
             }
             catch (error) {
                 console.error('Failed to update field:', error);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -53,7 +53,7 @@ export const Document = (props) => {
         const newDocuments = [...(documents ?? []), ...(files ?? [])];
         setDocuments(newDocuments);
         try {
-            await handleChange(id, newDocuments);
+            handleChange && (await handleChange(id, newDocuments));
         }
         catch (error) {
             console.error('Failed to update field:', error);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
-    handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    handleChange?: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
     canUpdateProperty: boolean;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -92,7 +92,7 @@ export const DocumentList = (props) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
         const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
         try {
-            await handleChange(id, newValue);
+            handleChange && (await handleChange(id, newValue));
         }
         catch (error) {
             console.error('Failed to update field:', error);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.js

@@ -68,7 +68,7 @@ export const Image = (props) => {
             const dataUrl = await blobToDataUrl(file);
             setImage(dataUrl);
             try {
-                await handleChange(id, dataUrl);
+                handleChange && (await handleChange(id, dataUrl));
             }
             catch (error) {
                 console.error('Failed to update field:', error);
@@ -85,7 +85,7 @@ export const Image = (props) => {
     const handleRemove = async (e) => {
         setImage(null);
         try {
-            await handleChange(id, '');
+            handleChange && (await handleChange(id, ''));
         }
         catch (error) {
             console.error('Failed to update field:', error);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -43,7 +43,7 @@ const UserProperty = (props) => {
     async function handleChangeUserProperty(id, value) {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
         try {
-            await handleChange(id, updatedValue);
+            handleChange && (await handleChange(id, updatedValue));
         }
         catch (error) {
             console.error('Failed to update field:', error);

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

@@ -7,7 +7,7 @@ import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Autocomplete, Button, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
-import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
+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;
@@ -15,7 +15,6 @@ const ObjectPropertyInput = (props) => {
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
-    const [allDefaultPages, setAllDefaultPages] = useState(defaultPages ?? {});
     const [loadingOptions, setLoadingOptions] = useState(false);
     const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${id}NavigationSlug`]);
     const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${id}RelatedObject`]);
@@ -24,7 +23,6 @@ const ObjectPropertyInput = (props) => {
     const [hasFetched, setHasFetched] = useState(fetchedOptions[`${id}OptionsHaveFetched`] || false);
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
     const [layout, setLayout] = useState();
-    const [appId, setAppId] = useState(fetchedOptions[`${id}AppId`]);
     const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
@@ -98,7 +96,7 @@ const ObjectPropertyInput = (props) => {
                     if (instances && instances.length > 0) {
                         setSelectedInstance(instances[0]);
                         try {
-                            await handleChangeObjectField(id, instances[0]);
+                            handleChangeObjectField && (await handleChangeObjectField(id, instances[0]));
                         }
                         catch (error) {
                             console.error('Failed to update field:', error);
@@ -164,38 +162,43 @@ const ObjectPropertyInput = (props) => {
         setSelectedInstance(initialValue);
     }, [initialValue]);
     useEffect(() => {
-        if (formId || action?.defaultFormId) {
-            apiServices
-                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
-                .then((evokeForm) => {
-                setForm(evokeForm);
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
-        else if (action) {
-            apiServices
-                .get(getPrefixedUrl('/forms'), {
-                params: {
-                    filter: {
-                        where: {
-                            actionId: action.id,
-                            objectId: fieldDefinition.objectId,
+        // Early return if already fetched
+        if (fetchedOptions[`${id}Form`])
+            return;
+        const fetchForm = async () => {
+            try {
+                let evokeForm;
+                if (formId || action?.defaultFormId) {
+                    evokeForm = await apiServices.get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`));
+                }
+                else if (action) {
+                    const matchingForms = await apiServices.get(getPrefixedUrl('/forms'), {
+                        params: {
+                            filter: {
+                                where: {
+                                    actionId: action.id,
+                                    objectId: fieldDefinition.objectId,
+                                },
+                            },
                         },
-                    },
-                },
-            })
-                .then((matchingForms) => {
-                if (matchingForms.length === 1) {
-                    setForm(matchingForms[0]);
+                    });
+                    if (matchingForms.length === 1) {
+                        evokeForm = matchingForms[0];
+                    }
                 }
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
-    }, [action, formId]);
+                if (evokeForm) {
+                    setForm(evokeForm);
+                    setFetchedOptions({
+                        [`${id}Form`]: evokeForm,
+                    });
+                }
+            }
+            catch (error) {
+                console.error('Error fetching form:', error);
+            }
+        };
+        fetchForm();
+    }, [action, formId, id, fieldDefinition.objectId, apiServices, fetchedOptions]);
     useEffect(() => {
         if (!fetchedOptions[`${id}RelatedObject`]) {
             apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), (error, object) => {
@@ -209,31 +212,24 @@ const ObjectPropertyInput = (props) => {
         }
     }, [fieldDefinition.objectId, fetchedOptions, id]);
     useEffect(() => {
-        const fetchDefaultPages = async () => {
-            if (parameters && !fetchedOptions['allDefaultPages']) {
+        (async () => {
+            if (parameters && fetchedOptions[`${id}NavigationSlug`] === undefined) {
                 const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
-                setAllDefaultPages(pages);
-                setFetchedOptions({ [`allDefaultPages`]: pages });
-            }
-        };
-        fetchDefaultPages();
-    }, [fetchedOptions, parameters, defaultPages, findDefaultPageSlugFor]);
-    useEffect(() => {
-        if (fieldDefinition.objectId &&
-            allDefaultPages &&
-            allDefaultPages[fieldDefinition.objectId] &&
-            (!fetchedOptions?.[`${id}NavigationSlug`] || !fetchedOptions[`${id}AppId`])) {
-            apiServices.get(getPrefixedUrl(`/apps/${allDefaultPages[fieldDefinition.objectId].split('/').slice(1, 2)}/pages/${encodePageSlug(allDefaultPages[fieldDefinition.objectId].split('/').slice(2).join('/'))}`), (error, page) => {
-                if (error) {
-                    console.error(error);
+                if (fieldDefinition.objectId && pages[fieldDefinition.objectId]) {
+                    setNavigationSlug(pages[fieldDefinition.objectId]);
+                    setFetchedOptions({
+                        [`${id}NavigationSlug`]: pages[fieldDefinition.objectId],
+                    });
                 }
                 else {
-                    setAppId(page?.appId);
-                    setNavigationSlug(page?.slug);
+                    // setting the nav slug to null if there is no default page for this object to avoid re-fetching
+                    setFetchedOptions({
+                        [`${id}NavigationSlug`]: null,
+                    });
                 }
-            });
-        }
-    }, [fieldDefinition, allDefaultPages, fetchedOptions, id]);
+            }
+        })();
+    }, [parameters, defaultPages, findDefaultPageSlugFor, fieldDefinition, fetchedOptions]);
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -261,12 +257,7 @@ const ObjectPropertyInput = (props) => {
                 [`${id}NavigationSlug`]: navigationSlug,
             });
         }
-        if (appId && !fetchedOptions[`${id}AppId`]) {
-            setFetchedOptions({
-                [`${id}AppId`]: appId,
-            });
-        }
-    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, appId, id]);
+    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, id]);
     const dropdownOptions = [
         ...options.map((o) => ({ label: o.name, value: o.id })),
         ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
@@ -409,7 +400,7 @@ const ObjectPropertyInput = (props) => {
                         if (isNil(value)) {
                             setDropdownInput(undefined);
                             setSelectedInstance(undefined);
-                            await handleChangeObjectField(id, null);
+                            handleChangeObjectField && (await handleChangeObjectField(id, null));
                             // Trigger autosave immediately upon clearing
                             try {
                                 await onAutosave?.(id);
@@ -424,7 +415,7 @@ const ObjectPropertyInput = (props) => {
                         else {
                             const selectedInstance = options.find((o) => o.id === value?.value);
                             setSelectedInstance(selectedInstance);
-                            await handleChangeObjectField(id, selectedInstance);
+                            handleChangeObjectField && (await handleChangeObjectField(id, selectedInstance));
                             // Trigger autosave immediately upon selection
                             try {
                                 await onAutosave?.(id);
@@ -474,7 +465,7 @@ const ObjectPropertyInput = (props) => {
                         ...params.InputProps,
                         startAdornment: selectedInstance?.id ? (React.createElement(Typography, { onClick: () => {
                                 if (navigationSlug && selectedInstance?.id) {
-                                    navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
+                                    navigateTo(`/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
                                 }
                             }, sx: {
                                 cursor: navigationSlug ? 'pointer' : 'default',
@@ -504,14 +495,14 @@ const ObjectPropertyInput = (props) => {
                             ? '#999'
                             : '#212B36',
                 }, variant: "body2", href: navigationSlug && !isModal
-                    ? `${'/app'}/${appId}/${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
+                    ? `${'/app'}${navigationSlug.replace(':instanceId', selectedInstance?.id ?? '')}`
                     : undefined, "aria-label": selectedInstance?.name }, selectedInstance?.name ? selectedInstance?.name : readOnly && 'None')),
             !readOnly && selectedInstance ? (React.createElement(Tooltip, { title: `Unlink` },
                 React.createElement("span", null,
                     React.createElement(IconButton, { onClick: async (event) => {
                             event.stopPropagation();
                             try {
-                                await handleChangeObjectField(id, null);
+                                handleChangeObjectField && (await handleChangeObjectField(id, null));
                             }
                             catch (error) {
                                 console.error('Failed to update field:', error);

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

@@ -40,7 +40,7 @@ const RelatedObjectInstance = (props) => {
     });
     const { isXs, isSm } = breakpoints;
     const linkExistingInstance = async () => {
-        if (selectedRow) {
+        if (selectedRow && handleChangeObjectField) {
             setSelectedInstance(selectedRow);
             try {
                 await handleChangeObjectField(id, selectedRow);
@@ -74,7 +74,7 @@ const RelatedObjectInstance = (props) => {
                 input: submission,
             });
             try {
-                await handleChangeObjectField(id, response);
+                handleChangeObjectField && (await handleChangeObjectField(id, response));
             }
             catch (error) {
                 console.error('Failed to update field:', error);

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

@@ -1,21 +1,29 @@
-import { Action, EvokeForm } from '@evoke-platform/context';
+import { Action } from '@evoke-platform/context';
 import { SxProps } from '@mui/material';
 import React from 'react';
 import { FieldErrors } from 'react-hook-form';
 import { ExpandedSection } from './types';
 export type HeaderProps = {
     hasAccordions: boolean;
-    shouldShowValidationErrors: boolean;
+    shouldShowValidationErrors?: boolean;
     validationErrorsRef?: React.Ref<HTMLDivElement>;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;
     onCollapseAll?: () => void;
-    form: EvokeForm;
+    /**
+     * Indicates whether this is a "delete form".
+     * This flag adjusts header styling specifically for delete forms.
+     *
+     * @warning This prop is temporary and will be removed
+     * when delete form styling is finalized.
+     */
+    isDeleteForm?: boolean;
     errors?: FieldErrors;
     action?: Action;
     autosaving?: boolean;
     sx?: SxProps;
+    autosaveEnabled?: boolean;
 };
 declare const Header: React.FC<HeaderProps>;
 export type TitleProps = {