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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { PropertyProtection as PropertyProtectionType } from '@evoke-platform/context';
+import React from 'react';
+import { ObjectProperty } from '../../../../types';
+type PropertyProtectionProps = {
+    parameter: ObjectProperty;
+    protection?: PropertyProtectionType;
+    mask?: string;
+    canEdit: boolean;
+    value: unknown;
+    handleChange?: (value: unknown) => void;
+    setCurrentDisplayValue: (value: unknown) => void;
+    mode: 'mask' | 'full' | 'edit';
+    setMode: (mode: 'mask' | 'full' | 'edit') => void;
+};
+declare const PropertyProtection: React.FC<PropertyProtectionProps>;
+export default PropertyProtection;

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

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

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

package/dist/published/components/custom/FormV2/components/utils.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;
@@ -102,3 +103,4 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], obj
  */
 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 obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;

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

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