@pega/react-sdk-components 0.23.17 → 0.23.18

package/lib/components/template/ListView/DefaultViewMeta.js

@@ -0,0 +1,208 @@
+const LOCALIZATON_ANNOTATION = '@L ';
+const PROPERTY_ANNOTATION = '@P .';
+const USER_ANNOTATION = '@USER .';
+const ASSOCIATED_ANNOTATION = '@ASSOCIATED .';
+const ASSOCIATION_ANNOTATION = '@CA ';
+const getDefaultConfig = (fieldMeta, classID, show) => {
+    const { name, label, fieldID, fieldType, dataType, type, classID: fieldMetaClassID, displayAs, displayAsLink, category, associationClassID, associationID } = fieldMeta;
+    return {
+        value: (associationClassID ? ASSOCIATION_ANNOTATION : PROPERTY_ANNOTATION).concat(fieldID),
+        label: LOCALIZATON_ANNOTATION.concat(name || label),
+        fieldType,
+        propertyType: dataType || type,
+        classID: classID || fieldMetaClassID,
+        displayAs,
+        displayAsLink,
+        category,
+        show,
+        ...(associationClassID ? { associationLabel: LOCALIZATON_ANNOTATION.concat(category) } : {}),
+        associationID
+    };
+};
+export default function getDefaultViewMeta(fieldMeta, classID, showField) {
+    const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } = fieldMeta;
+    const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;
+    const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);
+    let viewMeta;
+    switch (mapperKey) {
+        case 'True-False:pxCheckbox':
+            viewMeta = {
+                type: 'Checkbox',
+                config: {
+                    ...defaultConfig,
+                    trueLabel: '@L Yes',
+                    falseLabel: '@L No',
+                    caption: LOCALIZATON_ANNOTATION.concat(name || label),
+                    label: undefined
+                }
+            };
+            break;
+        case 'Decimal:pxCurrency':
+            viewMeta = {
+                type: 'Currency',
+                config: defaultConfig
+            };
+            break;
+        case 'Date Time:pxDateTime':
+        case 'Date & time:pxDateTime':
+            viewMeta = {
+                type: 'DateTime',
+                config: defaultConfig
+            };
+            break;
+        case 'Date:pxDateTime':
+        case 'Date only:pxDateTime':
+            viewMeta = {
+                type: 'Date',
+                config: defaultConfig
+            };
+            break;
+        case 'Decimal:pxNumber':
+            viewMeta = {
+                type: 'Decimal',
+                config: defaultConfig
+            };
+            break;
+        case 'Text:pxEmail':
+            viewMeta = {
+                type: 'Email',
+                config: defaultConfig
+            };
+            break;
+        case 'Integer:pxInteger':
+            viewMeta = {
+                type: 'Integer',
+                config: defaultConfig
+            };
+            break;
+        case 'Decimal:pxPercentage':
+            viewMeta = {
+                type: 'Percentage',
+                config: defaultConfig
+            };
+            break;
+        case 'Text:pxPhone':
+            viewMeta = {
+                type: 'Phone',
+                config: {
+                    ...defaultConfig,
+                    datasource: {
+                        source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+                        fields: {
+                            value: '@P .pyCallingCode'
+                        }
+                    }
+                }
+            };
+            break;
+        case 'TimeOfDay:pxDateTime':
+            viewMeta = {
+                type: 'Time',
+                config: defaultConfig
+            };
+            break;
+        case 'Text:pxURL':
+        case 'Text:pxUrl':
+            viewMeta = {
+                type: 'URL',
+                config: defaultConfig
+            };
+            break;
+        case 'Text:pxTextArea':
+            viewMeta = {
+                type: 'TextArea',
+                config: defaultConfig
+            };
+            break;
+        case 'Text:pxRichTextEditor':
+            viewMeta = {
+                type: 'RichText',
+                config: defaultConfig
+            };
+            break;
+        case 'Text:pxAutoComplete':
+            if (isUserReference || fieldType === 'User reference') {
+                viewMeta = {
+                    type: 'UserReference',
+                    config: {
+                        ...defaultConfig,
+                        value: USER_ANNOTATION.concat(fieldID),
+                        placeholder: 'Select...',
+                        displayAs: 'Search box',
+                        associationID,
+                        associationLabel: undefined
+                    }
+                };
+            }
+            else {
+                const { tableType = '' } = datasource || {};
+                viewMeta = {
+                    type: 'AutoComplete',
+                    config: {
+                        ...defaultConfig,
+                        placeholder: 'Select...',
+                        listType: 'associated',
+                        datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+                        deferDatasource: tableType === 'DataPage'
+                    }
+                };
+            }
+            break;
+        case 'Text:pxDropdown':
+            if (isUserReference || fieldType === 'User reference') {
+                viewMeta = {
+                    type: 'UserReference',
+                    config: {
+                        ...defaultConfig,
+                        value: USER_ANNOTATION.concat(fieldID),
+                        placeholder: 'Select...',
+                        displayAs: 'Drop-down list',
+                        associationID,
+                        associationLabel: undefined
+                    }
+                };
+            }
+            else {
+                const { tableType = '' } = datasource || {};
+                viewMeta = {
+                    type: 'Dropdown',
+                    config: {
+                        ...defaultConfig,
+                        placeholder: 'Select...',
+                        listType: 'associated',
+                        datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+                        deferDatasource: tableType === 'DataPage'
+                    }
+                };
+            }
+            break;
+        case 'Text:pxRadioButtons':
+            {
+                const { tableType = '' } = datasource || {};
+                viewMeta = {
+                    type: 'RadioButtons',
+                    config: {
+                        ...defaultConfig,
+                        placeholder: 'Select...',
+                        listType: 'associated',
+                        datasource: ASSOCIATED_ANNOTATION.concat(fieldID),
+                        deferDatasource: tableType === 'DataPage'
+                    }
+                };
+            }
+            break;
+        case 'Text:pxTextInput':
+            viewMeta = {
+                type: 'TextInput',
+                config: defaultConfig
+            };
+            break;
+        default:
+            viewMeta = {
+                type,
+                config: defaultConfig
+            };
+    }
+    return viewMeta;
+}
+//# sourceMappingURL=DefaultViewMeta.js.map

package/lib/components/template/ListView/DefaultViewMeta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultViewMeta.js","sourceRoot":"","sources":["../../../../src/components/template/ListView/DefaultViewMeta.js"],"names":[],"mappings":"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","sourcesContent":["const LOCALIZATON_ANNOTATION = '@L ';\nconst PROPERTY_ANNOTATION = '@P .';\nconst USER_ANNOTATION = '@USER .';\nconst ASSOCIATED_ANNOTATION = '@ASSOCIATED .';\nconst ASSOCIATION_ANNOTATION = '@CA ';\n\nconst getDefaultConfig = (fieldMeta, classID, show) => {\n  const {\n    name,\n    label,\n    fieldID,\n    fieldType,\n    dataType,\n    type,\n    classID: fieldMetaClassID,\n    displayAs,\n    displayAsLink,\n    category,\n    associationClassID,\n    associationID\n  } = fieldMeta;\n  return {\n    value: (associationClassID ? ASSOCIATION_ANNOTATION : PROPERTY_ANNOTATION).concat(fieldID),\n    label: LOCALIZATON_ANNOTATION.concat(name || label),\n    fieldType,\n    propertyType: dataType || type,\n    classID: classID || fieldMetaClassID,\n    displayAs,\n    displayAsLink,\n    category,\n    show,\n    ...(associationClassID ? { associationLabel: LOCALIZATON_ANNOTATION.concat(category) } : {}),\n    associationID\n  };\n};\n\n\nexport default function getDefaultViewMeta(fieldMeta, classID, showField) {\n  const { type, name, displayAs, fieldID, isUserReference, associationID, datasource, label, fieldType } =\n    fieldMeta;\n  const mapperKey = type && displayAs ? type.concat(':').concat(displayAs) : type;\n  const defaultConfig = getDefaultConfig(fieldMeta, classID, showField);\n  let viewMeta;\n  switch (mapperKey) {\n    case 'True-False:pxCheckbox':\n      viewMeta = {\n        type: 'Checkbox',\n        config: {\n          ...defaultConfig,\n          trueLabel: '@L Yes',\n          falseLabel: '@L No',\n          caption: LOCALIZATON_ANNOTATION.concat(name || label),\n          label: undefined\n        }\n      };\n      break;\n    case 'Decimal:pxCurrency':\n      viewMeta = {\n        type: 'Currency',\n        config: defaultConfig\n      };\n      break;\n    case 'Date Time:pxDateTime':\n    case 'Date & time:pxDateTime':\n      viewMeta = {\n        type: 'DateTime',\n        config: defaultConfig\n      };\n      break;\n    case 'Date:pxDateTime':\n    case 'Date only:pxDateTime':\n      viewMeta = {\n        type: 'Date',\n        config: defaultConfig\n      };\n      break;\n    case 'Decimal:pxNumber':\n      viewMeta = {\n        type: 'Decimal',\n        config: defaultConfig\n      };\n      break;\n    case 'Text:pxEmail':\n      viewMeta = {\n        type: 'Email',\n        config: defaultConfig\n      };\n      break;\n    case 'Integer:pxInteger':\n      viewMeta = {\n        type: 'Integer',\n        config: defaultConfig\n      };\n      break;\n    case 'Decimal:pxPercentage':\n      viewMeta = {\n        type: 'Percentage',\n        config: defaultConfig\n      };\n      break;\n    case 'Text:pxPhone':\n      viewMeta = {\n        type: 'Phone',\n        config: {\n          ...defaultConfig,\n          datasource: {\n            source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',\n            fields: {\n              value: '@P .pyCallingCode'\n            }\n          }\n        }\n      };\n      break;\n    case 'TimeOfDay:pxDateTime':\n      viewMeta = {\n        type: 'Time',\n        config: defaultConfig\n      };\n      break;\n    case 'Text:pxURL':\n    case 'Text:pxUrl':\n      viewMeta = {\n        type: 'URL',\n        config: defaultConfig\n      };\n      break;\n    case 'Text:pxTextArea':\n      viewMeta = {\n        type: 'TextArea',\n        config: defaultConfig\n      };\n      break;\n    case 'Text:pxRichTextEditor':\n      viewMeta = {\n        type: 'RichText',\n        config: defaultConfig\n      };\n      break;\n    case 'Text:pxAutoComplete':\n      if (isUserReference || fieldType === 'User reference') {\n        viewMeta = {\n          type: 'UserReference',\n          config: {\n            ...defaultConfig,\n            value: USER_ANNOTATION.concat(fieldID),\n            placeholder: 'Select...',\n            displayAs: 'Search box',\n            associationID,\n            associationLabel: undefined\n          }\n        };\n      } else {\n        const { tableType = '' } = datasource || {};\n        viewMeta = {\n          type: 'AutoComplete',\n          config: {\n            ...defaultConfig,\n            placeholder: 'Select...',\n            listType: 'associated',\n            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),\n            deferDatasource: tableType === 'DataPage'\n          }\n        };\n      }\n      break;\n    case 'Text:pxDropdown':\n      if (isUserReference || fieldType === 'User reference') {\n        viewMeta = {\n          type: 'UserReference',\n          config: {\n            ...defaultConfig,\n            value: USER_ANNOTATION.concat(fieldID),\n            placeholder: 'Select...',\n            displayAs: 'Drop-down list',\n            associationID,\n            associationLabel: undefined\n          }\n        };\n      } else {\n        const { tableType = '' } = datasource || {};\n        viewMeta = {\n          type: 'Dropdown',\n          config: {\n            ...defaultConfig,\n            placeholder: 'Select...',\n            listType: 'associated',\n            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),\n            deferDatasource: tableType === 'DataPage'\n          }\n        };\n      }\n      break;\n    case 'Text:pxRadioButtons':\n      {\n        const { tableType = '' } = datasource || {};\n        viewMeta = {\n          type: 'RadioButtons',\n          config: {\n            ...defaultConfig,\n            placeholder: 'Select...',\n            listType: 'associated',\n            datasource: ASSOCIATED_ANNOTATION.concat(fieldID),\n            deferDatasource: tableType === 'DataPage'\n          }\n        };\n      }\n      break;\n    case 'Text:pxTextInput':\n      viewMeta = {\n        type: 'TextInput',\n        config: defaultConfig\n      };\n      break;\n    default:\n      viewMeta = {\n        type,\n        config: defaultConfig\n      };\n  }\n  return viewMeta;\n}\n"]}

package/lib/components/template/ListView/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/components/template/ListView/ListView.tsx"],"names":[],"mappings":";AAIA,OAAO,SAAS,MAAM,YAAY,CAAC;AAkCnC,OAAO,gBAAgB,CAAC;AAqBxB,iBAAwB,QAAQ,CAAC,KAAK,KAAA,eAiqCrC;kBAjqCuB,QAAQ;;;;;;eAAR,QAAQ"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/components/template/ListView/ListView.tsx"],"names":[],"mappings":";AAMA,OAAO,SAAS,MAAM,YAAY,CAAC;AAkCnC,OAAO,gBAAgB,CAAC;AAsBxB,iBAAwB,QAAQ,CAAC,KAAK,KAAA,eAswCrC;kBAtwCuB,QAAQ;;;;;;eAAR,QAAQ"}

package/lib/components/template/ListView/ListView.js

@@ -1,6 +1,8 @@
 /* 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 } from '@material-ui/core/styles';
@@ -37,6 +39,7 @@ import { Radio } from '@material-ui/core';
 import Checkbox from '@material-ui/core/Checkbox';
 import { filterData } from '../../helpers/simpleTableHelpers';
 import './ListView.css';
+import useInit from './hooks';
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 let myRows;
 let myDisplayColumnList;
@@ -51,7 +54,15 @@ let sortColumnId;
 const filterByColumns = [];
 export default function ListView(props) {
     const { getPConnect, bInForm } = props;
-    const { globalSearch, presets, referenceList, rowClickAction, selectionMode, referenceType, payload, parameters, compositeKeys } = props;
+    const { globalSearch, referenceList, rowClickAction, selectionMode, referenceType, payload, parameters, compositeKeys, showDynamicFields, presets } = props;
+    const ref = useRef({}).current;
+    const cosmosTableRef = useRef();
+    // List component context
+    const [listContext, setListContext] = useState({});
+    const { meta } = listContext;
+    const xRayApis = PCore.getDebugger().getXRayRuntime();
+    const xRayUid = xRayApis.startXRay();
+    useInit({ ...props, setListContext, ref, showDynamicFields, xRayUid, cosmosTableRef });
     const thePConn = getPConnect();
     const componentConfig = thePConn.getComponentConfig();
     const resolvedConfigProps = thePConn.getConfigProps();
@@ -154,7 +165,6 @@ export default function ListView(props) {
     function stableSort(array, comparator) {
         const stabilizedThis = array.map((el, index) => [el, index]);
         stabilizedThis.sort((a, b) => {
-            // eslint-disable-next-line @typescript-eslint/no-shadow, no-shadow
             const order = comparator(a[0], b[0]);
             if (order !== 0)
                 return order;
@@ -181,15 +191,19 @@ export default function ListView(props) {
     //   });
     //   return arReturn;
     // }
-    function getHeaderCells(colFields, fields) {
-        const arReturn = colFields.map((field, colIndex) => {
+    const AssignDashObjects = ['Assign-Worklist', 'Assign-WorkBasket'];
+    function getHeaderCells(colFields, fields, presetFields) {
+        const arReturn = colFields.map((field, index) => {
             let theField = field.config.value.substring(field.config.value.indexOf(' ') + 1);
             if (theField.indexOf('.') === 0) {
                 theField = theField.substring(1);
             }
+            const colIndex = fields.findIndex(ele => ele.name === theField);
+            const displayAsLink = field.config.displayAsLink;
             const headerRow = {};
             headerRow.id = theField;
             headerRow.type = field.type;
+            headerRow.displayAsLink = displayAsLink;
             headerRow.numeric =
                 field.type === 'Decimal' ||
                     field.type === 'Integer' ||
@@ -197,19 +211,28 @@ export default function ListView(props) {
                     field.type === 'Currency' ||
                     false;
             headerRow.disablePadding = false;
-            headerRow.label = fields[colIndex].config.label;
+            headerRow.label = presetFields[index].config.label;
+            if (colIndex > -1) {
+                headerRow.classID = fields[colIndex].classID;
+            }
+            if (displayAsLink) {
+                headerRow.isAssignmentLink = AssignDashObjects.includes(headerRow.classID);
+                if (field.config.value?.startsWith('@CA')) {
+                    headerRow.isAssociation = true;
+                }
+            }
             return headerRow;
         });
         return arReturn;
     }
     function updateFields(arFields, theColumns) {
-        const arReturn = arFields;
-        arFields.forEach((field, index) => {
+        const arReturn = arFields.filter(ele => ele.type !== 'reference');
+        arReturn.forEach((field, index) => {
             arReturn[index].config.name = theColumns[index].id;
         });
         return arReturn;
     }
-    function getUsingData(arTableData, theColumns) {
+    function getUsingData(arTableData) {
         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)) {
@@ -218,21 +241,7 @@ export default function ListView(props) {
             }
         }
         const arReturn = arTableData?.map((data) => {
-            const row = {};
-            theColumns.forEach(col => {
-                row[col.id] = data[col.id];
-            });
-            row[rowID] = data[rowID];
-            // for (const field of theColumns) {
-            //   row[field.id] = data[field.id];
-            // }
-            // add in pxRefObjectClass and pzInsKey
-            if (data['pxRefObjectClass']) {
-                row['pxRefObjectClass'] = data['pxRefObjectClass'];
-            }
-            if (data['pzInsKey']) {
-                row['pzInsKey'] = data['pzInsKey'];
-            }
+            const row = data;
             return row;
         });
         return arReturn;
@@ -396,19 +405,86 @@ export default function ListView(props) {
             }, `dashboard-component-${'id'}`, false, getPConnect().getContextName());
         }, 0);
     }, []);
-    function fetchAllData() {
+    function fetchAllData(fields) {
+        let query = null;
+        if (payload) {
+            query = payload.query;
+        }
+        else if (fields?.length && meta.isQueryable) {
+            query = { select: fields };
+        }
+        else if (dashboardFilterPayload) {
+            query = dashboardFilterPayload.query;
+        }
         const context = getPConnect().getContextName();
-        return PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, payload ? payload.query : dashboardFilterPayload && dashboardFilterPayload.query);
-    }
+        return PCore.getDataPageUtils().getDataAsync(referenceList, context, payload ? payload.dataViewParameters : dataViewParameters, null, query);
+    }
+    const buildSelect = (fieldDefs, colId, patchQueryFields = [], compositeKeys = []) => {
+        const listFields = [];
+        if (colId) {
+            const field = getField(fieldDefs, colId);
+            listFields.push({
+                field: field.name
+            });
+        }
+        else {
+            // NOTE: If we ever decide to not set up all the `fieldDefs` on select, ensure that the fields corresponding to `state.groups` are set up. Needed in Client-mode grouping/pagination.
+            fieldDefs.forEach(field => {
+                if (!listFields.find(f => f.field === field.name)) {
+                    listFields.push({
+                        field: field.name
+                    });
+                }
+            });
+            patchQueryFields.forEach(k => {
+                if (!listFields.find(f => f.field === k)) {
+                    listFields.push({
+                        field: k
+                    });
+                }
+            });
+        }
+        compositeKeys.forEach(k => {
+            if (!listFields.find(f => f.field === k)) {
+                listFields.push({
+                    field: k
+                });
+            }
+        });
+        return listFields;
+    };
+    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
+                }];
+        }
+        return select;
+    };
+    const getField = (fieldDefs, columnId) => {
+        const fieldsMap = getFieldsMap(fieldDefs);
+        return fieldsMap.get(columnId);
+    };
+    const getFieldsMap = fieldDefs => {
+        const fieldsMap = new Map();
+        fieldDefs.forEach(element => {
+            fieldsMap.set(element.id, element);
+        });
+        return fieldsMap;
+    };
     async function fetchDataFromServer() {
         let bCallSetRowsColumns = true;
-        const workListJSON = await fetchAllData();
+        const { fieldDefs, itemKey, patchQueryFields } = meta;
+        let listFields = fieldDefs ? buildSelect(fieldDefs, undefined, patchQueryFields, compositeKeys) : [];
+        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 myColumns = getHeaderCells(columnFields, fields);
+        const myColumns = getHeaderCells(columnFields, fieldDefs, fields);
         const selectParams = [];
         myColumns.forEach(column => {
             selectParams.push({
@@ -422,7 +498,7 @@ export default function ListView(props) {
         columnList = colList;
         fields = updateFields(fields, myColumns);
         setResponse(tableDataResults);
-        const usingDataResults = getUsingData(tableDataResults, myColumns);
+        const usingDataResults = getUsingData(tableDataResults);
         // store globally, so can be searched, filtered, etc.
         myRows = updateData(usingDataResults, fields);
         myDisplayColumnList = getMyColumnList(myColumns);
@@ -443,8 +519,10 @@ export default function ListView(props) {
         };
     }
     useEffect(() => {
-        fetchDataFromServer();
-    }, []);
+        if (listContext.meta) {
+            fetchDataFromServer();
+        }
+    }, [listContext]);
     function searchFilter(value, rows) {
         function filterArray(el) {
             const bReturn = false;
@@ -504,7 +582,8 @@ export default function ListView(props) {
         }
     }
     function openWork(row) {
-        const { pxRefObjectClass, pxRefObjectKey } = row;
+        const { pxRefObjectKey } = row;
+        const pxRefObjectClass = row.pxRefObjectClass || row.pxObjClass;
         if (pxRefObjectClass !== '' && pxRefObjectKey !== '') {
             thePConn.getActionsApi().openWorkByHandle(pxRefObjectKey, pxRefObjectClass);
         }
@@ -691,16 +770,35 @@ export default function ListView(props) {
         }
         return bReturn;
     }
-    function _listViewClick(name, row) {
-        switch (name) {
-            case 'pxTaskLabel':
-                openAssignment(row);
-                break;
-            case 'pxRefObjectInsName':
-                openWork(row);
-                break;
-            default:
-                break;
+    function _listViewClick(row, column) {
+        const name = column.id;
+        if (column.displayAsLink) {
+            const { pxObjClass } = row;
+            let { pzInsKey } = row;
+            if (column.isAssociation) {
+                const associationCategory = name.split(':')[0];
+                pzInsKey = row[`${associationCategory}:pzInsKey`];
+            }
+            if (column.isAssignmentLink) {
+                thePConn.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
+                    containerName: 'primary'
+                });
+            }
+            else {
+                thePConn.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
+            }
+        }
+        else {
+            switch (name) {
+                case 'pxTaskLabel':
+                    openAssignment(row);
+                    break;
+                case 'pxRefObjectInsName':
+                    openWork(row);
+                    break;
+                default:
+                    break;
+            }
         }
     }
     function _listTitle() {
@@ -764,7 +862,7 @@ export default function ListView(props) {
                 React.createElement(Grid, { item: true },
                     React.createElement(SearchIcon, null)),
                 React.createElement(Grid, { item: true },
-                    React.createElement(TextField, { label: 'Search', fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', onChange: _onSearch })))),
+                    React.createElement(TextField, { label: 'Search', fullWidth: true, variant: 'outlined', placeholder: '', size: 'small', id: "search", onChange: _onSearch })))),
             React.createElement(React.Fragment, null, bInForm ? (React.createElement(TableContainer, { className: classes.tableInForm },
                 React.createElement(Table, { stickyHeader: true, "aria-label": 'sticky table' },
                     React.createElement(TableHead, null,
@@ -785,8 +883,8 @@ export default function ListView(props) {
                                 _rowClick(row);
                             } }, arColumns.map(column => {
                             const value = row[column.id];
-                            return (React.createElement(TableCell, { key: column.id, align: column.align, className: classes.cell }, _showButton(column.id, row) ? (React.createElement(Link, { component: 'button', onClick: () => {
-                                    _listViewClick(column.id, row);
+                            return (React.createElement(TableCell, { key: column.id, align: column.align, className: classes.cell }, _showButton(column.id, row) || column.displayAsLink ? (React.createElement(Link, { component: 'button', onClick: () => {
+                                    _listViewClick(row, column);
                                 } }, column.format && typeof value === 'number'
                                 ? column.format(value)
                                 : value)) : (React.createElement(React.Fragment, null, column.format && typeof value === 'number'