@evoke-platform/ui-components 1.15.1 → 1.17.0

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

@@ -463,6 +463,9 @@ const CriteriaBuilder = (props) => {
                     borderStyle: 'hidden',
                     background: '#fff',
                 },
+                '.ruleGroup:not(:has(.rule, .ruleGroup .ruleGroup))': {
+                    backgroundColor: 'transparent',
+                },
                 '.ruleGroup-header': {
                     display: 'block',
                 },

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

@@ -1,4 +1,4 @@
-import { ActionInput, ActionInputType, ApiServices, AxiosError, FormEntry, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
+import { ActionInput, ActionInputType, ApiServices, AxiosError, FormEntry, FormletReference, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, PropertyType, UserAccount } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { LocalDateTime } from '@js-joda/core';
 import { AutocompleteOption } from '../../core';
@@ -7,7 +7,7 @@ export declare function determineComponentType(properties: Property[], parameter
 export declare function determineParameterType(componentType: string): PropertyType;
 export declare function getFlattenEntries(entries: FormEntry[]): InputParameterReference[];
 export declare function convertFormToComponents(entries: FormEntry[], parameters: InputParameter[], object: Obj): ActionInput[];
-export declare function convertComponentsToForm(components: ActionInput[]): FormEntry[];
+export declare function convertComponentsToForm(components: ActionInput[]): Exclude<FormEntry, FormletReference>[];
 export declare function getMiddleObjectFilter(property: Property, instance: ObjectInstance): {
     where: {
         [x: string]: string;

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -48,7 +48,7 @@ const AddressFieldComponent = (props) => {
         !mask ? (React.createElement(TextField, { id: id, inputRef: textFieldRef, onChange: !readOnly ? handleChange : undefined, error: error, errorMessage: errorMessage, value: value, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: readOnly ? undefined : placeholder, InputProps: {
                 type: 'search',
                 autoComplete: 'off',
-            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
+            }, required: required, readOnly: readOnly, multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}), sx: { backgroundColor: 'white' } })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, inputRef: textFieldRef, sx: readOnly
                 ? {
                     '& .MuiOutlinedInput-notchedOutline': {
                         border: 'none',

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

@@ -4,11 +4,17 @@ import { CheckBox as CheckBoxIcon, CheckBoxOutlineBlank, Help, ToggleOff, Toggle
 import { defaultTheme } from '../../../../theme/defaultTheme';
 import { Autocomplete, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, Switch, TextField, Tooltip, Typography, } from '../../../core';
 import InputFieldComponent from '../InputFieldComponent/InputFieldComponent';
-const descriptionStyles = {
-    color: '#999 !important',
-    whiteSpace: 'normal',
-    paddingBottom: '4px',
-    marginX: 0,
+import { Box } from '../../../layout';
+const styles = {
+    descriptionStyles: { color: '#999 !important', whiteSpace: 'normal', paddingBottom: '4px', marginX: 0 },
+    checkboxIconBox: {
+        backgroundColor: 'white',
+        width: '18px',
+        height: '18px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
 };
 const BooleanSelect = (props) => {
     const { id, property, defaultValue, error, errorMessage, readOnly, size, displayOption, label, strictlyTrue, tooltip, description, placeholder, onBlur, additionalProps, } = props;
@@ -31,7 +37,7 @@ const BooleanSelect = (props) => {
         },
     ];
     const descriptionComponent = () => {
-        return (description && (React.createElement(FormHelperText, { sx: descriptionStyles, component: Typography }, parse(description))));
+        return (description && (React.createElement(FormHelperText, { sx: styles.descriptionStyles, component: Typography }, parse(description))));
     };
     const labelComponent = () => {
         return (React.createElement(Typography, { component: "span", variant: "body2", sx: { wordWrap: 'break-word', ...defaultTheme.typography.body2 } },
@@ -58,7 +64,9 @@ const BooleanSelect = (props) => {
     return displayOption === 'dropdown' ? (React.createElement(Autocomplete, { renderInput: (params) => (React.createElement(TextField, { ...params, error: error, errorMessage: errorMessage, onBlur: onBlur, fullWidth: true, sx: { background: 'white' }, placeholder: placeholder, size: size ?? 'medium' })), value: booleanOptions.find((opt) => opt.value === value) ?? '', onChange: (e, selectedValue) => handleChange(selectedValue.value), isOptionEqualToValue: (option, val) => option?.value === val?.value, options: booleanOptions, disableClearable: true, sx: { background: 'white', borderRadius: '8px' }, ...(additionalProps ?? {}), sortBy: "NONE", required: strictlyTrue })) : (React.createElement(FormControl, { required: strictlyTrue, error: error, fullWidth: true },
         React.createElement(FormControlLabel, { labelPlacement: "end", label: labelComponent(), sx: { marginLeft: '-8px' }, control: displayOption === 'switch' ? (React.createElement(Switch, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', name: property.id, checked: value, onChange: (e) => handleChange(e.target.checked), sx: {
                     alignSelf: 'start',
-                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), sx: {
+                }, ...(additionalProps ?? {}) })) : (React.createElement(Checkbox, { id: id, "aria-required": strictlyTrue, "aria-invalid": error, size: size ?? 'medium', checked: value, name: property.id, onChange: (e) => handleChange(e.target.checked), icon: React.createElement(Box, { sx: styles.checkboxIconBox },
+                    React.createElement(CheckBoxOutlineBlank, { fontSize: size ?? 'medium' })), checkedIcon: React.createElement(Box, { sx: styles.checkboxIconBox },
+                    React.createElement(CheckBoxIcon, { fontSize: size ?? 'medium' })), sx: {
                     alignSelf: 'start',
                     padding: '4px 9px 9px 9px',
                 }, ...(additionalProps ?? {}) })) }),

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

@@ -56,7 +56,6 @@ const InputFieldComponent = (props) => {
             : property.enum, onChange: handleSelectChange, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, error: error, errorMessage: errorMessage, fullWidth: true, onBlur: onBlur, size: size ?? 'medium', placeholder: placeholder })), disableClearable: true, value: value, isOptionEqualToValue: (option, value) => {
             return option.value === value;
         }, error: error, required: required, inputValue: inputValue ?? '', onInputChange: handleInputValueChange, ...(additionalProps ?? {}) })) : !mask || isValueProtected ? (React.createElement(TextField, { id: id, sx: {
-            background: 'white',
             borderRadius: '8px',
             ...(readOnly && {
                 '& .MuiOutlinedInput-notchedOutline': {
@@ -67,6 +66,7 @@ const InputFieldComponent = (props) => {
                     backgroundColor: '#f4f6f8',
                 },
             }),
+            backgroundColor: 'white',
         }, error: error, errorMessage: errorMessage, value: value, onChange: !readOnly ? handleChange : undefined, InputProps: { ...InputProps, endAdornment, readOnly: readOnly }, required: required, fullWidth: true, onBlur: onBlur, placeholder: readOnly ? undefined : placeholder, size: size ?? 'medium', type: property.type === 'integer' ? 'number' : 'text', multiline: property.type === 'string' && !readOnly && isMultiLineText, rows: isMultiLineText ? (rows ? rows : 3) : undefined, ...(additionalProps ?? {}) })) : (React.createElement(InputMask, { mask: mask, maskChar: inputMaskPlaceholderChar ?? '_', value: value, onChange: !readOnly ? handleChange : undefined, onBlur: onBlur, alwaysShowMask: true }, (() => (React.createElement(TextField, { id: id, sx: readOnly
             ? {
                 '& .MuiOutlinedInput-notchedOutline': {

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

@@ -161,7 +161,7 @@ const Select = (props) => {
             React.createElement(Typography, { variant: "caption" }, "Clear Selection"))))) : (React.createElement(Autocomplete, { multiple: property?.type === 'array', id: id, sortBy: sortBy, renderInput: (params) => (React.createElement(TextField, { ...params, value: value, fullWidth: true, onBlur: onBlur, inputProps: {
                 ...params.inputProps,
                 'aria-describedby': isCombobox ? `${id}-instructions` : undefined,
-            } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
+            }, sx: { backgroundColor: 'white', borderRadius: '8px' } })), value: value ?? (property?.type === 'array' ? [] : undefined), onChange: handleChange, options: selectOptions ?? property?.enum ?? [], inputValue: inputValue ?? '', error: error, errorMessage: errorMessage, required: required, onInputChange: handleInputValueChange, size: size, filterOptions: (options, params) => {
             const filtered = filter(options, params);
             const { inputValue } = params;
             // Suggest to the user to add a new value.

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

@@ -54,17 +54,17 @@ const FormRendererInternal = (props) => {
         enabled: !!objectId,
     });
     const updatedEntries = useMemo(() => {
-        return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
+        return assignIdsToSectionsAndRichText(entries, object, parameters);
     }, [entries, object, parameters]);
     useEffect(() => {
-        if (!object)
+        if (objectId && !object)
             return;
-        const action = object.actions?.find((a) => a.id === actionId);
+        const action = object?.actions?.find((a) => a.id === actionId);
         setAction(action);
         // if forms action is synced with object properties then convertPropertiesToParams
-        setParameters(action?.parameters ?? convertPropertiesToParams(object));
+        setParameters(action?.parameters ?? (object ? convertPropertiesToParams(object) : []));
         setIsInitializing(false);
-    }, [object, actionId]);
+    }, [object, actionId, objectId]);
     useEffect(() => {
         const currentValues = getValues();
         if (value) {

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

@@ -9,7 +9,7 @@ import ErrorComponent from '../ErrorComponent';
 import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
 import Header from './components/Header';
-import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
+import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, getVisibleEditableFieldIds, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
 import FormRenderer from './FormRenderer';
 import { DepGraph } from 'dependency-graph';
 // Wrapper to provide QueryClient context for FormRendererContainer if this is not a nested form
@@ -164,7 +164,11 @@ function FormRendererContainerInner(props) {
                     set(result, fieldId, fieldValue);
                 }
             }
-            else if (entry.type !== 'sections' && entry.type !== 'columns' && entry.type !== 'content') {
+            else if (entry.type !== 'sections' &&
+                entry.type !== 'columns' &&
+                entry.type !== 'content' &&
+                // there cannot be formlets here since the `form` is the effective form
+                entry.type !== 'formlet') {
                 const parameter = parameters?.find((param) => param.id === fieldId);
                 if (associatedObject?.propertyId === fieldId &&
                     associatedObject?.instanceId &&
@@ -183,9 +187,6 @@ function FormRendererContainerInner(props) {
                         console.error(error);
                     }
                 }
-                else if (entry.type === 'formlet') {
-                    // TODO: this should eventually fetch the formletId then get the fields and default values of those fields
-                }
                 else if (entry.type !== 'readonlyField') {
                     if (isEmptyWithDefault(fieldValue, entry, result)) {
                         if (fieldId && parameters && parameters.length > 0) {
@@ -303,6 +304,10 @@ function FormRendererContainerInner(props) {
                 // Deep clone to avoid reference issues
                 setLastSavedData(cloneDeep(defaultValues));
             }
+            else {
+                // if there is a form with no entries
+                setFormData({});
+            }
         };
         getInitialValues();
     }, [instanceId, instance, flattenFormEntries, getDefaultValues]);
@@ -404,6 +409,12 @@ function FormRendererContainerInner(props) {
         if (!form?.autosaveActionId || !formDataRef.current) {
             return;
         }
+        const visibleEditableFieldIds = getVisibleEditableFieldIds(form.entries ?? [], instance, formDataRef.current);
+        const allowedParameterIds = parameters?.filter((parameter) => parameter.type !== 'collection').map((parameter) => parameter.id) ?? [];
+        const autosaveFieldIds = visibleEditableFieldIds.filter((id) => allowedParameterIds.includes(id));
+        if (!autosaveFieldIds.includes(fieldId)) {
+            return;
+        }
         const currentValue = get(formDataRef.current, fieldId);
         const lastValue = get(lastSavedData, fieldId);
         if (isEqual(currentValue, lastValue)) {
@@ -412,14 +423,13 @@ function FormRendererContainerInner(props) {
         try {
             setIsSaving(true);
             const cleanedData = removeUneditedProtectedValues(formDataRef.current);
-            const submission = await formatSubmission(cleanedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
+            const scopedData = pick(cleanedData, autosaveFieldIds);
+            const submission = await formatSubmission(scopedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
             // Handle object instance autosave
             if (instanceId && action?.type === 'update') {
                 await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
                     actionId: form.autosaveActionId,
-                    input: pick(submission, sanitizedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
-                        .map((property) => property.id) ?? []),
+                    input: submission,
                 });
             }
             setLastSavedData(cloneDeep(formDataRef.current));
@@ -456,7 +466,7 @@ function FormRendererContainerInner(props) {
             setFormData(newData);
         }
     }
-    const isLoading = (instanceId && !formDataRef.current) || !form || !sanitizedObject;
+    const isLoading = !form || !sanitizedObject || (instanceId && formDataRef.current === undefined);
     const status = error ? 'error' : isLoading ? 'loading' : 'ready';
     // Compose a header renderer that injects the saving indicator into the rendered header
     const composedRenderHeader = (props) => {

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

@@ -85,6 +85,9 @@ export const DropdownRepeatableFieldInput = (props) => {
                             : undefined),
                     }, onChange: (event) => {
                         setSearchValue(event.target.value);
+                    }, sx: {
+                        backgroundColor: 'white',
+                        borderRadius: '8px',
                     } })),
                 loading,
                 sortBy: 'NONE',

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

@@ -451,7 +451,7 @@ const RepeatableField = (props) => {
                         React.createElement(TableRow, null,
                             columns?.map((prop) => (React.createElement(TableCell, { sx: styles.tableCell }, prop.name))),
                             canUpdateProperty && React.createElement(TableCell, { sx: { ...styles.tableCell, width: '80px' } }))),
-                    React.createElement(TableBody, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
+                    React.createElement(TableBody, { sx: { backgroundColor: 'white' } }, relatedInstances?.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id },
                         columns?.map((prop) => {
                             return (React.createElement(TableCell, { sx: { fontSize: '16px' } }, prop.type === 'document' ? (React.createElement(DocumentViewerCell, { instance: relatedInstance, propertyId: prop.id, setSnackbarError: setSnackbarError })) : (React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
                                     ? {

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

@@ -93,6 +93,7 @@ export const Document = (props) => {
                 border: `1px dashed ${error ? 'red' : uploadDisabled ? '#DFE3E8' : '#858585'}`,
                 position: 'relative',
                 cursor: uploadDisabled ? 'cursor' : 'pointer',
+                backgroundColor: 'white',
             }, ...getRootProps(), onClick: open },
             React.createElement("input", { ...getInputProps({ id }), disabled: uploadDisabled, ...(hasDescription ? { 'aria-describedby': `${id}-description` } : undefined) }),
             React.createElement(Grid, { container: true, sx: { width: '100%' } },

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

@@ -29,6 +29,7 @@ const styles = {
         border: '1px dashed #858585',
         position: 'relative',
         cursor: 'pointer',
+        backgroundColor: 'white',
     },
     icon: {
         color: '#fff',

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

@@ -141,6 +141,8 @@ const UserProperty = (props) => {
                         },
                     }
                     : {}),
+                backgroundColor: 'white',
+                borderRadius: '8px',
             } })), size: fieldHeight ?? 'medium', readOnly: readOnly, error: error })));
 };
 export default UserProperty;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FormletReference } from '@evoke-platform/context';
+declare function FormletRenderer(props: {
+    entry: FormletReference;
+}): React.JSX.Element;
+export default FormletRenderer;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useApiServices } from '@evoke-platform/context';
+import { getPrefixedUrl } from './utils';
+import { useQuery } from '@tanstack/react-query';
+import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import { Skeleton, Typography } from '../../../core';
+import { Box } from '../../../layout';
+import { WarningRounded } from '../../../../icons';
+function FormletRenderer(props) {
+    const { entry } = props;
+    const apiServices = useApiServices();
+    const { data: formlet, isLoading } = useQuery({
+        queryKey: [entry.formletId, 'formlet'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/formlets/${entry.formletId}`)),
+        staleTime: Infinity,
+        enabled: !!entry.formletId,
+    });
+    if (isLoading)
+        return React.createElement(Skeleton, null);
+    return formlet ? (React.createElement(React.Fragment, null, formlet.entries?.map((formletEntry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: formletEntry }))))) : (React.createElement(Box, { sx: {
+            display: 'flex',
+            backgroundColor: '#ffc1073b',
+            borderRadius: '8px',
+            padding: '16.5px 14px',
+            marginTop: '6px',
+        } },
+        React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
+        React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+}
+export default FormletRenderer;

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

@@ -33,14 +33,17 @@ const HtmlView = ({ value }) => {
         quillRef.current.setContents([]);
         quillRef.current.clipboard.dangerouslyPasteHTML(DOMPurify.sanitize(value));
     }, [value]);
-    return (React.createElement(Box, { sx: {
-            width: '100%',
-            height: '100%',
-            '.ql-container.ql-snow': {
-                border: 'none',
-                minHeight: 20,
-            },
-        } },
-        React.createElement("div", { ref: containerRef })));
+    return (
+    // Needs to be wrapped in a Box to prevent quill from setting height: 100% on the container, which causes it to overflow its parent and ignore the maxHeight we set on the containerRef (only happens when in a grid item)
+    React.createElement(Box, null,
+        React.createElement(Box, { sx: {
+                width: '100%',
+                height: '100%',
+                '.ql-container.ql-snow': {
+                    border: 'none',
+                    minHeight: 20,
+                },
+            } },
+            React.createElement("div", { ref: containerRef }))));
 };
 export default HtmlView;

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

@@ -1,5 +1,6 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
+import { Grid } from '@mui/material';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
@@ -20,6 +21,7 @@ import FormSections from './FormSections';
 import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 import HtmlView from './HtmlView';
 import { useQuery } from '@tanstack/react-query';
+import FormletRenderer from './FormletRenderer';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -52,8 +54,6 @@ export function RecursiveEntryRenderer(props) {
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
     const fieldDefinition = useMemo(() => {
-        if (!object)
-            return undefined;
         return getFieldDefinition(entry, object, parameters);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
@@ -214,16 +214,14 @@ export function RecursiveEntryRenderer(props) {
                         ? 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, protection: objectProperty?.protection })));
         }
+        // Forms from the FormV2 widget will get the effective form and will not need this
+        // but it's possible for a form passed into the FormRenderer to include a formlet type
+    }
+    else if (entry.type === 'formlet') {
+        return React.createElement(FormletRenderer, { entry: entry });
     }
     else if (entry.type === 'columns') {
-        return (React.createElement(Box, { sx: {
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: '30px',
-                flexDirection: isXs ? 'column' : 'row',
-            } }, entry.columns.map((column, colIndex) => (
-        // calculating the width like this rather than flex={column.width} to prevent collections from being too wide
-        React.createElement(Box, { key: colIndex, sx: { width: isXs ? '100%' : `calc(${(column.width / 12) * 100}% - 15px)` } }, column.entries?.map((columnEntry, entryIndex) => {
+        return (React.createElement(Grid, { container: true, columnSpacing: 4 }, entry.columns.map((column, colIndex) => (React.createElement(Grid, { key: colIndex, item: true, xs: isXs ? 12 : column.width }, column.entries?.map((columnEntry, entryIndex) => {
             return (React.createElement(RecursiveEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry }));
         }))))));
     }

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

@@ -20,6 +20,10 @@ export declare const entryIsVisible: (entry: FormEntry, instance?: FieldValues,
  */
 export declare const getNestedParameterIds: (entry: Sections | Columns) => string[];
 export declare const getEntryId: (entry: FormEntry) => string | undefined;
+/**
+ * Returns editable field IDs that are currently visible on the form.
+ */
+export declare const getVisibleEditableFieldIds: (entries: FormEntry[], instance?: FieldValues, formValues?: FieldValues) => string[];
 export declare function getPrefixedUrl(url: string): string;
 export declare const isOptionEqualToValue: (option: AutocompleteOption | string, value: unknown) => boolean;
 export declare function addressProperties(addressProperty: Property): Property[];
@@ -87,7 +91,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     propertyId: string;
 }, parameters?: InputParameter[]): Promise<FieldValues>;
 export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
-export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | PanelViewEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
+export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | PanelViewEntry[], object?: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.
  *
@@ -101,7 +105,7 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | Pa
  * 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 | PanelViewEntry, object: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
+export declare function getFieldDefinition(entry: FormEntry | PanelViewEntry, object?: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
 export declare function obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;
 export declare function useFormById(formId: string, apiServices: ApiServices, errorMessage?: string): import("@tanstack/react-query/build/legacy/types").UseQueryResult<EvokeForm, Error>;
 /**

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

@@ -117,9 +117,59 @@ export const getEntryId = (entry) => {
                 ? entry.input.id
                 : undefined;
 };
+/**
+ * Returns editable field IDs that are currently visible on the form.
+ */
+export const getVisibleEditableFieldIds = (entries, instance, formValues) => {
+    const fieldIds = new Set();
+    const collectVisibleIds = (entriesToCheck) => {
+        entriesToCheck.forEach((entry) => {
+            if (!entryIsVisible(entry, instance, formValues)) {
+                return;
+            }
+            if (entry.type === 'sections') {
+                entry.sections.forEach((section) => {
+                    if (section.entries) {
+                        collectVisibleIds(section.entries);
+                    }
+                });
+                return;
+            }
+            if (entry.type === 'columns') {
+                entry.columns.forEach((column) => {
+                    if (column.entries) {
+                        collectVisibleIds(column.entries);
+                    }
+                });
+                return;
+            }
+            if (entry.type !== 'input' && entry.type !== 'inputField') {
+                return;
+            }
+            // Collection entries are handled by their own flow and are not part of autosave payloads.
+            if (entry.type === 'inputField' && entry.input.type === 'collection') {
+                return;
+            }
+            const fieldId = getEntryId(entry);
+            if (fieldId) {
+                fieldIds.add(fieldId);
+            }
+        });
+    };
+    collectVisibleIds(entries ?? []);
+    return Array.from(fieldIds);
+};
 export function getPrefixedUrl(url) {
     const wcsMatchers = ['/apps', '/pages', '/widgets'];
-    const dataMatchers = ['/objects', '/correspondenceTemplates', '/documents', '/payments', '/forms', '/locations'];
+    const dataMatchers = [
+        '/objects',
+        '/correspondenceTemplates',
+        '/documents',
+        '/payments',
+        '/forms',
+        '/formlets',
+        '/locations',
+    ];
     const signalrMatchers = ['/hubs'];
     const accessManagementMatchers = ['/users'];
     const workflowMatchers = ['/workflows'];
@@ -792,8 +842,8 @@ export function getFieldDefinition(entry, object, parameters) {
     }
     else if (entry.type === 'readonlyField') {
         def = 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;
@@ -876,7 +926,7 @@ export function useFormById(formId, apiServices, errorMessage) {
         queryKey: ['form', formId],
         enabled: formId !== '_auto_' && !!formId,
         staleTime: Infinity,
-        queryFn: () => apiServices.get(getPrefixedUrl(`/forms/${formId}`)),
+        queryFn: () => apiServices.get(getPrefixedUrl(`/forms/${formId}/effective`)),
         meta: {
             errorMessage,
         },

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

@@ -34,6 +34,11 @@ describe('FormRenderer', () => {
             if (sanitizedVersion === 'true') {
                 return HttpResponse.json(specialtyObject);
             }
+        }), http.get('/api/data/objects/formletTestObject/effective', (req) => {
+            const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
+            if (sanitizedVersion === 'true') {
+                return HttpResponse.json({});
+            }
         }), http.get('/api/data/objects/accessibility508Object/effective', (req) => {
             const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
             if (sanitizedVersion === 'true') {
@@ -416,7 +421,7 @@ describe('FormRenderer', () => {
     });
     describe('when passed a regular related object entry', () => {
         const setupTestMocks = (object, form, instances) => {
-            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}/effective`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
         };
         describe('when in table view', () => {
             describe('when mode is existing records only', () => {
@@ -880,7 +885,7 @@ describe('FormRenderer', () => {
                 });
                 it('displays a not found error in record creation mode if a form could not be found', async () => {
                     const user = userEvent.setup();
-                    server.use(http.get('/api/data/forms/specialtyTypeForm', () => {
+                    server.use(http.get('/api/data/forms/specialtyTypeForm/effective', () => {
                         return HttpResponse.json({ error: 'Not found' }, { status: 404 });
                     }));
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
@@ -1180,7 +1185,7 @@ describe('FormRenderer', () => {
     });
     describe('when passed a dynamic related object entry', () => {
         const setupTestMocks = (object, form, instances) => {
-            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}/effective`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
         };
         const form = {
             id: 'relatedObjectTestForm',
@@ -1294,7 +1299,7 @@ describe('FormRenderer', () => {
         });
         it('displays a not found error in record creation mode if a form could not be found', async () => {
             const user = userEvent.setup();
-            server.use(http.get('/api/data/forms/specialtyTypeForm', () => {
+            server.use(http.get('/api/data/forms/specialtyTypeForm/effective', () => {
                 return HttpResponse.json({ error: 'Not found' }, { status: 404 });
             }));
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
@@ -1306,7 +1311,7 @@ describe('FormRenderer', () => {
     });
     describe('when passed a one-to-many collection entry', () => {
         const setupTestMocks = (object, form, instances) => {
-            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])), http.get(`/api/data/objects/${object.id}/instances/checkAccess`, () => HttpResponse.json({
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}/effective`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])), http.get(`/api/data/objects/${object.id}/instances/checkAccess`, () => HttpResponse.json({
                 result: true,
             })));
         };
@@ -1648,4 +1653,42 @@ describe('FormRenderer', () => {
             expect(textField).toHaveValue('Test Input');
         });
     });
+    describe('when passed a formlet entry', () => {
+        const formlet = {
+            id: 'formletId',
+            name: 'Test Formlet',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        type: 'date',
+                        id: 'dateId2',
+                    },
+                    display: {
+                        label: 'Date 2',
+                        required: false,
+                    },
+                },
+            ],
+        };
+        beforeEach(() => {
+            server.use(http.get('/api/data/formlets/formletId', () => HttpResponse.json(formlet)));
+        });
+        it('should render formlet entry fields', async () => {
+            const form = {
+                id: 'formWithFormlet',
+                name: 'Form With Formlet',
+                entries: [
+                    {
+                        type: 'formlet',
+                        formletId: 'formletId',
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'formletTestObject',
+            };
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByLabelText('Date 2');
+        });
+    });
 });