@evoke-platform/ui-components 1.0.0-dev.225 → 1.0.0-dev.226

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/InstanceLookup.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, Obj, ObjectInstance, Property } from '@evoke-platform/context';
+import { ApiServices, Obj, ObjectInstance, Property, TableViewLayout } from '@evoke-platform/context';
 export declare type InstanceLookUpProps = {
     object: Obj;
     instanceId?: string;
@@ -9,6 +9,7 @@ export declare type InstanceLookUpProps = {
     mode: 'default' | 'existingOnly';
     nestedFieldsView?: boolean;
     filter?: Record<string, unknown>;
+    layout?: TableViewLayout;
 };
 export declare type SearchFieldProps = {
     searchableColumns: Property[];

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/InstanceLookup.js

@@ -54,20 +54,20 @@ const SearchField = (props) => {
         } }));
 };
 export const InstanceLookup = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const { object, apiServices, setSelectedInstance, mode, nestedFieldsView, setRelationType, filter: criteriaFilter, } = props;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { object, apiServices, setSelectedInstance, mode, nestedFieldsView, setRelationType, filter: criteriaFilter, layout, } = props;
     const [rows, setRows] = useState([]);
     const [loading, setLoading] = useState(false);
     const [filter, setFilter] = useState();
     const [searchString, setSearchString] = useState('');
     const [searchableColumns] = useState((_b = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.filter((property) => property.searchable)) !== null && _b !== void 0 ? _b : []);
     const retrieveColumns = (tableViewLayout) => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         let columns = [];
-        if (tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) {
+        if ((_a = tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) === null || _a === void 0 ? void 0 : _a.length) {
             for (const prop of tableViewLayout.properties) {
                 const propertyId = prop.id.split('.')[0];
-                const property = (_a = object.properties) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === propertyId);
+                const property = (_b = object.properties) === null || _b === void 0 ? void 0 : _b.find((p) => p.id === propertyId);
                 if (property) {
                     if (property.type === 'address') {
                         columns.push({
@@ -166,20 +166,19 @@ export const InstanceLookup = (props) => {
             }
         }
         else {
-            const name = (_b = object.properties) === null || _b === void 0 ? void 0 : _b.find((property) => property.id == 'name');
-            columns = [{ field: 'name', headerName: (_c = name === null || name === void 0 ? void 0 : name.name) !== null && _c !== void 0 ? _c : 'Name', type: 'string', flex: 1 }];
+            const name = (_c = object.properties) === null || _c === void 0 ? void 0 : _c.find((property) => property.id == 'name');
+            columns = [{ field: 'name', headerName: (_d = name === null || name === void 0 ? void 0 : name.name) !== null && _d !== void 0 ? _d : 'Name', type: 'string', flex: 1 }];
         }
         return columns;
     };
     function fetchObjectInstance() {
-        var _a;
         setLoading(true);
         const combinedFilter = Object.assign(Object.assign(Object.assign({}, criteriaFilter), filter), { where: (criteriaFilter === null || criteriaFilter === void 0 ? void 0 : criteriaFilter.where)
                 ? {
                     and: [criteriaFilter.where, filter === null || filter === void 0 ? void 0 : filter.where],
                 }
                 : filter === null || filter === void 0 ? void 0 : filter.where });
-        apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), (_a = { params: { filter: JSON.stringify(combinedFilter) } }) !== null && _a !== void 0 ? _a : {}, (error, objectInstances) => {
+        apiServices.get(getPrefixedUrl(`/objects/${object.id}/instances`), { params: { filter: JSON.stringify(combinedFilter) } }, (error, objectInstances) => {
             if (error) {
                 console.error(error);
             }
@@ -197,11 +196,12 @@ export const InstanceLookup = (props) => {
             setRows([]);
         }
     }, [filter, searchString.length]);
+    const columns = retrieveColumns(layout);
     return (React.createElement(Grid, { container: true, sx: { paddingBottom: '30px' } },
         React.createElement(Grid, { item: true, xs: 12 }, searchableColumns.length ? (React.createElement(SearchField, { searchString: searchString, setSearchString: setSearchString, filter: filter, setFilter: setFilter, searchableColumns: searchableColumns })) : (React.createElement(Typography, { sx: { fontSize: '16px', fontWeight: '700' } }, "There are no searchable properties configured for this object"))),
-        React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: retrieveColumns((_c = object.viewLayout) === null || _c === void 0 ? void 0 : _c.table), onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
-                field: (_g = (_f = (_e = (_d = object.viewLayout) === null || _d === void 0 ? void 0 : _d.table) === null || _e === void 0 ? void 0 : _e.sort) === null || _f === void 0 ? void 0 : _f.colId) !== null && _g !== void 0 ? _g : 'name',
-                sort: (_l = (_k = (_j = (_h = object.viewLayout) === null || _h === void 0 ? void 0 : _h.table) === null || _j === void 0 ? void 0 : _j.sort) === null || _k === void 0 ? void 0 : _k.sort) !== null && _l !== void 0 ? _l : 'asc',
+        React.createElement(BuilderGrid, { item: 'instances', rows: rows, columns: columns, onRowClick: (params) => setSelectedInstance(params.row), initialSort: {
+                field: (_f = (_e = (_d = (_c = object.viewLayout) === null || _c === void 0 ? void 0 : _c.table) === null || _d === void 0 ? void 0 : _d.sort) === null || _e === void 0 ? void 0 : _e.colId) !== null && _f !== void 0 ? _f : 'name',
+                sort: (_k = (_j = (_h = (_g = object.viewLayout) === null || _g === void 0 ? void 0 : _g.table) === null || _h === void 0 ? void 0 : _h.sort) === null || _j === void 0 ? void 0 : _j.sort) !== null && _k !== void 0 ? _k : 'asc',
             }, sx: {
                 height: '360px',
                 width: '100%',

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -9,7 +9,7 @@ import { getPrefixedUrl, normalizeDates, transformToWhere } from '../../utils';
 import { RelatedObjectInstance } from './RelatedObjectInstance';
 export const ObjectPropertyInput = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, } = props;
+    const { id, instance, property, apiServices, defaultPages, handleChangeObjectProperty, nestedFieldsView, canUpdateProperty, error, navigateTo, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, setSnackbarError, isModal, user, viewLayout, } = props;
     const [relatedObject, setRelatedObject] = useState();
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
     const [selectedInstance, setSelectedInstance] = useState();
@@ -17,7 +17,29 @@ export const ObjectPropertyInput = (props) => {
     const [loadingOptions, setLoadingOptions] = useState(false);
     const [options, setOptions] = useState([]);
     const [openOptions, setOpenOptions] = useState(false);
+    const [layout, setLayout] = useState();
     const DEFAULT_CREATE_ACTION = '_create';
+    useEffect(() => {
+        var _a, _b;
+        if (relatedObject) {
+            let defaultViewLayout;
+            if (((_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) && displayOption === 'dropdown') {
+                defaultViewLayout = Object.assign({ id: 'default', name: 'Default', objectId: relatedObject.id }, relatedObject.viewLayout.dropdown);
+            }
+            else if (((_b = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _b === void 0 ? void 0 : _b.table) && displayOption === 'dialogBox') {
+                defaultViewLayout = Object.assign({ id: 'default', name: 'Default', objectId: relatedObject.id }, relatedObject.viewLayout.table);
+            }
+            if (viewLayout) {
+                apiServices
+                    .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/${displayOption === 'dropdown' ? 'dropdown' : 'table'}Layouts/${viewLayout.id}`))
+                    .then(setLayout)
+                    .catch((err) => setLayout(defaultViewLayout));
+            }
+            else {
+                setLayout(defaultViewLayout);
+            }
+        }
+    }, [displayOption, relatedObject, viewLayout]);
     useEffect(() => {
         var _a;
         if (!isEmpty(defaultValueCriteria) && !selectedInstance && !instance[property.id]) {
@@ -160,11 +182,10 @@ export const ObjectPropertyInput = (props) => {
                         }
                         : {})),
                 }, noOptionsText: 'No options available', renderOption: (props, option) => {
-                    var _a, _b, _c, _d;
                     return (React.createElement("li", Object.assign({}, props, { key: option.id }),
                         React.createElement(Box, null,
                             React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
-                            ((_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) === null || _b === void 0 ? void 0 : _b.secondaryTextExpression) ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression((_d = (_c = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _c === void 0 ? void 0 : _c.dropdown) === null || _d === void 0 ? void 0 : _d.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
+                            (layout === null || layout === void 0 ? void 0 : layout.secondaryTextExpression) ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout === null || layout === void 0 ? void 0 : layout.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
                 }, onOpen: () => {
                     var _a;
                     if (((_a = instance === null || instance === void 0 ? void 0 : instance[property.id]) === null || _a === void 0 ? void 0 : _a.id) || (selectedInstance === null || selectedInstance === void 0 ? void 0 : selectedInstance.id)) {
@@ -294,7 +315,7 @@ export const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add`, disabled: !canUpdateProperty }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
             React.createElement(Typography, { sx: {
                     marginTop: '28px',
                     fontSize: '22px',
@@ -302,5 +323,5 @@ export const ObjectPropertyInput = (props) => {
                     marginLeft: '24px',
                     marginBottom: '10px',
                 } }, `Add ${property.name}`),
-            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user })))))));
+            React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSnackbarError: setSnackbarError, setSelectedInstance: setSelectedInstance, nestedFieldsView: nestedFieldsView, relatedObject: relatedObject, property: property, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout })))))));
 };

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, Obj, ObjectInstance, Property, Reference, UserAccount } from '@evoke-platform/context';
+import { ApiServices, Obj, ObjectInstance, Property, Reference, TableViewLayout, UserAccount } from '@evoke-platform/context';
 export declare type RelatedObjectInstanceProps = {
     relatedObject?: Obj;
     property: Property;
@@ -20,5 +20,6 @@ export declare type RelatedObjectInstanceProps = {
     options: ObjectInstance[];
     filter?: Record<string, unknown>;
     user?: UserAccount;
+    layout?: TableViewLayout;
 };
 export declare const RelatedObjectInstance: (props: RelatedObjectInstanceProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -30,7 +30,7 @@ const styles = {
 const DEFAULT_CREATE_ACTION = '_create';
 export const RelatedObjectInstance = (props) => {
     var _a;
-    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, } = props;
+    const { relatedObject, property, setSelectedInstance, handleChangeObjectProperty, handleClose, apiServices, setSnackbarError, nestedFieldsView, mode, displayOption, setOptions, options, filter, user, layout, } = props;
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' ? 'new' : 'existing');
     const [selectedRow, setSelectedRow] = useState();
     const [errors, setErrors] = useState([]);
@@ -114,7 +114,7 @@ export const RelatedObjectInstance = (props) => {
                         apiServices: apiServices,
                         setSnackbarError: setSnackbarError,
                     }, queryAddresses: queryAddresses, user: userAccount }))) : (relatedObject && (React.createElement(React.Fragment, null,
-                React.createElement(InstanceLookup, { apiServices: apiServices, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter }))))),
+                React.createElement(InstanceLookup, { apiServices: apiServices, nestedFieldsView: nestedFieldsView, setRelationType: setRelationType, object: relatedObject, setSelectedInstance: setSelectedRow, mode: mode, filter: filter, layout: layout }))))),
         relationType !== 'new' && (React.createElement(Box, { sx: styles.actionButtons },
             React.createElement(Button, { onClick: onClose, color: 'inherit', sx: {
                     border: '1px solid #ced4da',

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, ObjWithRoot, ObjectInstance, Property } from '@evoke-platform/context';
+import { ApiServices, ObjWithRoot, ObjectInstance, Property, ViewLayoutEntityReference } from '@evoke-platform/context';
 export declare type DropdownRepeatableFieldProps = {
     id: string;
     property: Property;
@@ -11,5 +11,6 @@ export declare type DropdownRepeatableFieldProps = {
     middleObject: ObjWithRoot;
     getMiddleObjectInstances: () => Promise<ObjectInstance[]>;
     fieldHeight?: 'small' | 'medium';
+    viewLayout?: ViewLayoutEntityReference;
 };
 export declare const DropdownRepeatableField: (props: DropdownRepeatableFieldProps) => JSX.Element;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableField.js

@@ -15,11 +15,11 @@ import { getMiddleObject, getPrefixedUrl, transformToWhere } from '../../../util
 import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
 export const DropdownRepeatableField = (props) => {
     var _a;
-    const { id, property, criteria, instance, readOnly, apiServices, initialMiddleObjectInstances, middleObject, getMiddleObjectInstances, fieldHeight, } = props;
+    const { id, property, criteria, instance, readOnly, apiServices, initialMiddleObjectInstances, middleObject, getMiddleObjectInstances, fieldHeight, viewLayout, } = props;
     const [middleObjectInstances, setMiddleObjectInstances] = useState(initialMiddleObjectInstances);
     const [endObject, setEndObject] = useState();
     const [endObjectInstances, setEndObjectInstances] = useState([]);
-    const [viewLayout, setViewLayout] = useState();
+    const [layout, setLayout] = useState();
     const [loading, setLoading] = useState(false);
     const [initialLoading, setInitialLoading] = useState(true);
     const [selectedOptions, setSelectedOptions] = useState([]);
@@ -60,13 +60,23 @@ export const DropdownRepeatableField = (props) => {
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                     const endObject = effectiveObject;
                     setEndObject(endObject);
+                    let defaultLayout;
                     if ((_a = endObject.viewLayout) === null || _a === void 0 ? void 0 : _a.dropdown) {
-                        setViewLayout(endObject.viewLayout.dropdown);
+                        defaultLayout = Object.assign({ id: 'default', name: 'Default', objectId: endObject.id }, endObject.viewLayout.dropdown);
+                    }
+                    if (viewLayout) {
+                        apiServices
+                            .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
+                            .then(setLayout)
+                            .catch((err) => setLayout(defaultLayout));
+                    }
+                    else {
+                        setLayout(defaultLayout);
                     }
                 }
             });
         }
-    }, [middleObject, apiServices]);
+    }, [middleObject, apiServices, viewLayout, property]);
     useEffect(() => {
         instanceChanges === null || instanceChanges === void 0 ? void 0 : instanceChanges.subscribe(middleObject.rootObjectId, () => {
             fetchMiddleObjectInstances();
@@ -154,5 +164,5 @@ export const DropdownRepeatableField = (props) => {
             }
         });
     };
-    return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !((_a = middleObject.actions) === null || _a === void 0 ? void 0 : _a.some((action) => action.id === '_create')), viewLayout: viewLayout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances !== null && endObjectInstances !== void 0 ? endObjectInstances : [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
+    return initialLoading ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, property: property, readOnly: readOnly || !((_a = middleObject.actions) === null || _a === void 0 ? void 0 : _a.some((action) => action.id === '_create')), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances !== null && endObjectInstances !== void 0 ? endObjectInstances : [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, fieldHeight: fieldHeight }))));
 };

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.d.ts

@@ -5,7 +5,7 @@ declare type DropdownRepeatableFieldInputProps = {
     id: string;
     property: Property;
     readOnly: boolean;
-    viewLayout?: DropdownViewLayout;
+    layout?: DropdownViewLayout;
     middleObjectInstances: ObjectInstance[];
     endObjectInstances: ObjectInstance[];
     endObject: Obj;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ManyToMany/DropdownRepeatableFieldInput.js

@@ -6,13 +6,12 @@ import { Snackbar, TextField, Typography } from '../../../../../core';
 import { normalizeDates } from '../../../utils';
 const isDropdownRepeatableFieldInputOption = (option) => isObject(option) && 'label' in option && 'endObjectId' in option;
 export const DropdownRepeatableFieldInput = (props) => {
-    const { id, property, readOnly, viewLayout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, fieldHeight, } = props;
+    const { id, property, readOnly, layout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, fieldHeight, } = props;
     const [selectOptions, setSelectOptions] = useState([]);
     useEffect(() => {
         setDropdownSelections && setDropdownSelections(middleObjectInstances);
     }, [middleObjectInstances]);
     useEffect(() => {
-        var _a;
         const manyToManyPropertyId = property.manyToManyPropertyId;
         if (manyToManyPropertyId) {
             const enums = endObjectInstances
@@ -23,20 +22,20 @@ export const DropdownRepeatableFieldInput = (props) => {
             })
                 .map((endObjectInstance) => ({
                 label: endObjectInstance.name,
-                subLabel: (viewLayout === null || viewLayout === void 0 ? void 0 : viewLayout.secondaryTextExpression)
-                    ? compileExpression(endObjectInstance, viewLayout.secondaryTextExpression)
+                subLabel: (layout === null || layout === void 0 ? void 0 : layout.secondaryTextExpression)
+                    ? compileExpression(endObjectInstance, layout.secondaryTextExpression)
                     : undefined,
                 endObjectId: endObjectInstance.id,
                 value: undefined,
             }));
-            setSelectOptions((_a = [
+            setSelectOptions([
                 ...enums,
                 ...selectedOptions
                     .filter((selectedOption) => !enums.find((availableOption) => availableOption.endObjectId === selectedOption.endObjectId))
                     .map((option) => (Object.assign(Object.assign({}, option), { hidden: true }))),
-            ]) !== null && _a !== void 0 ? _a : []);
+            ]);
         }
-    }, [endObjectInstances, viewLayout]);
+    }, [endObjectInstances, layout]);
     const handleChange = (key, newSelectedOptions) => {
         // Delete middle objects that have been removed
         // Add middle objects that have been added

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ApiServices, ObjectInstance, Property, UserAccount } from '@evoke-platform/context';
+import { ApiServices, ObjectInstance, Property, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
 export declare type ObjectPropertyInputProps = {
     property: Property;
     instance: ObjectInstance;
@@ -7,6 +7,7 @@ export declare type ObjectPropertyInputProps = {
     apiServices: ApiServices;
     queryAddresses?: unknown;
     user?: UserAccount;
+    viewLayout?: ViewLayoutEntityReference;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => JSX.Element;
 export default RepeatableField;

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

@@ -13,8 +13,8 @@ import { get, isObject, pick, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
-import { TrashCan } from '../../../../../icons';
-import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, } from '../../../../core';
+import { Edit, TrashCan } from '../../../../../icons';
+import { Button, IconButton, Skeleton, Snackbar, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDateTime } from '../../utils';
 import { ActionDialog } from './ActionDialog';
@@ -40,8 +40,8 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    var _a, _b, _c, _d, _e;
-    const { property, instance, canUpdateProperty, apiServices, queryAddresses, user } = props;
+    var _a, _b;
+    const { property, instance, canUpdateProperty, apiServices, queryAddresses, user, viewLayout } = props;
     const [relatedInstances, setRelatedInstances] = useState([]);
     const [relatedObject, setRelatedObject] = useState();
     const [hasCreateAction, setHasCreateAction] = useState(false);
@@ -51,6 +51,7 @@ const RepeatableField = (props) => {
     const [selectedRow, setSelectedRow] = useState();
     const [loading, setLoading] = useState(true);
     const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
+    const [tableViewLayout, setTableViewLayout] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: false,
@@ -59,12 +60,26 @@ const RepeatableField = (props) => {
     const DEFAULT_CREATE_ACTION = '_create';
     const { instanceChanges } = useNotification();
     const fetchRelatedInstances = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        var _c;
         if (openDialog)
             return;
         let relatedObject;
         if (property.objectId) {
             try {
                 relatedObject = yield apiServices.get(getPrefixedUrl(`/objects/${property.objectId}/effective`));
+                let defaultTableViewLayout;
+                if ((_c = relatedObject.viewLayout) === null || _c === void 0 ? void 0 : _c.table) {
+                    defaultTableViewLayout = Object.assign({ id: 'default', name: 'Default', objectId: relatedObject.id }, relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout.table);
+                }
+                if (viewLayout) {
+                    apiServices
+                        .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/tableLayouts/${viewLayout.id}`))
+                        .then(setTableViewLayout)
+                        .catch((err) => setTableViewLayout(defaultTableViewLayout));
+                }
+                else {
+                    setTableViewLayout(defaultTableViewLayout);
+                }
                 setRelatedObject(relatedObject);
             }
             catch (err) {
@@ -94,7 +109,7 @@ const RepeatableField = (props) => {
             }
         }
         relatedObject && checkCreateAccess(relatedObject);
-    }), [apiServices, property]);
+    }), [apiServices, property, viewLayout]);
     const checkCreateAccess = (relatedObject) => {
         if (property.objectId && canUpdateProperty) {
             apiServices
@@ -193,7 +208,7 @@ const RepeatableField = (props) => {
                 'min-width': '44px',
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = (actionType, input, instanceId, setSubmitting) => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g, _h, _j, _k, _l;
+        var _d, _e, _f, _g, _h, _j;
         setSubmitting && setSubmitting(true);
         // date-time fields are stored in the database in ISO format so convert all
         // LocalDateTime objects to ISO format.
@@ -227,7 +242,7 @@ const RepeatableField = (props) => {
                     isError: true,
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = (_g = (_f = err.response) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.error;
+                error = (_e = (_d = err.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error;
                 setSubmitting && setSubmitting(false);
             }
         }
@@ -236,7 +251,7 @@ const RepeatableField = (props) => {
             try {
                 yield apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${instanceId}/actions`), {
                     actionId: `_${actionType}`,
-                    input: pick(input, (_j = (_h = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _h === void 0 ? void 0 : _h.filter((property) => !property.formula && property.type !== 'collection').map((property) => property.id)) !== null && _j !== void 0 ? _j : []),
+                    input: pick(input, (_g = (_f = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _f === void 0 ? void 0 : _f.filter((property) => !property.formula && property.type !== 'collection').map((property) => property.id)) !== null && _g !== void 0 ? _g : []),
                 });
                 if (actionType === 'delete') {
                     setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== instanceId));
@@ -259,18 +274,18 @@ const RepeatableField = (props) => {
                     isError: true,
                 });
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                error = (_l = (_k = err.response) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.error;
+                error = (_j = (_h = err.response) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.error;
             }
         }
         return { isSuccessful, error };
     });
     const retrieveViewLayout = () => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         let properties = [];
-        if (((_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.viewLayout) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.properties) && relatedObject.viewLayout.table.properties.length > 1) {
-            for (const prop of relatedObject.viewLayout.table.properties) {
+        if ((_a = tableViewLayout === null || tableViewLayout === void 0 ? void 0 : tableViewLayout.properties) === null || _a === void 0 ? void 0 : _a.length) {
+            for (const prop of tableViewLayout.properties) {
                 const propertyId = prop.id.split('.')[0];
-                const property = (_c = relatedObject.properties) === null || _c === void 0 ? void 0 : _c.find((p) => p.id === propertyId);
+                const property = (_b = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _b === void 0 ? void 0 : _b.find((p) => p.id === propertyId);
                 if (property) {
                     if ((property.type === 'object' && property.id !== property.relatedPropertyId) ||
                         property.type === 'address' ||
@@ -289,9 +304,9 @@ const RepeatableField = (props) => {
         }
         else {
             properties =
-                (_e = (_d = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _d === void 0 ? void 0 : _d.filter((prop) => !['address', 'image', 'collection'].includes(prop.type)).map((prop) => (Object.assign(Object.assign({}, prop), { id: prop.type === 'object' || prop.type === 'user' ? `${prop.id}.name` : prop.id })))) !== null && _e !== void 0 ? _e : [];
+                (_d = (_c = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _c === void 0 ? void 0 : _c.filter((prop) => !['address', 'image', 'collection'].includes(prop.type)).map((prop) => (Object.assign(Object.assign({}, prop), { id: prop.type === 'object' || prop.type === 'user' ? `${prop.id}.name` : prop.id })))) !== null && _d !== void 0 ? _d : [];
         }
-        return properties.filter((prop) => prop.id !== 'name');
+        return properties;
     };
     const getValue = (relatedInstance, propertyId, propertyType) => {
         const value = get(relatedInstance, propertyId);
@@ -321,6 +336,7 @@ const RepeatableField = (props) => {
             return Array.isArray(value) ? value.map((v) => v.name).join(', ') : value;
         }
     };
+    const columns = retrieveViewLayout();
     return loading ? (React.createElement(React.Fragment, null,
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null),
@@ -334,35 +350,38 @@ const RepeatableField = (props) => {
                 } },
                 React.createElement(Table, { stickyHeader: true, sx: { minWidth: 650 } },
                     React.createElement(TableHead, { sx: { backgroundColor: '#F4F6F8' } },
-                        React.createElement(TableRow, null,
-                            React.createElement(TableCell, { sx: styles.tableCell }, (_b = (_a = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.properties) === null || _a === void 0 ? void 0 : _a.find((p) => p.id === 'name')) === null || _b === void 0 ? void 0 : _b.name), (_c = retrieveViewLayout()) === null || _c === void 0 ? void 0 :
-                            _c.map((prop) => (React.createElement(TableCell, { sx: styles.tableCell }, prop.name))),
-                            React.createElement(TableCell, { sx: Object.assign(Object.assign({}, styles.tableCell), { width: '20px' }) }))),
-                    React.createElement(TableBody, null, relatedInstances === null || relatedInstances === void 0 ? void 0 : relatedInstances.map((relatedInstance, index) => {
-                        var _a;
-                        return (React.createElement(TableRow, { key: relatedInstance.id },
-                            React.createElement(TableCell, { sx: {
-                                    color: '#212B36',
-                                    fontSize: '14px',
-                                    '&:hover': { textDecoration: 'underline', cursor: 'pointer' },
-                                }, onClick: canUpdateProperty ? () => editRow(relatedInstance.id) : undefined },
-                                React.createElement(Typography, null, relatedInstance === null || relatedInstance === void 0 ? void 0 : relatedInstance.name)), (_a = retrieveViewLayout()) === null || _a === void 0 ? void 0 :
-                            _a.map((prop) => {
-                                var _a;
-                                return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '14px' } },
-                                    React.createElement(Typography, { key: prop.id },
-                                        getValue(relatedInstance, prop.id, prop.type),
-                                        prop.type === 'user' &&
-                                            ((_a = users === null || users === void 0 ? void 0 : users.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)) === null || _a === void 0 ? void 0 : _a.status) === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
-                            }),
-                            canUpdateProperty && (React.createElement(TableCell, { sx: { width: '20px' } },
-                                React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
-                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))));
-                    }))))),
+                        React.createElement(TableRow, null, columns === null || columns === void 0 ? void 0 :
+                            columns.map((prop) => React.createElement(TableCell, { sx: styles.tableCell }, prop.name)),
+                            React.createElement(TableCell, { sx: Object.assign(Object.assign({}, styles.tableCell), { width: '80px' }) }))),
+                    React.createElement(TableBody, null, relatedInstances === null || relatedInstances === void 0 ? void 0 : relatedInstances.map((relatedInstance, index) => (React.createElement(TableRow, { key: relatedInstance.id }, columns === null || columns === void 0 ? void 0 :
+                        columns.map((prop) => {
+                            var _a;
+                            return (React.createElement(TableCell, { sx: { color: '#212B36', fontSize: '16px' } },
+                                React.createElement(Typography, { key: prop.id, sx: prop.id === 'name'
+                                        ? {
+                                            '&:hover': {
+                                                textDecoration: 'underline',
+                                                cursor: 'pointer',
+                                            },
+                                        }
+                                        : {}, onClick: canUpdateProperty && prop.id === 'name'
+                                        ? () => editRow(relatedInstance.id)
+                                        : undefined },
+                                    getValue(relatedInstance, prop.id, prop.type),
+                                    prop.type === 'user' &&
+                                        ((_a = users === null || users === void 0 ? void 0 : users.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)) === null || _a === void 0 ? void 0 : _a.status) === 'Inactive' && React.createElement("span", null, ' (Inactive)'))));
+                        }),
+                        canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
+                            React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
+                                React.createElement(Tooltip, { title: "Edit" },
+                                    React.createElement(Edit, null))),
+                            React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
+                                React.createElement(Tooltip, { title: "Delete" },
+                                    React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (_d = relatedInstances.find((i) => i.id === selectedRow)) !== null && _d !== void 0 ? _d : {} : {}, handleSubmit: save, 
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (_a = relatedInstances.find((i) => i.id === selectedRow)) !== null && _a !== void 0 ? _a : {} : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            objectInputCommonProps: { apiServices }, action: (_e = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.actions) === null || _e === void 0 ? void 0 : _e.find((a) => a.id ===
+            objectInputCommonProps: { apiServices }, action: (_b = relatedObject === null || relatedObject === void 0 ? void 0 : relatedObject.actions) === null || _b === void 0 ? void 0 : _b.find((a) => a.id ===
                 (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, relatedProperty: property, queryAddresses: queryAddresses, user: user })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.d.ts

@@ -1,10 +1,11 @@
-import { ObjWithRoot, ObjectInstance } from '@evoke-platform/context';
+import { ObjWithRoot, ObjectInstance, ViewLayoutEntityReference } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import { BaseFormComponentProps } from '../../types';
 declare type RepeatableFieldComponentProps = BaseFormComponentProps & {
     middleObject: ObjWithRoot;
     initialMiddleObjectInstances: ObjectInstance[];
     getMiddleObjectInstances: () => Promise<ObjectInstance[]>;
+    viewLayout?: ViewLayoutEntityReference;
 };
 export declare class RepeatableFieldComponent extends ReactComponent {
     [x: string]: any;

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

@@ -1,4 +1,4 @@
-import { ApiBaseUrlProvider, NotificationProvider } from '@evoke-platform/context';
+import { ApiBaseUrlProvider, NotificationProvider, } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
 import dot from 'dot-object';
 import { cloneDeep } from 'lodash';
@@ -49,7 +49,7 @@ export class RepeatableFieldComponent extends ReactComponent {
         const inputId = `${this.component.id}-input`;
         return ReactDOM.render(React.createElement("div", null, !this.component.hidden ? (React.createElement(ApiBaseUrlProvider, { url: apiBaseUrl },
             React.createElement(NotificationProvider, null,
-                React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty }), this.component.property.manyToManyPropertyId ? (React.createElement(DropdownRepeatableField, { id: inputId, property: this.component.property, instance: this.component.instance, apiServices: this.component.apiServices, criteria: this.updatedCriteria, readOnly: !this.component.canUpdateProperty, initialMiddleObjectInstances: this.component.initialMiddleObjectInstances, middleObject: this.component.middleObject, getMiddleObjectInstances: this.component.getMiddleObjectInstances, fieldHeight: this.component.fieldHeight })) : (React.createElement(RepeatableField, Object.assign({}, this.component))))))) : null), element);
+                React.createElement(FormComponentWrapper, Object.assign({}, this.component, { inputId: inputId, viewOnly: !this.component.canUpdateProperty }), this.component.property.manyToManyPropertyId ? (React.createElement(DropdownRepeatableField, { id: inputId, property: this.component.property, instance: this.component.instance, apiServices: this.component.apiServices, criteria: this.updatedCriteria, readOnly: !this.component.canUpdateProperty, initialMiddleObjectInstances: this.component.initialMiddleObjectInstances, middleObject: this.component.middleObject, getMiddleObjectInstances: this.component.getMiddleObjectInstances, fieldHeight: this.component.fieldHeight, viewLayout: this.component.viewLayout })) : (React.createElement(RepeatableField, Object.assign({}, this.component))))))) : null), element);
     }
     detachReact(element) {
         ReactDOM.unmountComponentAtNode(element);

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

@@ -1,4 +1,4 @@
-import { ApiServices, ObjectInstance, Property, Reference, UserAccount } from '@evoke-platform/context';
+import { ApiServices, ObjectInstance, Property, Reference, UserAccount, ViewLayoutEntityReference } from '@evoke-platform/context';
 import { AutocompleteOption } from '../../core';
 export declare type BaseFormComponentProps = {
     key: string;
@@ -75,6 +75,7 @@ export declare type ObjectPropertyInputProps = {
     orderBy?: string;
     isModal?: boolean;
     label?: string;
+    viewLayout?: ViewLayoutEntityReference;
 };
 export declare type Address = {
     line1?: string;

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

@@ -243,7 +243,7 @@ export function convertFormToComponents(entries, parameters, object) {
                     }
                     : {
                         json: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.visibility,
-                    } });
+                    }, viewLayout: displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.viewLayout });
         }
     })
         .filter((item) => item);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.225",
+    "version": "1.0.0-dev.226",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -95,7 +95,7 @@
         "@dnd-kit/sortable": "^7.0.1",
         "@emotion/react": "^11.13.5",
         "@emotion/styled": "^11.8.1",
-        "@evoke-platform/context": "^1.0.0-dev.113",
+        "@evoke-platform/context": "^1.0.0-dev.118",
         "@formio/react": "^5.2.4-rc.1",
         "@js-joda/core": "^3.2.0",
         "@js-joda/locale_en-us": "^3.2.2",