@evoke-platform/ui-components 1.10.0-testing.9 → 1.10.1-dev.0

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

@@ -0,0 +1,113 @@
+import { useApiServices } from '@evoke-platform/context';
+import React, { useEffect, useState } from 'react';
+import { CheckRounded, ClearRounded, EditRounded, VisibilityOffRounded, VisibilityRounded } from '../../../../icons';
+import { useFormContext } from '../../../../theme/hooks';
+import { Divider, IconButton, InputAdornment, Snackbar, Tooltip } from '../../../core';
+import { getPrefixedUrl } from '../../Form/utils';
+import { obfuscateValue } from './utils';
+const PropertyProtection = (props) => {
+    const { parameter, mask, protection, canEdit, value, mode, setMode, setCurrentDisplayValue, handleChange } = props;
+    const apiServices = useApiServices();
+    const { object, instance, fetchedOptions, setFetchedOptions } = useFormContext();
+    const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${parameter.id}-hasViewPermission`] || undefined);
+    const [fullValue, setFullValue] = useState(fetchedOptions[`${parameter.id}-fullValue`]);
+    const [isLoading, setIsLoading] = useState(hasViewPermission === undefined);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (hasViewPermission === undefined && instance) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/checkAccess?action=readProtected&fieldId=${parameter.id}`))
+                .then((viewPermissionCheck) => {
+                setHasViewPermission(viewPermissionCheck.result);
+                setFetchedOptions({ [`${parameter.id}-hasViewPermission`]: viewPermissionCheck.result });
+            })
+                .catch(() => {
+                setError('Failed to check view permission.');
+                setHasViewPermission(false);
+            })
+                .finally(() => setIsLoading(false));
+        }
+    }, []);
+    const hasValueChangedOrViewed = value !== obfuscateValue(value, { protection, mask });
+    const canViewFull = hasViewPermission || hasValueChangedOrViewed;
+    const fetchFullValue = async () => {
+        // if instance doesn't exist, cannot fetch full value
+        if (!instance) {
+            return undefined;
+        }
+        try {
+            const value = await apiServices.get(getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/properties/${parameter.id}?showProtectedValue=true`));
+            setFullValue(value);
+            setFetchedOptions({ [`${parameter.id}-fullValue`]: value });
+            return value;
+        }
+        catch (error) {
+            setError(`Failed to retrieve full ${parameter.name} value`);
+            return '';
+        }
+    };
+    const handleModeChange = async (newMode) => {
+        if (newMode === 'edit') {
+            if (!canEdit) {
+                // sanity check that user can edit
+                return;
+            }
+            if (!hasViewPermission && !hasValueChangedOrViewed) {
+                handleChange?.(undefined);
+                setCurrentDisplayValue(undefined);
+            }
+        }
+        else if (newMode === 'full') {
+            let valueToDisplay;
+            if (hasValueChangedOrViewed) {
+                // Use the changed value if available
+                valueToDisplay = fullValue;
+            }
+            else {
+                valueToDisplay = fullValue ?? (await fetchFullValue());
+            }
+            setCurrentDisplayValue(valueToDisplay);
+            handleChange?.(valueToDisplay);
+        }
+        else {
+            const maskedValue = obfuscateValue(value, { protection, mask });
+            setCurrentDisplayValue(maskedValue);
+            // save current value as full value, so value can be reverted as needed
+            if (hasValueChangedOrViewed) {
+                setFullValue(value);
+                setFetchedOptions({ [`${parameter.id}-fullValue`]: value });
+            }
+        }
+        setMode(newMode);
+    };
+    const handleRevert = async () => {
+        const revertedValue = fullValue ?? (await fetchFullValue());
+        handleChange?.(revertedValue);
+        setCurrentDisplayValue(obfuscateValue(revertedValue, { protection, mask }));
+        setMode('mask');
+    };
+    if (isLoading || (!canEdit && !hasViewPermission)) {
+        return null;
+    }
+    return (React.createElement(InputAdornment, { position: "end", sx: { paddingLeft: parameter?.type === 'date' ? '12px' : undefined } },
+        mode === 'edit' && (React.createElement(React.Fragment, null,
+            React.createElement(IconButton, { onClick: () => handleModeChange('mask'), "aria-label": "Done Editing" },
+                React.createElement(Tooltip, { title: "Done Editing" },
+                    React.createElement(CheckRounded, { fontSize: "small" }))),
+            React.createElement(Divider, { orientation: "vertical", sx: { mx: 0.5, height: 24 } }),
+            React.createElement(IconButton, { size: "small", onClick: handleRevert, "aria-label": "Revert value" },
+                React.createElement(Tooltip, { title: "Revert value" },
+                    React.createElement(ClearRounded, { fontSize: "small" }))))),
+        canEdit && (mode === 'full' || (!hasViewPermission && !hasValueChangedOrViewed && mode === 'mask')) && (React.createElement(IconButton, { onClick: () => handleModeChange('edit'), "aria-label": canViewFull ? 'Edit value' : 'Enter value' },
+            React.createElement(Tooltip, { title: "Edit value" },
+                React.createElement(EditRounded, { fontSize: "small" })))),
+        canEdit && canViewFull && mode === 'full' && (React.createElement(Divider, { orientation: "vertical", sx: { mx: 0.5, height: 24 } })),
+        canViewFull && mode === 'mask' && (React.createElement(IconButton, { onClick: () => handleModeChange('full'), "aria-label": "Show full value" },
+            React.createElement(Tooltip, { title: "Show full value" },
+                React.createElement(VisibilityOffRounded, { fontSize: "small" })))),
+        canViewFull && mode === 'full' && (React.createElement(IconButton, { onClick: () => handleModeChange('mask'), "aria-label": "Hide value" },
+            React.createElement(Tooltip, { title: "Hide value" },
+                React.createElement(VisibilityRounded, { fontSize: "small" })))),
+        React.createElement(Snackbar, { open: !!error, handleClose: () => setError(null), error: true, message: error })));
+};
+export default PropertyProtection;

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

@@ -1,6 +1,7 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
 import DOMPurify from 'dompurify';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { TextField, Typography } from '../../../core';
@@ -37,11 +38,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor, parameters, handleChange, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
-    // If the entry is hidden, clear its value and any nested values, and skip rendering
-    if (!entryIsVisible(entry, getValues(), instance)) {
-        return null;
-    }
+    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, form, width, } = useFormContext();
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -52,20 +49,26 @@ export function RecursiveEntryRenderer(props) {
     const userAccount = useAuthenticationContext()?.account;
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
-    const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues(entryId);
+    const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
     const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
     const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
+        if (!object)
+            return undefined;
         return getFieldDefinition(entry, object, parameters, form?.id === 'documentForm');
     }, [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);
         }
     }, [fieldDefinition, instance]);
+    if (associatedObject?.propertyId === entryId)
+        return null;
+    // If the entry is hidden, clear its value and any nested values, and skip rendering
+    if (!getValues || !entryIsVisible(entry, instance, getValues())) {
+        return null;
+    }
     if (entry.type === 'content') {
         return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(entry.html) }, sx: {
                 fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
@@ -74,7 +77,7 @@ export function RecursiveEntryRenderer(props) {
     else if ((entry.type === 'input' || entry.type === 'readonlyField' || entry.type === 'inputField') &&
         fieldDefinition) {
         if (isAddressProperty(entryId)) {
-            return React.createElement(AddressFields, { entry: entry, entryId: entryId, fieldDefinition: fieldDefinition });
+            return (React.createElement(AddressFields, { entry: entry, entryId: entryId, fieldDefinition: fieldDefinition, readOnly: entry.type === 'readonlyField' }));
         }
         else if (fieldDefinition.type === 'image') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -82,7 +85,7 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'object') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(ObjectPropertyInput, { fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
+                React.createElement(ObjectPropertyInput, { relatedObjectId: !fieldDefinition.objectId ? display?.relatedObjectId : fieldDefinition.objectId, fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: validation?.criteria
                         ? updateCriteriaInputs(validation.criteria, getValues(), userAccount)
                         : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
                         ? display?.defaultValue.sortBy
@@ -97,21 +100,35 @@ export function RecursiveEntryRenderer(props) {
                 React.createElement(UserProperty, { id: entryId, value: fieldValue, error: !!errors?.[entryId], readOnly: entry.type === 'readonlyField', hasDescription: !!display?.description })));
         }
         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, entry: entry })));
+            if (fieldDefinition?.manyToManyPropertyId) {
+                if (middleObject && !isEmpty(middleObject)) {
+                    return (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 }))));
+                }
+                else {
+                    // when in the builder preview, the middle object won't be fetched so instead show an empty field
+                    const singleSelectProperty = structuredClone(fieldDefinition);
+                    singleSelectProperty.type = 'choices';
+                    return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(FormField, { id: entryId, property: singleSelectProperty, defaultValue: fieldValue || getValues(entryId), selectOptions: [], size: fieldHeight })));
+                }
+            }
+            else {
+                return (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, entry: entry })));
+            }
         }
         else if (fieldDefinition.type === 'richText') {
-            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor && handleChange ? (React.createElement(RichTextEditor
+            // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
+            , { 
                 // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
-                id: entry.uniqueId,
-                value: fieldValue,
-                handleUpdate: (value) => handleChange(entryId, value),
-                format: 'rtf',
-                disabled: entry.type === 'readonlyField',
-                rows: display?.rowCount,
-                hasError: !!errors?.[entryId],
-            })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
+                id: entry.uniqueId, value: fieldValue, handleUpdate: (value) => handleChange(entryId, value), format: "rtf", disabled: entry.type === 'readonlyField', rows: display?.rowCount, hasError: !!errors?.[entryId] })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
+                    onAutosave?.(entryId)?.catch((error) => {
+                        console.error('Autosave failed:', error);
+                    });
+                }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, size: fieldHeight }))));
         }
         else if (fieldDefinition.type === 'document') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -136,6 +153,7 @@ export function RecursiveEntryRenderer(props) {
                     'aria-describedby': `${entryId}-description`,
                 };
             }
+            const objectProperty = object?.properties?.find((p) => p.id === entryId);
             return (React.createElement(FieldWrapper
             /*
              * Key remounts the field if a value is changed.
@@ -154,9 +172,14 @@ export function RecursiveEntryRenderer(props) {
                     : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors), errorMessage: undefined },
                 React.createElement(FormField, { id: entryId, 
                     // TODO: Ideally the FormField prop should be called parameter but can't change the name for backwards compatibility reasons
-                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
+                    property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
+                        // Blur event - reads current value from formData
+                        onAutosave?.(entryId)?.catch((error) => {
+                            console.error('Autosave failed:', error);
+                        });
+                    }, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
                         ? display?.booleanDisplay
-                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
+                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue, protection: objectProperty?.protection })));
         }
     }
     else if (entry.type === 'columns') {

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

@@ -29,7 +29,7 @@ function ValidationErrors(props) {
             border: '1px solid #721c24',
             padding: '8px 24px',
             borderRadius: '4px',
-            flex: 1,
+            flex: '1 1 100%',
             ...sx,
         } },
         React.createElement(Typography, { sx: { color: '#721c24', mt: '16px', mb: '8px' } }, "Please fix the following errors before submitting:"),

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

@@ -54,6 +54,7 @@ export type ObjectPropertyInputProps = {
     hasDescription?: boolean;
     createActionId?: string;
     formId?: string;
+    relatedObjectId?: string;
 };
 export type Page = {
     id: string;
@@ -93,6 +94,7 @@ export type EntryRendererProps = {
 };
 export type SectionsProps = {
     entry: ExpandedSections;
+    readOnly?: boolean;
 };
 export type DocumentData = {
     id: string;

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

@@ -2,6 +2,7 @@
 import { Action, ApiServices, Column, Columns, EvokeForm, 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 { ObjectProperty } from '../../../../types';
 import { AutocompleteOption } from '../../../core';
 import { Document, DocumentData, SavedDocumentReference } from './types';
 export declare const scrollIntoViewWithOffset: (el: HTMLElement, offset: number, container?: HTMLElement) => void;
@@ -10,7 +11,7 @@ export declare function isAddressProperty(key: string): boolean;
 /**
  * Determine if a form entry is visible or not.
  */
-export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+export declare const entryIsVisible: (entry: FormEntry, instance?: FieldValues, formValues?: FieldValues) => boolean;
 /**
  * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
  *
@@ -86,8 +87,8 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     message?: string;
     isError: boolean;
 }>>): Promise<FieldValues>;
-export declare function filterEmptySections(entry: Sections | Columns, formData: FieldValues, instance?: FieldValues): Sections | Columns | null;
-export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object?: Obj, parameters?: InputParameter[]): FormEntry[];
+export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
+export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.
  *
@@ -101,4 +102,5 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], obj
  * This ensures that any plain text input will be safely represented in RTF without losing formatting or characters.
  */
 export declare function plainTextToRtf(plainText: string): string;
-export declare function getFieldDefinition(entry: FormEntry, object?: Obj, parameters?: InputParameter[], isDocument?: boolean): InputParameter | Property | undefined;
+export declare function getFieldDefinition(entry: FormEntry, object: Obj, parameters?: InputParameter[], isDocument?: boolean): InputParameter | Property | undefined;
+export declare function obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;

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

@@ -68,7 +68,7 @@ export function isAddressProperty(key) {
 /**
  * Determine if a form entry is visible or not.
  */
-export const entryIsVisible = (entry, formValues, instance) => {
+export const entryIsVisible = (entry, instance, formValues) => {
     const display = 'display' in entry ? entry.display : undefined;
     const { visibility } = display ?? ('visibility' in entry ? entry : {});
     if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
@@ -562,6 +562,7 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
     const allDocuments = [];
     const formData = new FormData();
     for (const [index, file] of files.entries()) {
+        // Only upload File instances; SavedDocumentReference objects are already uploaded
         if ('size' in file) {
             formData.append(`files[${index}]`, file);
         }
@@ -621,13 +622,14 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
  * Returns the cleaned submission ready for submitting.
  */
 export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
+    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
     for (const [key, value] of Object.entries(submission)) {
+        const entry = allEntries?.find((entry) => getEntryId(entry) === key);
         if (isArray(value)) {
+            // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
                 try {
-                    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
-                    const entry = allEntries?.find((entry) => getEntryId(entry) === key);
                     const uploadedDocuments = await uploadDocuments(value, {
                         type: '',
                         view_permission: '',
@@ -652,10 +654,16 @@ export async function formatSubmission(submission, apiServices, objectId, instan
         else if (typeof value === 'object' && value !== null) {
             if (Object.values(value).every((v) => v === undefined)) {
                 submission[key] = undefined;
-                // only submit the name and id of a related object
+                // only submit the name and id of a regular related object
+                // and include objectId if it is a dynamic related object
             }
             else if ('id' in value && 'name' in value) {
-                submission[key] = pick(value, 'id', 'name');
+                submission[key] =
+                    entry &&
+                        ['input', 'inputField'].includes(entry.type) &&
+                        entry.display?.relatedObjectId
+                        ? pick(value, 'id', 'name', 'objectId')
+                        : pick(value, 'id', 'name');
             }
             else if (value instanceof LocalDateTime) {
                 submission[key] = normalizeDateTime(value);
@@ -667,21 +675,21 @@ export async function formatSubmission(submission, apiServices, objectId, instan
     }
     return submission;
 }
-export function filterEmptySections(entry, formData, instance) {
+export function filterEmptySections(entry, instance, formData) {
     if (entry.type === 'sections' && isArray(entry.sections)) {
         const visibleSections = entry.sections.filter((section) => {
             if (!section.entries || section.entries.length === 0)
                 return false;
             for (const sectionEntry of section.entries) {
                 if (sectionEntry.type === 'sections' || sectionEntry.type === 'columns') {
-                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, formData, instance)) {
+                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, instance, formData)) {
                         return false;
                     }
-                    else if (filterEmptySections(sectionEntry, formData, instance)) {
+                    else if (filterEmptySections(sectionEntry, instance, formData)) {
                         return true;
                     }
                 }
-                else if (entryIsVisible(sectionEntry, formData, instance)) {
+                else if (entryIsVisible(sectionEntry, instance, formData)) {
                     return true;
                 }
             }
@@ -701,13 +709,13 @@ export function filterEmptySections(entry, formData, instance) {
             let hasVisibleEntry = false;
             for (const columnEntry of column.entries) {
                 if (columnEntry.type === 'sections' || columnEntry.type === 'columns') {
-                    if (filterEmptySections(columnEntry, formData, instance)) {
+                    if (filterEmptySections(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }
                 }
                 else {
-                    if (entryIsVisible(columnEntry, formData, instance)) {
+                    if (entryIsVisible(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }
@@ -808,8 +816,8 @@ export function getFieldDefinition(entry, object, parameters, isDocument) {
         def = isDocument
             ? docProperties.find((prop) => prop.id === entry.propertyId)
             : isAddressProperty(entry.propertyId)
-                ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
-                : object?.properties?.find((prop) => prop.id === entry.propertyId);
+                ? object.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
+                : object.properties?.find((prop) => prop.id === entry.propertyId);
     }
     else if (entry.type === 'inputField') {
         def = entry.input;
@@ -825,3 +833,65 @@ export function getFieldDefinition(entry, object, parameters, isDocument) {
     }
     return def;
 }
+export function obfuscateValue(value, property) {
+    const { mask, protection } = property ?? {};
+    if (!protection?.maskChar) {
+        return value;
+    }
+    const maskChar = protection.maskChar;
+    const stringValue = String(value ?? '');
+    const simpleValue = mask && mask.length === stringValue.length ? stripValueOfMask(stringValue, mask) : stringValue;
+    let { preserveFirst = 0, preserveLast = 0 } = protection;
+    // Preserved character count should never exceed simpleValue length.
+    // Also, when using preserve characters, always hide at least 1 character.
+    preserveFirst = Math.min(preserveFirst, simpleValue.length - 1);
+    preserveLast = Math.min(preserveLast, simpleValue.length - preserveFirst - 1);
+    let obfuscatedValue = '';
+    if (simpleValue.length) {
+        const prefix = simpleValue.slice(0, preserveFirst);
+        const suffix = preserveLast ? simpleValue.slice(-preserveLast) : '';
+        const maskedSection = maskChar[0].repeat(simpleValue.length - preserveFirst - preserveLast);
+        obfuscatedValue = prefix + maskedSection + suffix;
+    }
+    // Reapply mask to the obfuscated value
+    if (mask && mask.length === stringValue.length) {
+        obfuscatedValue = applyMaskToObfuscatedValue(obfuscatedValue, mask);
+    }
+    return obfuscatedValue;
+}
+function stripValueOfMask(value, mask) {
+    const valueChars = [...value];
+    let simpleValue = '';
+    for (const [index, maskChar] of [...mask].entries()) {
+        const isPlaceholder = ['9', 'a', '*'].includes(maskChar);
+        if (!valueChars[index]) {
+            break;
+        }
+        else if (isPlaceholder) {
+            simpleValue += valueChars[index];
+        }
+    }
+    return simpleValue;
+}
+function applyMaskToObfuscatedValue(value, mask) {
+    const valueChars = [...value];
+    let maskedValue = '';
+    let valueIndex = 0;
+    for (const maskChar of mask) {
+        const isPlaceholder = ['9', 'a', '*'].includes(maskChar);
+        if (isPlaceholder) {
+            if (valueIndex < valueChars.length) {
+                maskedValue += valueChars[valueIndex];
+                valueIndex++;
+            }
+            else {
+                // Stop if value is shorter than mask
+                break;
+            }
+        }
+        else {
+            maskedValue += maskChar;
+        }
+    }
+    return maskedValue;
+}