@pega/react-sdk-overrides 8.23.11 → 23.1.11

package/lib/template/ListView/ListView.tsx

@@ -1,12 +1,10 @@
 /* eslint-disable no-plusplus */
-/* eslint-disable guard-for-in */
+
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable @typescript-eslint/no-shadow */
-/* eslint-disable no-shadow */
+
 import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -37,17 +35,37 @@ import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
 import { Radio } from '@material-ui/core';
 import Checkbox from '@material-ui/core/Checkbox';
+
 import { filterData } from '@pega/react-sdk-components/lib/components/helpers/simpleTableHelpers';
+
 import './ListView.css';
-import useInit from './hooks'
+import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
+import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
+import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
+
+import useInit from './hooks';
+import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+
+interface ListViewProps extends PConnProps {
+  // If any, enter additional props that only exist on this component
+  bInForm?: boolean;
+  globalSearch?: boolean;
+  referenceList?: any[];
+  // rowClickAction?: any;
+  selectionMode?: string;
+  referenceType?: string;
+  payload?: any;
+  parameters?: any;
+  compositeKeys?: any;
+  showDynamicFields?: boolean;
+  readonlyContextList?: any;
+  value: any;
+}
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 3 errors)
-declare const PCore: any;
-
-let myRows: Array<any>;
-let myDisplayColumnList: Array<any>;
+let myRows: any[];
+let myDisplayColumnList: any[];
 
 let menuColumnId = '';
 let menuColumnType = '';
@@ -55,11 +73,23 @@ let menuColumnLabel = '';
 
 let sortColumnId: any;
 
-const filterByColumns: Array<any> = [];
-
-export default function ListView(props) {
-  const { getPConnect, bInForm } = props;
-  const { globalSearch, referenceList, rowClickAction, selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, presets } = props;
+const filterByColumns: any[] = [];
+
+export default function ListView(props: ListViewProps) {
+  const { getPConnect, bInForm = true } = props;
+  const {
+    globalSearch,
+    referenceList,
+    /* rowClickAction, */
+    selectionMode,
+    referenceType,
+    payload,
+    parameters,
+    compositeKeys,
+    showDynamicFields,
+    readonlyContextList: selectedValues,
+    value
+  } = props;
   const ref = useRef({}).current;
   const cosmosTableRef = useRef();
   // List component context
@@ -68,11 +98,19 @@ export default function ListView(props) {
   const xRayApis = PCore.getDebugger().getXRayRuntime();
   const xRayUid = xRayApis.startXRay();
 
-  useInit({ ...props, setListContext, ref, showDynamicFields, xRayUid, cosmosTableRef });
+  useInit({
+    ...props,
+    setListContext,
+    ref,
+    showDynamicFields,
+    xRayUid,
+    cosmosTableRef
+  });
 
   const thePConn = getPConnect();
+  // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'.
   const componentConfig = thePConn.getComponentConfig();
-  const resolvedConfigProps = thePConn.getConfigProps();
+  const resolvedConfigProps: any = thePConn.getConfigProps() as ListViewProps;
 
   /** By default, pyGUID is used for Data classes and pyID is for Work classes as row-id/key */
   const defRowID = referenceType === 'Case' ? 'pyID' : 'pyGUID';
@@ -80,9 +118,9 @@ export default function ListView(props) {
   /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
   const rowID = compositeKeys && compositeKeys?.length === 1 ? compositeKeys[0] : defRowID;
 
-  const [arRows, setRows] = useState<Array<any>>([]);
-  const [arColumns, setColumns] = useState<Array<any>>([]);
-  const [response, setResponse] = useState<Array<any>>([]);
+  const [arRows, setRows] = useState<any[]>([]);
+  const [arColumns, setColumns] = useState<any[]>([]);
+  const [response, setResponse] = useState<any[]>([]);
 
   const [order, setOrder] = useState<Order>('asc');
   const [orderBy, setOrderBy] = useState<keyof any>('');
@@ -93,19 +131,19 @@ export default function ListView(props) {
   const [showSnackbar, setShowSnackbar] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState('');
 
-  const [selectedValue, setSelectedValue] = useState('');
+  const [selectedValue, setSelectedValue] = useState(value);
 
   // This basically will hold the list of all current filters
   const filters = useRef({});
 
   // Will contain the list of columns specific for an instance
-  let columnList: any = useRef([]);
-  let dashboardFilterPayload: any ;
+  const columnList: any = useRef([]);
+  const filterPayload: any = useRef();
   // Will be sent in the dashboardFilterPayload
-  let selectParam: Array<any> = [];
+  let selectParam: any[] = [];
 
   // dataview parameters coming from the ListPage
-  // This constant will also be used for parameters coming from from other components/utility fnctions in future
+  // This constant will also be used for parameters coming from from other components/utility functions in future
   const dataViewParameters = parameters;
 
   const useStyles = makeStyles((theme: Theme) =>
@@ -116,7 +154,8 @@ export default function ListView(props) {
       paper: {
         width: '100%',
         marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
+        marginBottom: theme.spacing(2),
+        display: 'grid'
       },
       search: {
         padding: '5px 5px'
@@ -184,15 +223,11 @@ export default function ListView(props) {
   function getComparator<Key extends keyof any>(
     theOrder: Order,
     orderedBy: Key
-    // eslint-disable-next-line no-unused-vars
   ): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
-    return theOrder === 'desc'
-      ? (a, b) => descendingComparator(a, b, orderedBy)
-      : (a, b) => -descendingComparator(a, b, orderedBy);
+    return theOrder === 'desc' ? (a, b) => descendingComparator(a, b, orderedBy) : (a, b) => -descendingComparator(a, b, orderedBy);
   }
 
-  // eslint-disable-next-line no-unused-vars
-  function stableSort<T>(array: Array<T>, comparator: (a: T, b: T) => number) {
+  function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
     const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
     stabilizedThis.sort((a, b) => {
       const order = comparator(a[0], b[0]);
@@ -215,8 +250,8 @@ export default function ListView(props) {
   };
 
   const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
-  function getHeaderCells(colFields, fields, presetFields) {
-    const arReturn = colFields.map((field: any, index) => {
+  function getHeaderCells(colFields, fields) {
+    return colFields.map((field: any, index) => {
       let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
       if (theField.indexOf('.') === 0) {
         theField = theField.substring(1);
@@ -224,17 +259,12 @@ export default function ListView(props) {
       const colIndex = fields.findIndex(ele => ele.name === theField);
       const displayAsLink = field.config.displayAsLink;
       const headerRow: any = {};
-      headerRow.id = theField;
+      headerRow.id = fields[index].id;
       headerRow.type = field.type;
       headerRow.displayAsLink = displayAsLink;
-      headerRow.numeric =
-        field.type === 'Decimal' ||
-        field.type === 'Integer' ||
-        field.type === 'Percentage' ||
-        field.type === 'Currency' ||
-        false;
+      headerRow.numeric = field.type === 'Decimal' || field.type === 'Integer' || field.type === 'Percentage' || field.type === 'Currency' || false;
       headerRow.disablePadding = false;
-      headerRow.label =  presetFields[index].config.label;
+      headerRow.label = fields[index].label;
       if (colIndex > -1) {
         headerRow.classID = fields[colIndex].classID;
       }
@@ -246,19 +276,9 @@ export default function ListView(props) {
       }
       return headerRow;
     });
-    return arReturn;
   }
 
-  function updateFields(arFields, theColumns): Array<any> {
-    const arReturn = arFields.filter(ele => ele.type !== 'reference');
-    arReturn.forEach((field, index) => {
-      arReturn[index].config.name = theColumns[index].id;
-    });
-
-    return arReturn;
-  }
-
-  function getUsingData(arTableData): Array<any> {
+  function getUsingData(arTableData): any[] {
     if (selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) {
       const record = arTableData?.length > 0 ? arTableData[0] : '';
       if (typeof record === 'object' && !('pyGUID' in record) && !('pyID' in record)) {
@@ -266,64 +286,13 @@ export default function ListView(props) {
         console.error('pyGUID or pyID values are mandatory to select the required row from the list');
       }
     }
-    const arReturn = arTableData?.map((data: any) => {
-
-      const row = data;
-
-      return row;
+    return arTableData?.map((data: any) => {
+      return data;
     });
-
-    return arReturn;
   }
 
-  function updateData(listData: Array<any>, fieldData: Array<any>): Array<any> {
-    const returnList: Array<any> = new Array<any>();
-    listData?.forEach(row => {
-      // copy
-      const rowData = JSON.parse(JSON.stringify(row));
-
-      fieldData.forEach(field => {
-        const config = field.config;
-        let fieldName;
-        let formattedDate;
-        let myFormat;
-
-        switch (field.type) {
-          case 'Date':
-            fieldName = config.name;
-            myFormat = config.formatter;
-            if (!myFormat) {
-              myFormat = 'Date';
-            }
-            formattedDate = Utils.generateDate(rowData[fieldName], myFormat);
-
-            rowData[fieldName] = formattedDate;
-            break;
-
-          case 'DateTime':
-            fieldName = config.name;
-            myFormat = config.formatter;
-            if (!myFormat) {
-              myFormat = 'DateTime-Long';
-            }
-            formattedDate = Utils.generateDateTime(rowData[fieldName], myFormat);
-
-            rowData[fieldName] = formattedDate;
-            break;
-
-          default:
-            break;
-        }
-      });
-
-      returnList.push(rowData);
-    });
-
-    return returnList;
-  }
-
-  function getMyColumnList(arCols: Array<any>): Array<string> {
-    const myColList: Array<string> = [];
+  function getMyColumnList(arCols: any[]): string[] {
+    const myColList: string[] = [];
 
     arCols.forEach(col => {
       myColList.push(col.id);
@@ -346,7 +315,7 @@ export default function ListView(props) {
   // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
   function processFilterChange(data) {
     const { filterId, filterExpression } = data;
-    dashboardFilterPayload = {
+    let dashboardFilterPayload: any = {
       query: {
         filter: {},
         select: []
@@ -354,22 +323,21 @@ export default function ListView(props) {
     };
 
     filters.current[filterId] = filterExpression;
-    // eslint-disable-next-line no-unneeded-ternary
-    let isDateRange = data.filterExpression?.AND ? true : false;
+    let isDateRange = data.filterExpression?.AND;
     // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
     const relationalOp = 'AND';
 
     let field = getFieldFromFilter(filterExpression, isDateRange);
     selectParam = [];
     // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-    columnList.forEach(col => {
+    columnList.current.forEach(col => {
       selectParam.push({
         field: col
       });
     });
 
     // Checking if the triggered filter is applicable for this list
-    if (data.filterExpression !== null && !(columnList.length && columnList.includes(field))) {
+    if (data.filterExpression !== null && !(columnList.current?.length && columnList.current?.includes(field))) {
       return;
     }
     // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
@@ -377,7 +345,7 @@ export default function ListView(props) {
 
     let index = 1;
     // Iterating over the current filters list to create filter data which will be POSTed
-    for (const filterExp in filters.current) {
+    for (const filterExp of Object.keys(filters.current)) {
       const filter = filters.current[filterExp];
       // If the filter is null then we can skip this iteration
       if (filter === null) {
@@ -386,11 +354,10 @@ export default function ListView(props) {
       }
 
       // Checking if the filter is of type- Date Range
-      // eslint-disable-next-line no-unneeded-ternary
-      isDateRange = filter?.AND ? true : false;
+      isDateRange = filter?.AND;
       field = getFieldFromFilter(filter, isDateRange);
 
-      if (!(columnList.length && columnList.includes(field))) {
+      if (!(columnList.current.length && columnList.current.includes(field))) {
         // eslint-disable-next-line no-continue
         continue;
       }
@@ -398,7 +365,7 @@ export default function ListView(props) {
       validFilter = true;
       /** Below are the 2 cases for- Text & Date-Range filter types where we'll construct filter data which will be sent in the dashboardFilterPayload
        * In Constellation DX Components, through Repeating Structures they might be using several APIs to do it. We're doing it here
-      */
+       */
       if (isDateRange) {
         const dateRelationalOp = filter?.AND ? 'AND' : 'OR';
         dashboardFilterPayload.query.filter.filterConditions = {
@@ -422,9 +389,7 @@ export default function ListView(props) {
         };
 
         if (dashboardFilterPayload.query.filter.logic) {
-          dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${
-            index - 1
-          }`;
+          dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${index - 1}`;
         } else {
           dashboardFilterPayload.query.filter.logic = `T${index - 1}`;
         }
@@ -437,57 +402,39 @@ export default function ListView(props) {
     if (!validFilter) {
       dashboardFilterPayload = undefined;
     }
-
+    filterPayload.current = dashboardFilterPayload;
     fetchDataFromServer();
   }
 
   // Will be triggered when EVENT_DASHBOARD_FILTER_CLEAR_ALL fires
   function processFilterClear() {
-    dashboardFilterPayload = undefined;
+    filterPayload.current = undefined;
     fetchDataFromServer();
   }
 
-  useEffect(() => {
-    setTimeout(() => {
-      PCore.getPubSubUtils().subscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
-        data => {
-          processFilterChange(data);
-        },
-        `dashboard-component-${'id'}`,
-        false,
-        getPConnect().getContextName()
-      );
-      PCore.getPubSubUtils().subscribe(
-        PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
-        () => {
-          filters.current = {};
-          processFilterClear();
-        },
-        `dashboard-component-${'id'}`,
-        false,
-        getPConnect().getContextName()
-      );
-    }, 0);
-  }, []);
-
-  function fetchAllData(fields) {
+  function fetchAllData(fields): any {
     let query: any = null;
     if (payload) {
       query = payload.query;
     } else if (fields?.length && meta.isQueryable) {
-      query = {select: fields};
-    } else if (dashboardFilterPayload) {
-      query = dashboardFilterPayload.query;
+      if (filterPayload.current) {
+        query = {
+          select: fields,
+          filter: filterPayload.current?.query?.filter
+        };
+      } else {
+        query = { select: fields };
+      }
+    } else if (filterPayload.current) {
+      query = filterPayload.current?.query;
     }
     const context = getPConnect().getContextName();
-    return PCore.getDataPageUtils().getDataAsync(
-      referenceList,
-      context,
-      payload ? payload.dataViewParameters : dataViewParameters,
-      null,
-      query
-    );
+    // getDataAsync isn't returning correct data for the Page(i.e. ListView within a page) case
+    return !bInForm
+      ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
+        PCore.getDataApiUtils().getData(referenceList, payload)
+      : // @ts-ignore - Argument of type 'null' is not assignable to parameter of type 'object'
+        PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
   }
 
   const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
@@ -526,18 +473,22 @@ export default function ListView(props) {
     return listFields;
   };
 
-  const addItemKeyInSelect = (
-    fieldDefs,
-    itemKey,
-    select,
-    compositeKeys
-  ) => {
+  const addItemKeyInSelect = (fieldDefs, itemKey, select, compositeKeys) => {
     const elementFound = getField(fieldDefs, itemKey);
 
-    if (itemKey && !elementFound && Array.isArray(select) && !(compositeKeys !== null && compositeKeys?.length) && !select.find(sel => sel.field === itemKey)) {
-      return [...select, {
-        field: itemKey
-      }];
+    if (
+      itemKey &&
+      !elementFound &&
+      Array.isArray(select) &&
+      !(compositeKeys !== null && compositeKeys?.length) &&
+      !select.find(sel => sel.field === itemKey)
+    ) {
+      return [
+        ...select,
+        {
+          field: itemKey
+        }
+      ];
     }
 
     return select;
@@ -563,15 +514,12 @@ export default function ListView(props) {
     listFields = addItemKeyInSelect(fieldDefs, itemKey, listFields, compositeKeys);
     const workListJSON = await fetchAllData(listFields);
 
-    // don't update these fields until we return from promise
-    let fields = presets[0].children[0].children;
-
     // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
     const columnFields = componentConfig.presets[0].children[0].children;
 
-    const tableDataResults = workListJSON['data'];
+    const tableDataResults = !bInForm ? workListJSON.data.data : workListJSON.data;
 
-    const myColumns = getHeaderCells(columnFields, fieldDefs, fields);
+    const myColumns = getHeaderCells(columnFields, fieldDefs);
 
     const selectParams: any = [];
 
@@ -587,16 +535,14 @@ export default function ListView(props) {
       colList.push(col.field);
     });
 
-    columnList = colList;
-
-    fields = updateFields(fields, myColumns);
+    columnList.current = colList;
 
     setResponse(tableDataResults);
 
     const usingDataResults = getUsingData(tableDataResults);
 
     // store globally, so can be searched, filtered, etc.
-    myRows = updateData(usingDataResults, fields);
+    myRows = usingDataResults;
     myDisplayColumnList = getMyColumnList(myColumns);
 
     // At this point, if we have data ready to render and haven't been asked
@@ -620,13 +566,47 @@ export default function ListView(props) {
   useEffect(() => {
     if (listContext.meta) {
       fetchDataFromServer();
+      setTimeout(() => {
+        PCore.getPubSubUtils().subscribe(
+          PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+          data => {
+            processFilterChange(data);
+          },
+          `dashboard-component-${'id'}`,
+          false,
+          getPConnect().getContextName()
+        );
+        PCore.getPubSubUtils().subscribe(
+          PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+          () => {
+            filters.current = {};
+            processFilterClear();
+          },
+          `dashboard-component-${'id'}`,
+          false,
+          getPConnect().getContextName()
+        );
+      }, 0);
+
+      return function cleanupSubscriptions() {
+        PCore.getPubSubUtils().unsubscribe(
+          PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
+          `dashboard-component-${'id'}`,
+          getPConnect().getContextName()
+        );
+        PCore.getPubSubUtils().unsubscribe(
+          PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL,
+          `dashboard-component-${'id'}`,
+          getPConnect().getContextName()
+        );
+      };
     }
   }, [listContext]);
 
-  function searchFilter(value: string, rows: Array<any>) {
+  function searchFilter(value: string, rows: any[]) {
     function filterArray(el: any): boolean {
       const bReturn = false;
-      for (const key in el) {
+      for (const key of Object.keys(el)) {
         // only search columsn that are displayed (pzInsKey and pxRefObjectClass are added and may or may not be displayed)
         if (myDisplayColumnList.includes(key)) {
           let myVal = el[key];
@@ -669,7 +649,7 @@ export default function ListView(props) {
     const { pxRefObjectClass, pzInsKey } = row;
     const sTarget = thePConn.getContainerName();
 
-    const options = { containerName: sTarget };
+    const options = { containerName: sTarget, channelName: '' };
 
     thePConn
       .getActionsApi()
@@ -682,17 +662,17 @@ export default function ListView(props) {
       });
   }
 
-  function _rowClick(row: any) {
-    // eslint-disable-next-line sonarjs/no-small-switch
-    switch (rowClickAction) {
-      case 'openAssignment':
-        openAssignment(row);
-        break;
+  // function _rowClick(row: any) {
+  //   // eslint-disable-next-line sonarjs/no-small-switch
+  //   switch (rowClickAction) {
+  //     case 'openAssignment':
+  //       openAssignment(row);
+  //       break;
 
-      default:
-        break;
-    }
-  }
+  //     default:
+  //       break;
+  //   }
+  // }
 
   function openWork(row) {
     const { pxRefObjectKey } = row;
@@ -724,10 +704,9 @@ export default function ListView(props) {
   const [filterBy, setFilterBy] = useState<string>();
   const [containsDateOrTime, setContainsDateOrTime] = useState<boolean>(false);
   const [filterType, setFilterType] = useState<string>('string');
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [displayDialogFilterName, setDisplayDialogFilterName] = useState<string>('');
-  const [displayDialogContainsFilter, setDisplayDialogContainsFilter] =
-    useState<string>('contains');
+  const [displayDialogContainsFilter, setDisplayDialogContainsFilter] = useState<string>('contains');
   const [displayDialogContainsValue, setDisplayDialogContainsValue] = useState<string>('');
   const [displayDialogDateFilter, setDisplayDialogDateFilter] = useState<string>('notequal');
   const [displayDialogDateValue, setDisplayDialogDateValue] = useState<string>('');
@@ -740,11 +719,7 @@ export default function ListView(props) {
     for (const filterObj of filterByColumns) {
       if (filterObj.ref === menuColumnId) {
         setFilterBy(menuColumnLabel);
-        if (
-          filterObj.type === 'Date' ||
-          filterObj.type === 'DateTime' ||
-          filterObj.type === 'Time'
-        ) {
+        if (filterObj.type === 'Date' || filterObj.type === 'DateTime' || filterObj.type === 'Time') {
           setContainsDateOrTime(true);
           setFilterType(filterObj.type);
           setDisplayDialogDateFilter(filterObj.containsFilter);
@@ -793,9 +768,9 @@ export default function ListView(props) {
 
   function _showFilteredIcon(columnId) {
     for (const filterObj of filterByColumns) {
-      if (filterObj['ref'] === columnId) {
+      if (filterObj.ref === columnId) {
         // eslint-disable-next-line sonarjs/prefer-single-boolean-return
-        if (filterObj['containsFilterValue'] !== '') {
+        if (filterObj.containsFilterValue !== '') {
           return true;
         }
         return false;
@@ -808,14 +783,14 @@ export default function ListView(props) {
   function updateFilterWithInfo() {
     let bFound = false;
     for (const filterObj of filterByColumns) {
-      if (filterObj['ref'] === menuColumnId) {
-        filterObj['type'] = filterType;
+      if (filterObj.ref === menuColumnId) {
+        filterObj.type = filterType;
         if (containsDateOrTime) {
-          filterObj['containsFilter'] = displayDialogDateFilter;
-          filterObj['containsFilterValue'] = displayDialogDateValue;
+          filterObj.containsFilter = displayDialogDateFilter;
+          filterObj.containsFilterValue = displayDialogDateValue;
         } else {
-          filterObj['containsFilter'] = displayDialogContainsFilter;
-          filterObj['containsFilterValue'] = displayDialogContainsValue;
+          filterObj.containsFilter = displayDialogContainsFilter;
+          filterObj.containsFilterValue = displayDialogContainsValue;
         }
         bFound = true;
         break;
@@ -826,13 +801,13 @@ export default function ListView(props) {
       // add in
       const filterObj: any = {};
       filterObj.ref = menuColumnId;
-      filterObj['type'] = filterType;
+      filterObj.type = filterType;
       if (containsDateOrTime) {
-        filterObj['containsFilter'] = displayDialogDateFilter;
-        filterObj['containsFilterValue'] = displayDialogDateValue;
+        filterObj.containsFilter = displayDialogDateFilter;
+        filterObj.containsFilterValue = displayDialogDateValue;
       } else {
-        filterObj['containsFilter'] = displayDialogContainsFilter;
-        filterObj['containsFilterValue'] = displayDialogContainsValue;
+        filterObj.containsFilter = displayDialogContainsFilter;
+        filterObj.containsFilterValue = displayDialogContainsValue;
       }
 
       filterByColumns.push(filterObj);
@@ -901,7 +876,7 @@ export default function ListView(props) {
   }
 
   function _listViewClick(row, column) {
-    const name = column.id
+    const name = column.id;
     if (column.displayAsLink) {
       const { pxObjClass } = row;
       let { pzInsKey } = row;
@@ -911,7 +886,8 @@ export default function ListView(props) {
       }
       if (column.isAssignmentLink) {
         thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
-          containerName: 'primary'
+          containerName: 'primary',
+          channelName: ''
         });
       } else {
         thePConn.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
@@ -930,12 +906,11 @@ export default function ListView(props) {
           break;
       }
     }
-
   }
 
   function _listTitle() {
     const defaultTitle = 'List';
-    let title = resolvedConfigProps.title ? resolvedConfigProps.title : defaultTitle;
+    let title = resolvedConfigProps.title || resolvedConfigProps?.label || defaultTitle;
     const inheritedProps = resolvedConfigProps?.inheritedProps;
 
     // Let any title in resolvedConfigProps that isn't the default take precedence
@@ -959,35 +934,56 @@ export default function ListView(props) {
       const index = response.findIndex(element => element[rowID] === value);
       const selectedRow = response[index];
       compositeKeys.forEach(element => {
-        reqObj[element] = selectedRow[element]
+        reqObj[element] = selectedRow[element];
       });
     } else {
       reqObj[rowID] = value;
     }
-    getPConnect()
-      ?.getListActions?.()
-      ?.setSelectedRows([reqObj]);
+    getPConnect()?.getListActions?.()?.setSelectedRows([reqObj]);
     setSelectedValue(value);
   };
 
   const onCheckboxClick = event => {
     const value = event?.target?.value;
     const checked = event?.target?.checked;
-    const reqObj = {};
+    const reqObj: any = {};
     if (compositeKeys?.length > 1) {
       const index = response.findIndex(element => element[rowID] === value);
       const selectedRow = response[index];
       compositeKeys.forEach(element => {
-        reqObj[element] = selectedRow[element]
+        reqObj[element] = selectedRow[element];
       });
-      reqObj['$selected'] = checked;
+      reqObj.$selected = checked;
     } else {
       reqObj[rowID] = value;
-      reqObj['$selected'] = checked;
+      reqObj.$selected = checked;
     }
-    getPConnect()
-      ?.getListActions()
-      ?.setSelectedRows([reqObj]);
+    getPConnect()?.getListActions()?.setSelectedRows([reqObj]);
+  };
+
+  const processColumnValue = (column, value) => {
+    let val;
+    const type = column.type;
+    let theDateFormatInfo;
+    let theFormat;
+    let theCurrencyOptions;
+    switch (type) {
+      case 'Date':
+      case 'DateTime':
+        theDateFormatInfo = getDateFormatInfo();
+        theFormat = type === 'DateTime' ? `${theDateFormatInfo.dateFormatStringLong} hh:mm a` : theDateFormatInfo.dateFormatStringLong;
+        val = format(value, column.type, { format: theFormat });
+        break;
+
+      case 'Currency':
+        theCurrencyOptions = getCurrencyOptions(PCore?.getEnvironmentInfo()?.getLocale() as string);
+        val = format(value, column.type, theCurrencyOptions);
+        break;
+
+      default:
+        val = column.format && typeof value === 'number' ? column.format(value) : value;
+    }
+    return val;
   };
 
   return (
@@ -1004,43 +1000,35 @@ export default function ListView(props) {
               </Grid>
               <Grid item>
                 <TextField
-                  label={ PCore.getLocaleUtils().getLocaleValue('Search', 'Search') }
+                  label={PCore.getLocaleUtils().getLocaleValue('Search', 'Search')}
                   fullWidth
                   variant='outlined'
                   placeholder=''
                   size='small'
-                  id="search"
+                  id='search'
                   onChange={_onSearch}
                 />
               </Grid>
             </Grid>
           )}
           <>
-            {bInForm ? (
-              <TableContainer className={classes.tableInForm}>
+            {!bInForm ? (
+              <TableContainer id='list-view' className={classes.tableInForm}>
                 <Table stickyHeader aria-label='sticky table'>
                   <TableHead>
                     <TableRow>
                       {arColumns.map(column => {
                         return (
-                          <TableCell
-                            className={classes.cell}
-                            key={column.id}
-                            sortDirection={orderBy === column.id ? order : false}
-                          >
+                          <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
                             <TableSortLabel
                               active={orderBy === column.id}
                               direction={orderBy === column.id ? order : 'asc'}
                               onClick={createSortHandler(column.id)}
                             >
                               {column.label}
-                              {_showFilteredIcon(column.id) && (
-                                <FilterListIcon className={classes.filteredIcon} />
-                              )}
+                              {_showFilteredIcon(column.id) && <FilterListIcon className={classes.filteredIcon} />}
                               {orderBy === column.id ? (
-                                <span className={classes.visuallyHidden}>
-                                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                                </span>
+                                <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
                               ) : null}
                             </TableSortLabel>
                             <MoreIcon
@@ -1059,20 +1047,11 @@ export default function ListView(props) {
                       .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                       .map(row => {
                         return (
-                          <TableRow
-                            key={row.pxRefObjectInsName || row.pyID}
-                            onClick={() => {
-                              _rowClick(row);
-                            }}
-                          >
+                          <TableRow key={row.pxRefObjectInsName || row.pyID}>
                             {arColumns.map(column => {
                               const value = row[column.id];
                               return (
-                                <TableCell
-                                  key={column.id}
-                                  align={column.align}
-                                  className={classes.cell}
-                                >
+                                <TableCell key={column.id} align={column.align} className={classes.cell}>
                                   {_showButton(column.id, row) || column.displayAsLink ? (
                                     <Link
                                       component='button'
@@ -1080,16 +1059,10 @@ export default function ListView(props) {
                                         _listViewClick(row, column);
                                       }}
                                     >
-                                      {column.format && typeof value === 'number'
-                                        ? column.format(value)
-                                        : value}
+                                      {column.format && typeof value === 'number' ? column.format(value) : value}
                                     </Link>
                                   ) : (
-                                    <>
-                                      {column.format && typeof value === 'number'
-                                        ? column.format(value)
-                                        : value}
-                                    </>
+                                    <>{column.format && typeof value === 'number' ? column.format(value) : value}</>
                                   )}
                                 </TableCell>
                               );
@@ -1101,19 +1074,14 @@ export default function ListView(props) {
                 </Table>
               </TableContainer>
             ) : (
-              <TableContainer>
+              <TableContainer id='list-view'>
                 <Table>
                   <TableHead>
                     <TableRow>
-                      {(selectionMode === SELECTION_MODE.SINGLE ||
-                        selectionMode === SELECTION_MODE.MULTI) && <TableCell></TableCell>}
+                      {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && <TableCell />}
                       {arColumns.map(column => {
                         return (
-                          <TableCell
-                            className={classes.cell}
-                            key={column.id}
-                            sortDirection={orderBy === column.id ? order : false}
-                          >
+                          <TableCell className={classes.cell} key={column.id} sortDirection={orderBy === column.id ? order : false}>
                             <TableSortLabel
                               active={orderBy === column.id}
                               direction={orderBy === column.id ? order : 'asc'}
@@ -1121,9 +1089,7 @@ export default function ListView(props) {
                             >
                               {column.label}
                               {orderBy === column.id ? (
-                                <span className={classes.visuallyHidden}>
-                                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                                </span>
+                                <span className={classes.visuallyHidden}>{order === 'desc' ? 'sorted descending' : 'sorted ascending'}</span>
                               ) : null}
                             </TableSortLabel>
                           </TableCell>
@@ -1138,12 +1104,7 @@ export default function ListView(props) {
                         .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                         .map(row => {
                           return (
-                            <TableRow
-                              key={row[rowID]}
-                              onClick={() => {
-                                _rowClick(row);
-                              }}
-                            >
+                            <TableRow key={row[rowID]}>
                               {selectionMode === SELECTION_MODE.SINGLE && (
                                 <TableCell>
                                   <Radio
@@ -1152,28 +1113,23 @@ export default function ListView(props) {
                                     name='radio-buttons'
                                     inputProps={{ 'aria-label': 'A' }}
                                     checked={selectedValue === row[rowID]}
-                                  ></Radio>
+                                  />
                                 </TableCell>
                               )}
                               {selectionMode === SELECTION_MODE.MULTI && (
                                 <TableCell>
                                   <Checkbox
                                     onChange={onCheckboxClick}
+                                    checked={selectedValues.some(selectedValue => selectedValue[rowID] === row[rowID])}
                                     value={row[rowID]}
-                                  ></Checkbox>
+                                  />
                                 </TableCell>
                               )}
                               {arColumns.map(column => {
                                 const value = row[column.id];
                                 return (
-                                  <TableCell
-                                    className={classes.cell}
-                                    key={column.id}
-                                    align={column.align}
-                                  >
-                                    {column.format && typeof value === 'number'
-                                      ? column.format(value)
-                                      : value}
+                                  <TableCell className={classes.cell} key={column.id} align={column.align}>
+                                    {processColumnValue(column, value)}
                                   </TableCell>
                                 );
                               })}
@@ -1182,14 +1138,13 @@ export default function ListView(props) {
                         })}
                   </TableBody>
                 </Table>
-                {arRows && arRows.length === 0 && (
-                  <div className='no-records'>No records found.</div>
-                )}
+                {arRows && arRows.length === 0 && <div className='no-records'>No records found.</div>}
               </TableContainer>
             )}
           </>
           {arRows && arRows.length > 0 && (
             <TablePagination
+              id='pagination'
               rowsPerPageOptions={[10, 25, 100]}
               component='div'
               count={arRows.length}
@@ -1201,13 +1156,7 @@ export default function ListView(props) {
           )}
         </Paper>
       )}
-      <Menu
-        id='simple-menu'
-        anchorEl={anchorEl}
-        keepMounted
-        open={Boolean(anchorEl)}
-        onClose={_menuClose}
-      >
+      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={_menuClose}>
         <MenuItem onClick={_filterMenu}>
           <FilterListIcon /> Filter
         </MenuItem>
@@ -1263,11 +1212,7 @@ export default function ListView(props) {
             </>
           ) : (
             <>
-              <Select
-                fullWidth
-                onChange={_dialogContainsFilter}
-                value={displayDialogContainsFilter}
-              >
+              <Select fullWidth onChange={_dialogContainsFilter} value={displayDialogContainsFilter}>
                 <MenuItem value='contains'>Contains</MenuItem>
                 <MenuItem value='equals'>Equals</MenuItem>
                 <MenuItem value='startswith'>Starts with</MenuItem>
@@ -1308,10 +1253,3 @@ export default function ListView(props) {
     </>
   );
 }
-
-ListView.defaultProps = {
-};
-
-ListView.propTypes = {
-  getPConnect: PropTypes.func.isRequired
-};