@pega/dx-component-builder-sdk 25.1.15 → 25.1.17

package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/index.tsx.mustache

@@ -1,11 +1,21 @@
 import { useEffect, useRef, useState, useMemo, type MutableRefObject, type SetStateAction } from 'react';
-import { ComboBox, menuHelpers, debounce, throttle, Button, Icon, withConfiguration, type MenuGroupProps, type MenuItemProps } from '@pega/cosmos-react-core';
+import {
+  ComboBox,
+  menuHelpers,
+  debounce,
+  throttle,
+  Button,
+  Icon,
+  withConfiguration,
+  type MenuGroupProps,
+  type MenuItemProps
+} from '@pega/cosmos-react-core';
 import get from 'lodash.get';
 import type { PConnFieldProps } from './PConnProps';
 import './create-nonce';
 
 // includes in bundle
-import handleEvent from "./event-utils";
+import handleEvent from './event-utils';
 import { suggestionsHandler } from './suggestions-handler';
 
 import { formatExists, textFormatter } from './textformat-utils';
@@ -58,7 +68,6 @@ interface StateProps {
   hasSuggestions: boolean;
 }
 
-
 export const preProcessColumns = (columns: Array<any>) => {
   return columns.map(col => {
     const tempColObj = { ...col };
@@ -68,9 +77,7 @@ export const preProcessColumns = (columns: Array<any>) => {
 };
 
 export const getDisplayFieldsMetaData = (columns: Array<any>) => {
-  const visibleAndSecondaryColumns = columns.filter(
-    col => col.display === 'true' || col.secondary === 'true'
-  );
+  const visibleAndSecondaryColumns = columns.filter(col => col.display === 'true' || col.secondary === 'true');
   const metaDataObj = { key: '', primary: '', secondary: [], hidden: [] };
   const keyCol = columns.filter(col => col.key === 'true');
   metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
@@ -124,10 +131,7 @@ export const doSearch = (
     let columnsWithSetProperty: string | Array<any> = [];
     if (dataApiObj.columns) {
       columnsWithSetProperty = dataApiObj.columns
-        .filter(
-          (col: { setProperty: string }) =>
-            col.setProperty && col.setProperty !== 'Associated property'
-        )
+        .filter((col: { setProperty: string }) => col.setProperty && col.setProperty !== 'Associated property')
         .map((col: { value: any }) => {
           return col.value;
         });
@@ -159,33 +163,20 @@ export const doSearch = (
           };
         });
         hasMoreResults.current = true;
-        const {
-          fetchDisplayValue,
-          displayItem,
-          value,
-          AC_TYPE,
-          setSelected,
-          setFilterValue,
-          paginateHelperApis
-        } = extraProps as any;
+        const { fetchDisplayValue, displayItem, value, AC_TYPE, setSelected, setFilterValue, paginateHelperApis } = extraProps as any;
         if (dataApiObj.isQueryable === false) {
-          const progressivePaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(
-            searchedItems,
-            dataApiObj.matchPosition
-          );
+          const progressivePaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(searchedItems, dataApiObj.matchPosition);
           const updatedItems = menuHelpers.selectItem(searchedItems, value, AC_TYPE);
           const selectedItem = menuHelpers.getSelected(updatedItems)[0];
           let listIndex = -1;
-          const findSelectedItem = progressivePaginatedRecords.find(
-            (record: { id: string }, index: number) => {
-              // @ts-ignore
-              if (record.id === selectedItem?.id) {
-                listIndex = index;
-                return true;
-              }
-              return false;
+          const findSelectedItem = progressivePaginatedRecords.find((record: { id: string }, index: number) => {
+            // @ts-ignore
+            if (record.id === selectedItem?.id) {
+              listIndex = index;
+              return true;
             }
-          );
+            return false;
+          });
           if (!findSelectedItem && selectedItem) {
             progressivePaginatedRecords.unshift(selectedItem);
           } else if (selectedItem) {
@@ -223,9 +214,7 @@ export const doSearch = (
                         if (dataApiObj.isQueryable) {
                           secondaryFieldValues.push(entry[col]);
                         } else {
-                          secondaryFieldValues.push(
-                            get(entry, getFieldNameFromEmbeddedFieldName(col))
-                          );
+                          secondaryFieldValues.push(get(entry, getFieldNameFromEmbeddedFieldName(col)));
                         }
                       }
                     });
@@ -236,17 +225,13 @@ export const doSearch = (
                       secondaryFieldValues
                     };
                   });
-                  setItems(
-                    menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE)
-                  );
+                  setItems(menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE));
                   setSelected(searchedItem[0]);
                   setFilterValue('');
                 });
               } else if (displayItem) {
                 searchedItem = [displayItem];
-                setItems(
-                  menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE)
-                );
+                setItems(menuHelpers.selectItem([...searchedItem, ...searchedItems], value, AC_TYPE));
                 setSelected(searchedItem[0]);
                 setFilterValue('');
               }
@@ -274,13 +259,7 @@ export const doSearch = (
   }
 };
 
-export const setValuesToPropertyList = (
-  selectedItem: any,
-  assocProp: any,
-  item: any,
-  columns: Array<any>,
-  actions: any
-) => {
+export const setValuesToPropertyList = (selectedItem: any, assocProp: any, item: any, columns: Array<any>, actions: any) => {
   const setPropertyList = columns
     .filter(col => col.setProperty)
     .map(col => {
@@ -304,10 +283,7 @@ export const setValuesToPropertyList = (
       if (prop.target === 'Associated property') {
         handleEvent(actions, 'changeNblur', assocProp, valueToSet);
       } else {
-        actions.updateFieldValue(
-          `.${prop.target.startsWith('.') ? prop.target.substring(1) : prop.target}`,
-          item?.secondaryFieldValues[secIndex]
-        );
+        actions.updateFieldValue(`.${prop.target.startsWith('.') ? prop.target.substring(1) : prop.target}`, item?.secondaryFieldValues[secIndex]);
         actions.triggerFieldChange(
           `.${prop.target.startsWith('.') ? prop.target.substring(1) : prop.target}`,
           item?.secondaryFieldValues[secIndex],
@@ -349,13 +325,7 @@ export const setValueToAssocProp = (
       handleEvent(actions, 'changeNblur', assocProp, selectedItem?.id);
     }
   } else if (listType === 'datapage') {
-    retValue = setValuesToPropertyList(
-      selectedItem,
-      assocProp,
-      searchedEntry?.[0],
-      columns,
-      actions
-    );
+    retValue = setValuesToPropertyList(selectedItem, assocProp, searchedEntry?.[0], columns, actions);
   }
   return retValue;
 };
@@ -364,15 +334,11 @@ const DisplayComponent = (props: {{COMPONENT_CLASS_NAME}}PropsSubSet) => {
   const { selected, actualValue, isTableFormatter, formatter } = props;
 
   const displayCompValue = selected ? selected.primary : actualValue;
-  const formattedValue =
-    isTableFormatter && formatExists(formatter)
-      ? textFormatter(formatter, displayCompValue)
-      : displayCompValue;
+  const formattedValue = isTableFormatter && formatExists(formatter) ? textFormatter(formatter, displayCompValue) : displayCompValue;
 
-  return formattedValue || <span aria-hidden='true'>&ndash;&ndash;</span>;
+  return formattedValue || <span aria-hidden="true">&ndash;&ndash;</span>;
 };
 
-
 // Duplicated runtime code from Constellation Design System Component
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
@@ -489,15 +455,13 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
   let { readOnly = false, required = false, disabled = false } = props;
-  [readOnly, required, disabled] = [readOnly, required, disabled].map(
-    prop => prop === true || (typeof prop === 'string' && prop === 'true')
-  );
+  [readOnly, required, disabled] = [readOnly, required, disabled].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
 
   const AC_TYPE = 'single-select';
   const pConn = getPConnect();
   const contextName = getPConnect().getContextName();
   const actions = pConn.getActionsApi();
-  const [dataApiObj, setDataApiObj] = useState(() => ({} as any));
+  const [dataApiObj, setDataApiObj] = useState(() => ({}) as any);
   const [filterValue, setFilterValue] = useState('');
   const [loading, setLoading] = useState(listType !== 'associated');
   // const selected = useMemo(() => menuHelpers.getSelected(items)[0], [items]);
@@ -603,13 +567,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       });
       const updatedItems = menuHelpers.selectItem(associatedItems, value?.toString(), AC_TYPE);
       const selectedItem = menuHelpers.getSelected(updatedItems)[0];
-      const initialPaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(
-        associatedItems,
-        dataConfig.matchPosition
-      );
-      const findSelectedItem = initialPaginatedRecords.find(
-        (record: { id: string }) => record.id === selectedItem?.id
-      );
+      const initialPaginatedRecords = paginateHelperApis.getInitialPaginatedRecords(associatedItems, dataConfig.matchPosition);
+      const findSelectedItem = initialPaginatedRecords.find((record: { id: string }) => record.id === selectedItem?.id);
       if (!findSelectedItem && selectedItem) {
         initialPaginatedRecords.push(selectedItem);
       }
@@ -649,24 +608,16 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           setDataApiObj(dataObj);
           // To avoid calling doSearch if someone types/pastes value before the API call is made
           if (!filterValue)
-            doSearch(
-              '',
-              getDisplayFieldsMetaData(dataConfig.columns),
-              dataObj,
-              setItems as any,
-              setLoading,
-              hasMoreResults,
-              {
-                fetchDisplayValue: false,
-                value,
-                displayItem,
-                AC_TYPE,
-                setSelected,
-                setFilterValue,
-                paginateHelperApis,
-                pConn
-              }
-            );
+            doSearch('', getDisplayFieldsMetaData(dataConfig.columns), dataObj, setItems as any, setLoading, hasMoreResults, {
+              fetchDisplayValue: false,
+              value,
+              displayItem,
+              AC_TYPE,
+              setSelected,
+              setFilterValue,
+              paginateHelperApis,
+              pConn
+            });
         });
     }
   }, [value, primaryField, newRecordCreated]);
@@ -689,42 +640,26 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
                 secondaryFieldValues: []
               };
               setSelected(displayItem as any);
-              doSearch(
-                '',
-                getDisplayFieldsMetaData(dataConfig.columns),
-                dataObj,
-                setItems as any,
-                setLoading,
-                hasMoreResults,
-                {
-                  fetchDisplayValue: false,
-                  value,
-                  displayItem,
-                  AC_TYPE,
-                  setSelected,
-                  setFilterValue,
-                  paginateHelperApis,
-                  pConn
-                }
-              );
+              doSearch('', getDisplayFieldsMetaData(dataConfig.columns), dataObj, setItems as any, setLoading, hasMoreResults, {
+                fetchDisplayValue: false,
+                value,
+                displayItem,
+                AC_TYPE,
+                setSelected,
+                setFilterValue,
+                paginateHelperApis,
+                pConn
+              });
             } else {
-              doSearch(
-                '',
-                getDisplayFieldsMetaData(dataConfig.columns),
-                dataObj,
-                setItems as any,
-                setLoading,
-                hasMoreResults,
-                {
-                  fetchDisplayValue: true,
-                  value,
-                  AC_TYPE,
-                  setSelected,
-                  setFilterValue,
-                  paginateHelperApis,
-                  pConn
-                }
-              );
+              doSearch('', getDisplayFieldsMetaData(dataConfig.columns), dataObj, setItems as any, setLoading, hasMoreResults, {
+                fetchDisplayValue: true,
+                value,
+                AC_TYPE,
+                setSelected,
+                setFilterValue,
+                paginateHelperApis,
+                pConn
+              });
             }
           }
         });
@@ -780,10 +715,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               let columnsWithSetProperty: string | Array<any> = [];
               if (dataApiObj.columns) {
                 columnsWithSetProperty = dataApiObj.columns
-                  .filter(
-                    (col: { setProperty: string }) =>
-                      col.setProperty && col.setProperty !== 'Associated property'
-                  )
+                  .filter((col: { setProperty: string }) => col.setProperty && col.setProperty !== 'Associated property')
                   .map((col: { value: any }) => {
                     return col.value;
                   });
@@ -881,16 +813,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           hasMoreResults
         );
       }
-    } else if (
-      listType === 'associated' ||
-      (listType === 'datapage' && dataApiObj?.isQueryable === false)
-    ) {
+    } else if (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) {
       paginateHelperApis.resetIndexes();
-      const progressivePaginatedRecords = paginateHelperApis.fetchData(
-        inputValueRef.current,
-        false,
-        dataApiObj.columns
-      );
+      const progressivePaginatedRecords = paginateHelperApis.fetchData(inputValueRef.current, false, dataApiObj.columns);
       setItems(progressivePaginatedRecords);
     }
   };
@@ -900,14 +825,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     if (!ev?.id || ev?.id !== selected?.id) {
       const stateProps = pConn.getStateProps() as StateProps;
       const assocProp = stateProps.value;
-      const propValue = setValueToAssocProp(
-        assocProp,
-        selected || null,
-        listType,
-        items,
-        actions,
-        dataConfig.columns
-      );
+      const propValue = setValueToAssocProp(assocProp, selected || null, listType, items, actions, dataConfig.columns);
       if (onRecordChange) {
         onRecordChange(ev, propValue);
       }
@@ -926,10 +844,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           setLoading,
           hasMoreResults
         );
-      } else if (
-        listType === 'associated' ||
-        (listType === 'datapage' && dataApiObj?.isQueryable === false)
-      ) {
+      } else if (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) {
         paginateHelperApis.resetIndexes();
         const progressivePaginatedRecords = paginateHelperApis.fetchData('', false);
         setItems(progressivePaginatedRecords);
@@ -951,14 +866,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     setSelected(menuHelpers.getSelected(updatedItems)[0]);
     // const { id: itemId } = menuHelpers.getSelected(updatedItems)[0];
     const assocProp = pConn.getStateProps().value;
-    const propValue = setValueToAssocProp(
-      assocProp,
-      menuHelpers.getSelected(updatedItems)[0],
-      listType,
-      updatedItems,
-      actions,
-      dataConfig.columns
-    );
+    const propValue = setValueToAssocProp(assocProp, menuHelpers.getSelected(updatedItems)[0], listType, updatedItems, actions, dataConfig.columns);
     setFilterValue('');
     inputValueRef.current = '';
     if (onRecordChange) {
@@ -981,8 +889,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const loadMore = () => {
     if (
-      (listType === 'associated' ||
-        (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
+      (listType === 'associated' || (listType === 'datapage' && dataApiObj?.isQueryable === false)) &&
       paginateHelperApis.hasMoreResults(inputValueRef.current)
     ) {
       let progressivePaginatedRecords = paginateHelperApis.fetchData(inputValueRef.current, true);
@@ -1004,10 +911,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           let columnsWithSetProperty: string | Array<any> = [];
           if (dataApiObj.columns) {
             columnsWithSetProperty = dataApiObj.columns
-              .filter(
-                (col: { setProperty: string }) =>
-                  col.setProperty && col.setProperty !== 'Associated property'
-              )
+              .filter((col: { setProperty: string }) => col.setProperty && col.setProperty !== 'Associated property')
               .map((col: { value: any }) => {
                 return col.value;
               });
@@ -1044,9 +948,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   };
 
   const displayComponent = useMemo(() => {
-    return <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <DisplayComponent {...{ selected, actualValue, isTableFormatter, formatter }} />
-    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>;
+    return (
+      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+        <DisplayComponent {...{ selected, actualValue, isTableFormatter, formatter }} />
+      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    );
   }, [selected, actualValue, isTableFormatter, formatter]);
 
   if (displayMode) {
@@ -1071,17 +977,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
               // @ts-ignore
               setNewRecordCreated(newCaseId);
             } else {
-              updatePropertiesForNewRecord(
-                dataConfig,
-                contextName,
-                dataApiObj,
-                setDataApiObj,
-                displayFieldMeta,
-                pConn,
-                columns,
-                actions,
-                newCaseId
-              );
+              updatePropertiesForNewRecord(dataConfig, contextName, dataApiObj, setDataApiObj, displayFieldMeta, pConn, columns, actions, newCaseId);
             }
 
             PCore.getPubSubUtils().unsubscribe(CREATE_STAGE_DONE, contextClass);
@@ -1092,62 +988,60 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     });
   };
 
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <ComboBox
-      {...additionalProps}
-      testId={testId ?? label}
-      info={validatemessage || helperText}
-      status={status}
-      value={filterValue}
-      label={label}
-      labelHidden={hideLabel}
-      readOnly={readOnly}
-      required={required}
-      disabled={disabled}
-      placeholder={placeholder}
+      <ComboBox
+        {...additionalProps}
+        testId={testId ?? label}
+        info={validatemessage || helperText}
+        status={status}
+        value={filterValue}
+        label={label}
+        labelHidden={hideLabel}
+        readOnly={readOnly}
+        required={required}
+        disabled={disabled}
+        placeholder={placeholder}
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
-      selected={{
-        // @ts-ignore
-        items: selected ? { text: selected.primary, id: selected.id } : undefined
-      }}
-      onChange={onChangeHandler}
-      onBlur={onBlurHandler}
-      menu={{
-        // @ts-ignore
-        items: menuHelpers.mapTree(items, (item) => ({
-          // @ts-ignore
-          ...item,
+        selected={{
           // @ts-ignore
-          testId: item.id ?? undefined,
+          items: selected ? { text: selected.primary, id: selected.id } : undefined
+        }}
+        onChange={onChangeHandler}
+        onBlur={onBlurHandler}
+        menu={{
           // @ts-ignore
-          selected: item.items ? undefined : !!item.selected || item.id === selected?.id
-        })),
-        onItemClick: selectItem,
-        emptyText: pConn.getLocalizedValue('No items'),
-        loading,
-        loadMore,
-        footer: createNewRecord ? (
-          <Button
-            label={PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
-            onClick={createNewButtonHandler}
-            variant='link'
+          items: menuHelpers.mapTree(items, item => ({
+            // @ts-ignore
+            ...item,
             // @ts-ignore
-            compact='true'
-          >
-            <Icon name='plus' /> {PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
-          </Button>
-        ) : undefined
-      }}
+            testId: item.id ?? undefined,
+            // @ts-ignore
+            selected: item.items ? undefined : !!item.selected || item.id === selected?.id
+          })),
+          onItemClick: selectItem,
+          emptyText: pConn.getLocalizedValue('No items'),
+          loading,
+          loadMore,
+          footer: createNewRecord ? (
+            <Button
+              label={PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
+              onClick={createNewButtonHandler}
+              variant="link"
+              // @ts-ignore
+              compact="true"
+            >
+              <Icon name="plus" /> {PCore.getLocaleUtils().getLocaleValue('Create new', 'ComponentFields')}
+            </Button>
+          ) : undefined
+        }}
 <%={{ }}=%>     {{! revert delimiters for mustache }}
-      mode={AC_TYPE}
-      onResolveSuggestion={onResolveSuggestionHandler}
-    />
+        mode={AC_TYPE}
+        onResolveSuggestion={onResolveSuggestionHandler}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }
 
-
 export default withConfiguration({{COMPONENT_CLASS_NAME}});

package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/picklist-utils.ts.mustache

@@ -4,7 +4,7 @@
 export const flattenParameters = (parameters = {}) => {
   const flatParams = {};
   let requireFlattening = true;
-  Object.keys(parameters).forEach((key) => {
+  Object.keys(parameters).forEach(key => {
     if (typeof parameters[key] !== 'object') {
       requireFlattening = false;
     } else {
@@ -19,9 +19,9 @@ export const flattenParameters = (parameters = {}) => {
   return flatParams;
 };
 
-export const buildColumnForDisplayValue = (dataObj) => {
+export const buildColumnForDisplayValue = dataObj => {
   if (dataObj.columns) {
-    dataObj.columns = dataObj.columns.map((column) => {
+    dataObj.columns = dataObj.columns.map(column => {
       const tempColObj = { ...column };
       if (tempColObj.key === 'true') {
         tempColObj.useForSearch = true;
@@ -33,7 +33,7 @@ export const buildColumnForDisplayValue = (dataObj) => {
   }
 };
 
-export const extractFieldMetadata = (datasourceMetadata) => {
+export const extractFieldMetadata = datasourceMetadata => {
   const datasource = datasourceMetadata.datasource.name;
   const parameters = flattenParameters(datasourceMetadata.datasource.parameters);
   let displayProp = datasourceMetadata.datasource.propertyForDisplayText.startsWith('@P')
@@ -61,18 +61,18 @@ export const extractFieldMetadata = (datasourceMetadata) => {
   return { datasource, parameters, columns };
 };
 
-export const preProcessColumns = (columns) => {
-  return columns.map((col) => {
+export const preProcessColumns = columns => {
+  return columns.map(col => {
     const tempColObj = { ...col };
     tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
     return tempColObj;
   });
 };
 
-export const getDisplayFieldsMetaData = (columns) => {
-  const displayColumns = columns.filter((col) => col.display === 'true' || col.secondary === 'true');
+export const getDisplayFieldsMetaData = columns => {
+  const displayColumns = columns.filter(col => col.display === 'true' || col.secondary === 'true');
   const metaDataObj = { key: '', primary: '', secondary: [], hidden: [] };
-  const keyCol = columns.filter((col) => col.key === 'true');
+  const keyCol = columns.filter(col => col.key === 'true');
   metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
   for (let index = 0; index < displayColumns.length; index += 1) {
     if (displayColumns[index].primary === 'true') {