@pega/react-sdk-overrides 25.1.10 → 25.1.11

package/lib/template/HierarchicalForm/hooks.ts

@@ -0,0 +1,224 @@
+import { useState, useEffect, useMemo, useCallback, useRef, Children, type PropsWithChildren, type SyntheticEvent } from 'react';
+
+import useGetTabsCount from '@pega/react-sdk-components/lib/hooks/useGetTabsCount';
+import { searchtabsClick as tabClick, getActiveTabId, getFirstVisibleTabId } from '@pega/react-sdk-components/lib/components/template/SubTabs/tabUtils';
+import { getInstructions } from '@pega/react-sdk-components/lib/components/helpers/template-utils';
+import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+const ComponentName = 'HierarchicalForm';
+
+const getLandingPageViewName = (contextName: string) => {
+  const target = contextName.substring(0, contextName.lastIndexOf('_'));
+  const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(target);
+  const containerItemData = PCore.getContainerUtils().getContainerItemData(target, activeContainerItemID);
+  return containerItemData?.view?.config?.name;
+};
+
+export interface HierarchicalFormProps extends PConnProps {
+  tabsVisibility?: Record<string, boolean>;
+  template?: string;
+  instructions?: string;
+  lastUpdateCaseTime?: string | number;
+}
+
+export function useHierarchicalForm(props: PropsWithChildren<HierarchicalFormProps>) {
+  const { children = [], getPConnect, tabsVisibility = {}, template } = props;
+  const [tabErrors, setTabErrors] = useState<Record<string, any>>({});
+  const tabErrorsRef = useRef<Record<string, any>>({});
+  const submitAttemptedRef = useRef(false);
+  const { lastUpdateCaseTime = getPConnect().getValue('caseInfo.lastUpdateTime') } = props;
+  const fullCaseId = getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID);
+
+  const deferLoadedTabs: any = Children.toArray(children)[0];
+  deferLoadedTabs.props.getPConnect().setInheritedProp('template', template);
+
+  const navigationKey = useMemo(() => {
+    const parentNavKey = `${
+      getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID) || getLandingPageViewName(getPConnect().getContextName())
+    }`;
+    return `${parentNavKey}-${getPConnect().getMetadata()?.name}-${ComponentName}`;
+  }, []);
+
+  const instructions = getInstructions(getPConnect(), props.instructions);
+
+  const storedTab = (PCore.getNavigationUtils().getComponentState(navigationKey) as any)?.activeTab;
+
+  const tabsFromChildren = deferLoadedTabs.props.getPConnect().getChildren();
+
+  const firstTabId = getFirstVisibleTabId(deferLoadedTabs, undefined);
+
+  const [currentTabId, setCurrentTabId] = useState(getActiveTabId(tabsFromChildren, storedTab || firstTabId));
+  const [tabVisibilityStr, setTabVisibilityStr] = useState('');
+  const { data: tabData, refreshTabData } = useGetTabsCount(deferLoadedTabs, 'hierarchical', currentTabId, template);
+
+  const handleCaseRefresh = (message: any) => {
+    if (message.subtype === 'tab') {
+      refreshTabData();
+    }
+  };
+
+  useEffect(() => {
+    let index = 0;
+    let caseSubId = '';
+    deferLoadedTabs.props
+      .getPConnect()
+      .getChildren()
+      ?.forEach((child: any) => {
+        const rawConfigProps = child.getPConnect().getRawConfigProps();
+        if ('visibility' in rawConfigProps) {
+          tabsVisibility[`${index}`] = rawConfigProps.visibility;
+        }
+        index += 1;
+      });
+
+    getPConnect().registerAdditionalProps({ tabsVisibility });
+    getPConnect().registerAdditionalProps({ lastUpdateCaseTime: '@P caseInfo.lastUpdateTime' });
+
+    if (fullCaseId) {
+      caseSubId = PCore.getMessagingServiceManager().getCaseSubscription(fullCaseId).subscribe({ caseId: fullCaseId }, handleCaseRefresh);
+    }
+
+    return () => {
+      if (fullCaseId) PCore.getMessagingServiceManager().getCaseSubscription(fullCaseId).unsubscribe(caseSubId);
+    };
+  }, []);
+
+  useEffect(() => {
+    refreshTabData();
+  }, [lastUpdateCaseTime]);
+
+  useEffect(() => {
+    const isVisibilityAvailable =
+      Object.values(tabsVisibility).length > 0 && Object.values(tabsVisibility).every(visibility => typeof visibility === 'boolean');
+    if (isVisibilityAvailable) {
+      let str = '';
+      Object.keys(tabsVisibility).forEach(key => {
+        str += key + tabsVisibility[key];
+      });
+      setTabVisibilityStr(str);
+    }
+  }, [tabsVisibility]);
+
+  useEffect(() => {
+    if (tabData && tabData.length) {
+      const activeTabId = getActiveTabId(tabData, currentTabId);
+      if (activeTabId !== currentTabId) {
+        setCurrentTabId(activeTabId);
+      }
+    }
+  }, [tabVisibilityStr, tabData]);
+
+  useEffect(() => {
+    PCore.getNavigationUtils().setComponentState(navigationKey, { activeTab: currentTabId });
+    const activeTabNavKey = `${getPConnect().getValue(PCore.getConstants().CASE_INFO.CASE_INFO_ID)}-CaseView-ActiveTab`;
+    PCore.getNavigationUtils().setComponentState(activeTabNavKey, { id: currentTabId });
+
+    return () => {
+      if (getPConnect().getContextName()?.includes('/modal')) {
+        PCore.getNavigationUtils().setComponentState(navigationKey, { activeTab: firstTabId });
+      }
+    };
+  }, [currentTabId, children]);
+
+  const handleTabClick = useCallback(
+    (event: SyntheticEvent, id: string) => {
+      tabClick(id, tabData, currentTabId, setCurrentTabId);
+    },
+    [tabData, currentTabId]
+  );
+
+  const tabItems = useMemo(() => tabData?.filter((tab: any) => tab.visibility()) ?? [], [tabData, tabVisibilityStr]);
+
+  const tabsRef = useRef(tabItems);
+  tabsRef.current = tabItems;
+
+  const updateTabErrorsOnViewMutate = useCallback((messageObject: any, tab: any) => {
+    if (!messageObject.type) {
+      return;
+    }
+    const previousTabErrors = tabErrorsRef.current;
+    let currentTabState = previousTabErrors[tab.id] || {};
+    const { MESSAGES_TYPE_ERROR } = PCore.getConstants().MESSAGES;
+    if (messageObject.type !== MESSAGES_TYPE_ERROR) {
+      delete currentTabState[messageObject.fieldName];
+      currentTabState = Object.keys(currentTabState).length > 0 ? currentTabState : undefined;
+    } else {
+      currentTabState = { ...currentTabState, [messageObject.fieldName]: messageObject.messages };
+    }
+    const newErrors = { ...previousTabErrors, [tab.id]: currentTabState };
+    tabErrorsRef.current = newErrors;
+    setTabErrors(newErrors);
+  }, []);
+
+  useEffect(() => {
+    const rawConfig = '_rawConfig';
+    tabItems.forEach((tab: any) => {
+      PCore.getContextTreeManager().onViewMutate(
+        tab.getPConnect().getContextName(),
+        tab.getPConnect().getPageReference(),
+        tab.getPConnect()[rawConfig].config?.name,
+        (messageObject: any) => updateTabErrorsOnViewMutate(messageObject, tab)
+      );
+    });
+  }, [tabItems, updateTabErrorsOnViewMutate]);
+
+  const navigateToFirstErrorTab = useCallback(() => {
+    const currentErrors = tabErrorsRef.current;
+    const firstTabWithError = tabsRef.current.find((tab: any) => {
+      const tabErrorState = currentErrors[tab.id];
+      return tabErrorState && Object.keys(tabErrorState).length > 0;
+    });
+    if (firstTabWithError) {
+      submitAttemptedRef.current = false;
+      setCurrentTabId(firstTabWithError.id);
+    }
+  }, []);
+
+  const highlightFirstErrorTab = useCallback(() => {
+    submitAttemptedRef.current = true;
+    navigateToFirstErrorTab();
+  }, [navigateToFirstErrorTab]);
+
+  useEffect(() => {
+    const { CURRENT_ASSIGNMENT_UPDATED } = PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
+    PCore.getPubSubUtils().subscribe(
+      CURRENT_ASSIGNMENT_UPDATED,
+      () => {
+        tabErrorsRef.current = {};
+        submitAttemptedRef.current = false;
+        setTabErrors({});
+      },
+      'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm'
+    );
+
+    PCore.getPubSubUtils().subscribe(
+      PCore.getConstants().PUB_SUB_EVENTS.ERROR_ON_FINISH_ASSIGNMENT,
+      highlightFirstErrorTab,
+      'ERROR_ON_FINISH_ASSIGNMENT-HierarchicalForm'
+    );
+
+    return () => {
+      PCore.getPubSubUtils().unsubscribe(CURRENT_ASSIGNMENT_UPDATED, 'CURRENT_ASSIGNMENT_UPDATED-HierarchicalForm');
+      PCore.getPubSubUtils().unsubscribe(
+        PCore.getConstants().PUB_SUB_EVENTS.ERROR_ON_FINISH_ASSIGNMENT,
+        'ERROR_ON_FINISH_ASSIGNMENT-HierarchicalForm'
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (submitAttemptedRef.current) {
+      navigateToFirstErrorTab();
+    }
+  }, [tabErrors, navigateToFirstErrorTab]);
+
+  const processedTabs = useMemo(() => {
+    return tabItems.map(tab => {
+      const errorKeys = Object.keys(tabErrors[tab.id] ?? {});
+      const errors = errorKeys.length > 0 ? errorKeys.reduce((sum, fieldName) => sum + tabErrors[tab.id][fieldName].length, 0) : undefined;
+      return { ...tab, errors };
+    });
+  }, [tabItems, tabErrors]);
+
+  return { currentTabId, handleTabClick, processedTabs, instructions };
+}

package/lib/template/HierarchicalForm/index.tsx

@@ -0,0 +1 @@
+export { default } from './HierarchicalForm';

package/lib/template/ListView/ListView.tsx

@@ -60,6 +60,7 @@ interface ListViewProps extends PConnProps {
   viewName?: string;
   showRecords?: boolean;
   displayAs?: string;
+  localeReference?: string;
 }
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
@@ -89,7 +90,8 @@ export default function ListView(props: ListViewProps) {
     viewName,
     readonlyContextList: selectedValues,
     value,
-    displayAs
+    displayAs,
+    localeReference
   } = props;
   let { showRecords } = props;
   const ref = useRef({}).current;
@@ -135,6 +137,9 @@ export default function ListView(props: ListViewProps) {
 
   const [selectedValue, setSelectedValue] = useState(value);
 
+  // Tracks selected row keys for multi-select mode (mirrors Angular's SelectionModel)
+  const [selectedRowSet, setSelectedRowSet] = useState<Set<string>>(new Set());
+
   // This basically will hold the list of all current filters
   const filters = useRef({});
 
@@ -208,6 +213,7 @@ export default function ListView(props: ListViewProps) {
               getPConnect().getListActions().setSelectedRows({});
             } else {
               getPConnect().getListActions().clearSelectedRows();
+              setSelectedRowSet(new Set());
             }
           }
         }
@@ -560,6 +566,7 @@ export default function ListView(props: ListViewProps) {
     const selectParams: any = [];
 
     myColumns.forEach(column => {
+      column.label = PCore.getLocaleUtils().getLocaleValue(column.label, localeReference);
       selectParams.push({
         field: column.id
       });
@@ -586,6 +593,17 @@ export default function ListView(props: ListViewProps) {
     if (bCallSetRowsColumns) {
       setRows(myRows);
       setColumns(myColumns);
+
+      if (selectionMode === SELECTION_MODE.MULTI && selectedValues?.length > 0) {
+        const readonlyIds = new Set<string>(selectedValues.map((element: any) => element[rowID]));
+        const initialSet = new Set<string>();
+        myRows?.forEach(row => {
+          if (readonlyIds.has(row[rowID])) {
+            initialSet.add(row[rowID]);
+          }
+        });
+        setSelectedRowSet(initialSet);
+      }
     }
 
     return () => {
@@ -1013,22 +1031,57 @@ export default function ListView(props: ListViewProps) {
     setSelectedValue(value);
   };
 
-  const onCheckboxClick = event => {
-    const value = event?.target?.value;
-    const checked = event?.target?.checked;
+  const getSelectedValue = (row: any, checked: boolean) => {
+    const rowValue = row[rowID];
     const reqObj: any = {};
     if (compositeKeys?.length > 1) {
-      const index = response.findIndex(element => element[rowID] === value);
+      const index = response.findIndex(element => element[rowID] === rowValue);
       const selectedRow = response[index];
       compositeKeys.forEach(element => {
         reqObj[element] = selectedRow[element];
       });
       reqObj.$selected = checked;
     } else {
-      reqObj[rowID] = value;
+      reqObj[rowID] = rowValue;
       reqObj.$selected = checked;
     }
-    getPConnect()?.getListActions()?.setSelectedRows([reqObj]);
+    return reqObj;
+  };
+
+  const onCheckboxClick = (row: any) => {
+    const rowKey = row[rowID];
+    const newSet = new Set(selectedRowSet);
+    if (newSet.has(rowKey)) {
+      newSet.delete(rowKey);
+    } else {
+      newSet.add(rowKey);
+    }
+    setSelectedRowSet(newSet);
+    const checked = newSet.has(rowKey);
+    const requiredValue = getSelectedValue(row, checked);
+    getPConnect()?.getListActions()?.setSelectedRows([requiredValue]);
+  };
+
+  const isAllSelected = (): boolean => {
+    const numSelected = selectedRowSet.size;
+    const numRows = arRows?.length || 0;
+    return numRows > 0 && numSelected === numRows;
+  };
+
+  const toggleAllRows = () => {
+    if (isAllSelected()) {
+      setSelectedRowSet(new Set());
+      getPConnect()?.getListActions()?.clearSelectedRows();
+      return;
+    }
+    if (selectedRowSet.size > 0 && !isAllSelected()) {
+      getPConnect()?.getListActions()?.clearSelectedRows();
+    }
+    const newSet = new Set<string>();
+    arRows.forEach(row => newSet.add(row[rowID]));
+    setSelectedRowSet(newSet);
+    const requiredValues = arRows.map(row => getSelectedValue(row, true));
+    getPConnect()?.getListActions()?.setSelectedRows(requiredValues);
   };
 
   const processColumnValue = (column, value) => {
@@ -1151,7 +1204,16 @@ export default function ListView(props: ListViewProps) {
               <Table>
                 <TableHead>
                   <TableRow>
-                    {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
+                    {selectionMode === SELECTION_MODE.SINGLE && <TableCell padding='checkbox' />}
+                    {selectionMode === SELECTION_MODE.MULTI && (
+                      <TableCell padding='checkbox'>
+                        <Checkbox
+                          indeterminate={selectedRowSet.size > 0 && !isAllSelected()}
+                          checked={arRows?.length > 0 && isAllSelected()}
+                          onChange={toggleAllRows}
+                        />
+                      </TableCell>
+                    )}
                     {arColumns.map(column => {
                       return (
                         <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
@@ -1179,7 +1241,7 @@ export default function ListView(props: ListViewProps) {
                         return (
                           <TableRow key={row[rowID]}>
                             {selectionMode === SELECTION_MODE.SINGLE && (
-                              <TableCell>
+                              <TableCell padding='checkbox'>
                                 <Radio
                                   onChange={handleChange}
                                   value={row[rowID]}
@@ -1190,12 +1252,8 @@ export default function ListView(props: ListViewProps) {
                               </TableCell>
                             )}
                             {selectionMode === SELECTION_MODE.MULTI && (
-                              <TableCell>
-                                <Checkbox
-                                  onChange={onCheckboxClick}
-                                  checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
-                                  value={row[rowID]}
-                                />
+                              <TableCell padding='checkbox'>
+                                <Checkbox onChange={() => onCheckboxClick(row)} checked={selectedRowSet.has(row[rowID])} />
                               </TableCell>
                             )}
                             {arColumns.map(column => {

package/lib/template/MultiReferenceReadOnly/MultiReferenceReadOnly.tsx

@@ -4,12 +4,27 @@ interface MultiReferenceReadOnlyProps extends PConnProps {
   config: { referenceList: any; readonlyContextList: any };
   label: string;
   hideLabel: boolean;
+  displayMode?: any;
+  displayAs?: any;
 }
 
 export default function MultiReferenceReadOnly(props: MultiReferenceReadOnlyProps) {
-  const { getPConnect, label = '', hideLabel = false, config } = props;
+  const { getPConnect, label = '', hideLabel = false, config, displayMode, displayAs } = props;
   const { referenceList, readonlyContextList } = config;
 
+  if (['readonlyMulti', 'combobox', 'checkboxgroup'].includes(displayAs)) {
+    return getPConnect().createComponent({
+      type: 'SimpleTableSelectReadonly',
+      config: {
+        ...config,
+        displayMode,
+        label,
+        hideLabel,
+        displayAs
+      }
+    } as any);
+  }
+
   // When referenceList does not contain selected values, it should be replaced with readonlyContextList while calling SimpleTableManual
   let readonlyContextObject;
   if (!PCore.getAnnotationUtils().isProperty(referenceList)) {

package/lib/template/ObjectPage/index.tsx

@@ -0,0 +1 @@
+export { default } from '../CaseView';

package/lib/template/SelfServiceCaseView/SelfServiceCaseView.tsx

@@ -1,6 +1,5 @@
 import { Avatar, Card, CardHeader, Divider, Typography } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import Grid2 from '@mui/material/Grid2';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { prepareCaseSummaryData, filterUtilities } from '@pega/react-sdk-components/lib/components/template/utils';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
@@ -29,6 +28,16 @@ const useStyles = makeStyles(theme => ({
   },
   caseViewIconImage: {
     filter: 'var(--svg-color)'
+  },
+  selfServiceCaseViewHeader: {
+    margin: '10px 8px 0px 8px',
+    height: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: theme.palette.primary.light,
+    color: theme.palette.getContrastText(theme.palette.primary.light),
+    padding: '0 8px'
   }
 }));
 
@@ -86,11 +95,14 @@ export default function SelfServiceCaseView(props) {
     return false;
   };
 
+  const showSummary = bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0);
+  const showUtilities = bShowUtilitiesRegion && isUtilitiesRegionNotEmpty();
+
   return (
     <div>
-      {bShowCaseActions && (
-        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', margin: '10px' }}>
-          <div>{PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}</div>
+      <div className={classes.selfServiceCaseViewHeader}>
+        <div>{PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}</div>
+        {bShowCaseActions && (
           <CaseViewActionsMenu
             getPConnect={getPConnect}
             availableActions={availableActions}
@@ -98,47 +110,43 @@ export default function SelfServiceCaseView(props) {
             caseTypeName={caseTypeName}
             caseTypeID={caseTypeID}
           />
-        </div>
-      )}
-      <div>
-        <Grid2 container>
-          <Grid2 size={{ xs: 3 }}>
-            {bShowSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0) && (
-              <div>
-                <Card className={classes.root}>
-                  <CardHeader
-                    className={classes.caseViewHeader}
-                    title={
-                      <Typography variant='h6' component='div' id='case-name'>
-                        {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
-                      </Typography>
-                    }
-                    subheader={
-                      <Typography variant='body1' component='div' id='caseId'>
-                        {subheader}
-                      </Typography>
-                    }
-                    avatar={
-                      <Avatar className={classes.caseViewIconBox} variant='square'>
-                        <img src={svgCase} className={classes.caseViewIconImage} />
-                      </Avatar>
-                    }
-                  />
-                  <Divider />
-                  <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
-                  <Divider />
-                </Card>
-              </div>
-            )}
-          </Grid2>
+        )}
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        {showSummary && (
+          <div style={{ flex: '0 0 25%' }}>
+            <Card className={classes.root}>
+              <CardHeader
+                className={classes.caseViewHeader}
+                title={
+                  <Typography variant='h6' component='div' id='case-name'>
+                    {PCore.getLocaleUtils().getLocaleValue(header, '', localeKey)}
+                  </Typography>
+                }
+                subheader={
+                  <Typography variant='body1' component='div' id='caseId'>
+                    {subheader}
+                  </Typography>
+                }
+                avatar={
+                  <Avatar className={classes.caseViewIconBox} variant='square'>
+                    <img src={svgCase} className={classes.caseViewIconImage} />
+                  </Avatar>
+                }
+              />
+              <Divider />
+              <CaseSummary arPrimaryFields={primarySummaryFields} arSecondaryFields={secondarySummaryFields}></CaseSummary>
+              <Divider />
+            </Card>
+          </div>
+        )}
 
-          <Grid2 size={{ xs: 6 }}>
-            {bShowCaseLifecycle && renderedRegions.stages}
-            {renderedRegions.todo}
-          </Grid2>
+        <div style={{ flex: 1 }}>
+          {bShowCaseLifecycle && renderedRegions.stages}
+          {renderedRegions.todo}
+        </div>
 
-          {bShowUtilitiesRegion && isUtilitiesRegionNotEmpty() && <Grid2 size={{ xs: 3 }}>{renderedRegions.utilities}</Grid2>}
-        </Grid2>
+        {showUtilities && <div style={{ flex: '0 0 25%' }}>{renderedRegions.utilities}</div>}
       </div>
     </div>
   );

package/lib/template/SimpleTable/SimpleTableManual/SimpleTableManual.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -28,9 +28,10 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getReferenceList } from '@pega/react-sdk-components/lib/components/helpers/field-group-utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import { getGenericFieldsLocalizedValue } from '@pega/react-sdk-components/lib/components/helpers/common-utils';
-import { buildFieldsForTable, filterData, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
+import { buildFieldsForTable, filterData, getConfigFields, getContext } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+import { initializeColumns } from '@pega/react-sdk-components/lib/components/template/ListView/utils';
 
 interface SimpleTableManualProps extends PConnProps {
   // If any, enter additional props that only exist on this component
@@ -190,6 +191,8 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   const bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
   const editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
 
+  const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
+
   const fieldsWithPropNames = rawFields.map((field, index) => {
     return { ...resolvedFields[index], propName: field.config.value.replace('@P .', '') };
   });
@@ -207,10 +210,15 @@ export default function SimpleTableManual(props: PropsWithChildren<SimpleTableMa
   //  Constellation DX Components do). It will also have the "label", and "meta" contains the original,
   //  unchanged config info. For now, much of the info here is carried over from
   //  Constellation DX Components.
-  const fieldDefs = buildFieldsForTable(rawFields, getPConnect(), showDeleteButton, {
-    primaryFieldsViewIndex,
-    fields: resolvedFields
-  });
+
+  const fieldDefs = useMemo(
+    () =>
+      isDisplayModeEnabled || readOnlyMode
+        ? initializeColumns(configFields, undefined)
+        : // For inline edit table
+          buildFieldsForTable(rawFields, getPConnect(), showDeleteButton, { primaryFieldsViewIndex, fields: resolvedFields }),
+    []
+  );
 
   useLayoutEffect(() => {
     if (allowEditingInModal) {