@pega/custom-dx-components 0.24.14 → 0.24.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/custom-dx-components",
-  "version": "0.24.14",
+  "version": "0.24.15",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -38,6 +38,11 @@ const statelistData = {
 
 window.PCore.getDataPageUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(statelistData);

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache

@@ -65,8 +65,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { value, displayMode, countryCode = 'USA', getPConnect, testId } = props;
   const [statelist, setStatelist] = useState([]);
   const [showTable, setShowTable] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [validUrl, setValidUrl] = useState('about:blank');
   const PConnect = getPConnect();
+  const dataViewName = 'D_pyStateList';
+  const context = PConnect.getContextName();
 
   // IMPORTANT: need to register icons used in camel case
   registerIcon(listNumber, arrowRight, globe);
@@ -111,8 +114,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'D_pyStateList';
-    const context = PConnect.getContextName();
     const params = { pyCountry: countryCode };
 
     // only retrieve table data if table is shown
@@ -121,25 +122,33 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {
+          setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error
-          setStatelist(
-            response.data.map((entry: any, index: number) => {
-              // mapping the data into the column names
-              // MUST have an id/index or will get a setExtraStackFrame error
-              // put a key in the table
-              return {
-                stateName: entry.pyLabel,
-                stateCode: entry.pyStateCode,
-                id: index
-              };
-            })
-          );
+          if (response.data !== null) {
+            setStatelist(
+              response.data.map((entry: any, index: number) => {
+                // mapping the data into the column names
+                // MUST have an id/index or will get a setExtraStackFrame error
+                // put a key in the table
+                return {
+                  stateName: entry.pyLabel,
+                  stateCode: entry.pyStateCode,
+                  id: index
+                };
+              })
+            );
+          } else {
+            setStatelist([]);
+            setIsLoading(false);
+          }
         })
         .catch((error: any) => {
+          setStatelist([]);
+          setIsLoading(false);
           console.log(error);
         });
     }
-  }, [PConnect, countryCode, showTable]);
+  }, [context, countryCode, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -196,6 +205,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           title={PConnect.getLocalizedValue('State list', '', '')}
           columns={columns}
           data={statelist}
+          loading={isLoading}
+          loadingMessage={PConnect.getLocalizedValue('Loading state list', '', '')}
         />
       )}
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/Constellation/Template/DETAILS/demo.stories.tsx.mustache

@@ -24,6 +24,7 @@ const Region = props => {
   return <></>;
 };
 
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,

package/src/tasks/create/templates/Constellation/Template/DETAILS/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',
@@ -18,6 +17,7 @@ export const pyReviewRaw = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -28,6 +28,7 @@ export const pyReviewRaw = {
           value: '@P .pyID',
           label: '@L Case ID',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
       },
@@ -37,6 +38,7 @@ export const pyReviewRaw = {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
       },
@@ -47,6 +49,7 @@ export const pyReviewRaw = {
           hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateOperator'
         }
       }
@@ -66,6 +69,7 @@ export const pyReviewRaw = {
     {
       name: 'A',
       type: 'Region',
+      key: 'A',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
@@ -78,17 +82,17 @@ export const pyReviewRaw = {
           type: 'DateTime',
           config: {
             value: '@P .pySLADeadline',
-            label: '@L SLA Deadline'
-          },
-          key: '1'
+            label: '@L SLA Deadline',
+            key: 'pySLADeadline'
+          }
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
-            label: '@L SLA Goal'
-          },
-          key: '2'
+            label: '@L SLA Goal',
+            key: 'pySLAGoal'
+          }
         },
         {
           type: 'RadioButtons',
@@ -96,9 +100,9 @@ export const pyReviewRaw = {
             value: '@P .pySLAStartTime',
             label: '@L SLA Start Time',
             listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime'
-          },
-          key: '3'
+            datasource: '@ASSOCIATED .pySLAStartTime',
+            key: 'pySLAStartTime'
+          }
         }
       ]
     }

package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache

@@ -22,30 +22,37 @@ if (!window.PCore) {
 }
 
 const worklistData = {
-  data: [
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-8002',
-      pyAssignmentStatus: 'New',
-      pxTaskLabel: 'Details'
-    },
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-7001',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Info'
-    },
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-9000',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Amount'
-    }
-  ]
+  data: {
+    data: [
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-8002',
+        pyAssignmentStatus: 'New',
+        pxTaskLabel: 'Details'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-7001',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Info'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-9000',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Amount'
+      }
+    ]
+  }
 };
 
-window.PCore.getDataPageUtils = () => {
+window.PCore.getDataApiUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(worklistData);
@@ -59,7 +66,7 @@ window.PCore.getDataPageUtils = () => {
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
-    image: configProps.image,
+    ...configProps,
     getPConnect: () => {
       return {
         getValue: value => {

package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache

@@ -21,7 +21,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
   const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   const PConnect = getPConnect();
+  const dataViewName = 'D_pyMyWorkList';
+  const context = PConnect.getContextName();
+
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -44,33 +48,41 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'D_pyMyWorkList';
-    const context = PConnect.getContextName();
 
-    PCore.getDataPageUtils()
-      .getDataAsync(dataViewName, context, {}, null, null)
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {
-        // table requires an index or will get setExtraStackFrame error
-        setWorklist(
-          response.data.map((entry: any, index: number) => {
-            // mapping the data into the column names
-            // MUST have an id/index or will get a setExtraStackFrame error
-            // put a key in the table
-            return {
-              caseType: entry.pxProcessName,
-              insKey: entry.pxRefObjectInsName,
-              status: entry.pyAssignmentStatus,
-              stage: entry.pxTaskLabel,
-              id: index
-            };
-          })
-        );
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.pxProcessName,
+                insKey: entry.pxRefObjectInsName,
+                status: entry.pyAssignmentStatus,
+                stage: entry.pxTaskLabel,
+                id: index
+              };
+            })
+          );
+        }
+        else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+
       })
       .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
         console.log(error);
       });
-  }, [PConnect]);
+  }, [context]);
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -86,6 +98,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}
       data={worklist}
+      loading={isLoading}
+      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -38,6 +38,11 @@ const countrylistData = {
 
 window.PCore.getDataPageUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(countrylistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(countrylistData);

package/src/tasks/create/templates/Launchpad/Field/Icon-Button-URL/index.tsx.mustache

@@ -60,10 +60,13 @@ export const textFormatter = (value: string) => {
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { value, displayMode, getPConnect, testId } = props;
-  const [statelist, setStatelist] = useState([]);
+  const [countrylist, setCountrylist] = useState([]);
   const [showTable, setShowTable] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [validUrl, setValidUrl] = useState('about:blank');
   const PConnect = getPConnect();
+  const dataViewName = 'CountryList';
+  const context = PConnect.getContextName();
 
   // IMPORTANT: need to register icons used in camel case
   registerIcon(listNumber, arrowRight, globe);
@@ -108,8 +111,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'CountryList';
-    const context = PConnect.getContextName();
     const params = { };
 
     // only retrieve table data if table is shown
@@ -118,25 +119,35 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {
+          setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error
-          setStatelist(
-            response.data.map((entry: any, index: number) => {
-              // mapping the data into the column names
-              // MUST have an id/index or will get a setExtraStackFrame error
-              // put a key in the table
-              return {
-                countryName: entry.Name,
-                shortName: entry.ShortName,
-                id: index
-              };
-            })
-          );
+          if (response.data !== null) {
+            setCountrylist(
+              response.data.map((entry: any, index: number) => {
+                // mapping the data into the column names
+                // MUST have an id/index or will get a setExtraStackFrame error
+                // put a key in the table
+                return {
+                  countryName: entry.Name,
+                  shortName: entry.ShortName,
+                  id: index
+                };
+              })
+            );
+          }
+          else {
+            setCountrylist([]);
+            setIsLoading(false);
+          }
+
         })
         .catch((error: any) => {
+          setCountrylist([]);
+          setIsLoading(false);
           console.log(error);
         });
     }
-  }, [PConnect, showTable]);
+  }, [context, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -191,7 +202,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         <Table
           title={PConnect.getLocalizedValue('State list', '', '')}
           columns={columns}
-          data={statelist}
+          data={countrylist}
+          loading={isLoading}
+          loadingMessage={PConnect.getLocalizedValue('Loading country list', '', '')}
         />
       )}
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/Launchpad/Widget/PAGE/demo.stories.tsx.mustache

@@ -22,30 +22,38 @@ if (!window.PCore) {
 }
 
 const worklistData = {
-  data: [
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-8002',
-      ProcessName: 'New',
-      TaskName: 'Details'
-    },
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-7001',
-      ProcessName: 'Open',
-      TaskName: 'Info'
-    },
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-9000',
-      ProcessName: 'Open',
-      TaskName: 'Amount'
-    }
-  ]
+  data: {
+    data: [
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-8002',
+        ProcessName: 'New',
+        TaskName: 'Details'
+      },
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-7001',
+        ProcessName: 'Open',
+        TaskName: 'Info'
+      },
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-9000',
+        ProcessName: 'Open',
+        TaskName: 'Amount'
+      }
+    ]
+  }
+
 };
 
-window.PCore.getDataPageUtils = () => {
+window.PCore.getDataApiUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(worklistData);
@@ -59,7 +67,7 @@ window.PCore.getDataPageUtils = () => {
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
-    image: configProps.image,
+    ...configProps,
     getPConnect: () => {
       return {
         getValue: value => {

package/src/tasks/create/templates/Launchpad/Widget/PAGE/index.tsx.mustache

@@ -21,7 +21,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
   const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   const PConnect = getPConnect();
+  const dataViewName = 'MyWorkList';
+  const context = PConnect.getContextName();
+
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -44,33 +48,41 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'MyWorkList';
-    const context = PConnect.getContextName();
 
-    PCore.getDataPageUtils()
-      .getDataAsync(dataViewName, context, {}, null, null)
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {
-        // table requires an index or will get setExtraStackFrame error
-        setWorklist(
-          response.data.map((entry: any, index: number) => {
-            // mapping the data into the column names
-            // MUST have an id/index or will get a setExtraStackFrame error
-            // put a key in the table
-            return {
-              caseType: entry.CaseName,
-              insKey: entry.BusinessID,
-              status: entry.ProcessName,
-              stage: entry.TaskName,
-              id: index
-            };
-          })
-        );
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.CaseName,
+                insKey: entry.BusinessID,
+                status: entry.ProcessName,
+                stage: entry.TaskName,
+                id: index
+              };
+            })
+          );
+        }
+        else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+
       })
       .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
         console.log(error);
       });
-  }, [PConnect]);
+  }, [context]);
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -86,6 +98,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}
       data={worklist}
+      loading={isLoading}
+      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
     />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/init/template/package.json.mustache

@@ -69,7 +69,7 @@
   },
   "devDependencies": {
     "@pega/configs": "^0.6.0",
-    "@pega/custom-dx-components": "0.24.14",
+    "@pega/custom-dx-components": "0.24.15",
     "@pega/pcore-pconnect-typedefs": "~3.0.0",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -24,6 +24,7 @@ const Region = props => {
   return <></>;
 };
 
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/mock.ts

@@ -1,5 +1,4 @@
 
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',
@@ -18,6 +17,7 @@ export const pyReviewRaw = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -28,6 +28,7 @@ export const pyReviewRaw = {
           value: '@P .pyID',
           label: '@L Case ID',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
       },
@@ -37,6 +38,7 @@ export const pyReviewRaw = {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
       },
@@ -47,6 +49,7 @@ export const pyReviewRaw = {
           hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateOperator'
         }
       }
@@ -66,6 +69,7 @@ export const pyReviewRaw = {
     {
       name: 'A',
       type: 'Region',
+      key: 'A',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
@@ -78,17 +82,17 @@ export const pyReviewRaw = {
           type: 'DateTime',
           config: {
             value: '@P .pySLADeadline',
-            label: '@L SLA Deadline'
-          },
-          key: '1'
+            label: '@L SLA Deadline',
+            key: 'pySLADeadline'
+          }
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
-            label: '@L SLA Goal'
-          },
-          key: '2'
+            label: '@L SLA Goal',
+            key: 'pySLAGoal'
+          }
         },
         {
           type: 'RadioButtons',
@@ -96,9 +100,9 @@ export const pyReviewRaw = {
             value: '@P .pySLAStartTime',
             label: '@L SLA Start Time',
             listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime'
-          },
-          key: '3'
+            datasource: '@ASSOCIATED .pySLAStartTime',
+            key: 'pySLAStartTime'
+          }
         }
       ]
     }

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyIconButtonURL/demo.stories.tsx

@@ -38,6 +38,11 @@ const statelistData = {
 
 window.PCore.getDataPageUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(statelistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(statelistData);

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -65,8 +65,11 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
   const { value, displayMode, countryCode = 'USA', getPConnect, testId } = props;
   const [statelist, setStatelist] = useState([]);
   const [showTable, setShowTable] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [validUrl, setValidUrl] = useState('about:blank');
   const PConnect = getPConnect();
+  const dataViewName = 'D_pyStateList';
+  const context = PConnect.getContextName();
 
   // IMPORTANT: need to register icons used in camel case
   registerIcon(listNumber, arrowRight, globe);
@@ -111,8 +114,6 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'D_pyStateList';
-    const context = PConnect.getContextName();
     const params = { pyCountry: countryCode };
 
     // only retrieve table data if table is shown
@@ -121,25 +122,33 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {
+          setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error
-          setStatelist(
-            response.data.map((entry: any, index: number) => {
-              // mapping the data into the column names
-              // MUST have an id/index or will get a setExtraStackFrame error
-              // put a key in the table
-              return {
-                stateName: entry.pyLabel,
-                stateCode: entry.pyStateCode,
-                id: index
-              };
-            })
-          );
+          if (response.data !== null) {
+            setStatelist(
+              response.data.map((entry: any, index: number) => {
+                // mapping the data into the column names
+                // MUST have an id/index or will get a setExtraStackFrame error
+                // put a key in the table
+                return {
+                  stateName: entry.pyLabel,
+                  stateCode: entry.pyStateCode,
+                  id: index
+                };
+              })
+            );
+          } else {
+            setStatelist([]);
+            setIsLoading(false);
+          }
         })
         .catch((error: any) => {
+          setStatelist([]);
+          setIsLoading(false);
           console.log(error);
         });
     }
-  }, [PConnect, countryCode, showTable]);
+  }, [context, countryCode, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -194,6 +203,8 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
           title={PConnect.getLocalizedValue('State list', '', '')}
           columns={columns}
           data={statelist}
+          loading={isLoading}
+          loadingMessage={PConnect.getLocalizedValue('Loading state list', '', '')}
         />
       )}
     </StyledPegaDxilMyIconButtonUrlWrapper>

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -22,30 +22,37 @@ if (!window.PCore) {
 }
 
 const worklistData = {
-  data: [
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-8002',
-      pyAssignmentStatus: 'New',
-      pxTaskLabel: 'Details'
-    },
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-7001',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Info'
-    },
-    {
-      pxProcessName: 'Loan',
-      pxRefObjectInsName: ' A-9000',
-      pyAssignmentStatus: 'Open',
-      pxTaskLabel: 'Amount'
-    }
-  ]
+  data: {
+    data: [
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-8002',
+        pyAssignmentStatus: 'New',
+        pxTaskLabel: 'Details'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-7001',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Info'
+      },
+      {
+        pxProcessName: 'Loan',
+        pxRefObjectInsName: ' A-9000',
+        pyAssignmentStatus: 'Open',
+        pxTaskLabel: 'Amount'
+      }
+    ]
+  }
 };
 
-window.PCore.getDataPageUtils = () => {
+window.PCore.getDataApiUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(worklistData);
@@ -59,7 +66,7 @@ window.PCore.getDataPageUtils = () => {
 export const BasePegaDxilMyPageWidget: Story = args => {
 
   const props = {
-    image: configProps.image,
+    ...configProps,
     getPConnect: () => {
       return {
         getValue: value => {

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.tsx

@@ -21,7 +21,11 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
 
   const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
   const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   const PConnect = getPConnect();
+  const dataViewName = 'D_pyMyWorkList';
+  const context = PConnect.getContextName();
+
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -44,33 +48,41 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'D_pyMyWorkList';
-    const context = PConnect.getContextName();
 
-    PCore.getDataPageUtils()
-      .getDataAsync(dataViewName, context, {}, null, null)
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {
-        // table requires an index or will get setExtraStackFrame error
-        setWorklist(
-          response.data.map((entry: any, index: number) => {
-            // mapping the data into the column names
-            // MUST have an id/index or will get a setExtraStackFrame error
-            // put a key in the table
-            return {
-              caseType: entry.pxProcessName,
-              insKey: entry.pxRefObjectInsName,
-              status: entry.pyAssignmentStatus,
-              stage: entry.pxTaskLabel,
-              id: index
-            };
-          })
-        );
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.pxProcessName,
+                insKey: entry.pxRefObjectInsName,
+                status: entry.pyAssignmentStatus,
+                stage: entry.pxTaskLabel,
+                id: index
+              };
+            })
+          );
+        }
+        else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+
       })
       .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
         console.log(error);
       });
-  }, [PConnect]);
+  }, [context]);
 
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
@@ -86,6 +98,8 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}
       data={worklist}
+      loading={isLoading}
+      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
     />
     </StyledPegaDxilMyPageWidgetWrapper>
   );

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/demo.stories.tsx

@@ -24,6 +24,7 @@ const Region = props => {
   return <></>;
 };
 
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/mock.ts

@@ -1,5 +1,4 @@
 
-
 // @ts-nocheck
 export const pyReviewRaw = {
   name: 'pyReview',
@@ -18,6 +17,7 @@ export const pyReviewRaw = {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -28,6 +28,7 @@ export const pyReviewRaw = {
           value: '@P .pyID',
           label: '@L Case ID',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
       },
@@ -37,6 +38,7 @@ export const pyReviewRaw = {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
           hideLabel: true,
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
       },
@@ -47,6 +49,7 @@ export const pyReviewRaw = {
           hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateOperator'
         }
       }
@@ -66,6 +69,7 @@ export const pyReviewRaw = {
     {
       name: 'A',
       type: 'Region',
+      key: 'A',
       getPConnect: () => {
         return {
           getRawMetadata: () => {
@@ -78,17 +82,17 @@ export const pyReviewRaw = {
           type: 'DateTime',
           config: {
             value: '@P .pySLADeadline',
-            label: '@L SLA Deadline'
-          },
-          key: '1'
+            label: '@L SLA Deadline',
+            key: 'pySLADeadline'
+          }
         },
         {
           type: 'DateTime',
           config: {
             value: '@P .pySLAGoal',
-            label: '@L SLA Goal'
-          },
-          key: '2'
+            label: '@L SLA Goal',
+            key: 'pySLAGoal'
+          }
         },
         {
           type: 'RadioButtons',
@@ -96,9 +100,9 @@ export const pyReviewRaw = {
             value: '@P .pySLAStartTime',
             label: '@L SLA Start Time',
             listType: 'associated',
-            datasource: '@ASSOCIATED .pySLAStartTime'
-          },
-          key: '3'
+            datasource: '@ASSOCIATED .pySLAStartTime',
+            key: 'pySLAStartTime'
+          }
         }
       ]
     }

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/demo.stories.tsx

@@ -38,6 +38,11 @@ const countrylistData = {
 
 window.PCore.getDataPageUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(countrylistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(countrylistData);

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/index.tsx

@@ -60,10 +60,13 @@ export const textFormatter = (value: string) => {
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
   const { value, displayMode, getPConnect, testId } = props;
-  const [statelist, setStatelist] = useState([]);
+  const [countrylist, setCountrylist] = useState([]);
   const [showTable, setShowTable] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [validUrl, setValidUrl] = useState('about:blank');
   const PConnect = getPConnect();
+  const dataViewName = 'CountryList';
+  const context = PConnect.getContextName();
 
   // IMPORTANT: need to register icons used in camel case
   registerIcon(listNumber, arrowRight, globe);
@@ -108,8 +111,6 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'CountryList';
-    const context = PConnect.getContextName();
     const params = { };
 
     // only retrieve table data if table is shown
@@ -118,25 +119,35 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
         .getDataAsync(dataViewName, context, params, null, null)
         // @ts-ignore
         .then((response: any) => {
+          setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error
-          setStatelist(
-            response.data.map((entry: any, index: number) => {
-              // mapping the data into the column names
-              // MUST have an id/index or will get a setExtraStackFrame error
-              // put a key in the table
-              return {
-                countryName: entry.Name,
-                shortName: entry.ShortName,
-                id: index
-              };
-            })
-          );
+          if (response.data !== null) {
+            setCountrylist(
+              response.data.map((entry: any, index: number) => {
+                // mapping the data into the column names
+                // MUST have an id/index or will get a setExtraStackFrame error
+                // put a key in the table
+                return {
+                  countryName: entry.Name,
+                  shortName: entry.ShortName,
+                  id: index
+                };
+              })
+            );
+          }
+          else {
+            setCountrylist([]);
+            setIsLoading(false);
+          }
+
         })
         .catch((error: any) => {
+          setCountrylist([]);
+          setIsLoading(false);
           console.log(error);
         });
     }
-  }, [PConnect, showTable]);
+  }, [context, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -189,7 +200,9 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
         <Table
           title={PConnect.getLocalizedValue('State list', '', '')}
           columns={columns}
-          data={statelist}
+          data={countrylist}
+          loading={isLoading}
+          loadingMessage={PConnect.getLocalizedValue('Loading country list', '', '')}
         />
       )}
     </StyledPegaDxilMyIconButtonUrlWrapper>

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/demo.stories.tsx

@@ -22,30 +22,38 @@ if (!window.PCore) {
 }
 
 const worklistData = {
-  data: [
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-8002',
-      ProcessName: 'New',
-      TaskName: 'Details'
-    },
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-7001',
-      ProcessName: 'Open',
-      TaskName: 'Info'
-    },
-    {
-      CaseName: 'Loan',
-      BusinessID: ' A-9000',
-      ProcessName: 'Open',
-      TaskName: 'Amount'
-    }
-  ]
+  data: {
+    data: [
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-8002',
+        ProcessName: 'New',
+        TaskName: 'Details'
+      },
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-7001',
+        ProcessName: 'Open',
+        TaskName: 'Info'
+      },
+      {
+        CaseName: 'Loan',
+        BusinessID: ' A-9000',
+        ProcessName: 'Open',
+        TaskName: 'Amount'
+      }
+    ]
+  }
+
 };
 
-window.PCore.getDataPageUtils = () => {
+window.PCore.getDataApiUtils = () => {
   return {
+    getData: () => {
+      return new Promise(resolve => {
+        resolve(worklistData);
+      });
+    },
     getDataAsync: () => {
       return new Promise(resolve => {
         resolve(worklistData);
@@ -59,7 +67,7 @@ window.PCore.getDataPageUtils = () => {
 export const BasePegaDxilMyPageWidget: Story = args => {
 
   const props = {
-    image: configProps.image,
+    ...configProps,
     getPConnect: () => {
       return {
         getValue: value => {

package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/index.tsx

@@ -21,7 +21,11 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
 
   const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
   const [worklist, setWorklist] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
   const PConnect = getPConnect();
+  const dataViewName = 'MyWorkList';
+  const context = PConnect.getContextName();
+
   let details = [];
   // @ts-ignore
   if (datasource && datasource.source) {
@@ -44,33 +48,41 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-    const dataViewName = 'MyWorkList';
-    const context = PConnect.getContextName();
 
-    PCore.getDataPageUtils()
-      .getDataAsync(dataViewName, context, {}, null, null)
+    PCore.getDataApiUtils()
+      .getData(dataViewName, {}, context)
       // @ts-ignore
       .then((response: any) => {
-        // table requires an index or will get setExtraStackFrame error
-        setWorklist(
-          response.data.map((entry: any, index: number) => {
-            // mapping the data into the column names
-            // MUST have an id/index or will get a setExtraStackFrame error
-            // put a key in the table
-            return {
-              caseType: entry.CaseName,
-              insKey: entry.BusinessID,
-              status: entry.ProcessName,
-              stage: entry.TaskName,
-              id: index
-            };
-          })
-        );
+        setIsLoading(false);
+        if (response.data.data !== null) {
+          // table requires an index or will get setExtraStackFrame error
+          setWorklist(
+            response.data.data.map((entry: any, index: number) => {
+              // mapping the data into the column names
+              // MUST have an id/index or will get a setExtraStackFrame error
+              // put a key in the table
+              return {
+                caseType: entry.CaseName,
+                insKey: entry.BusinessID,
+                status: entry.ProcessName,
+                stage: entry.TaskName,
+                id: index
+              };
+            })
+          );
+        }
+        else {
+          setWorklist([]);
+          setIsLoading(false);
+        }
+
       })
       .catch((error: any) => {
+        setWorklist([]);
+        setIsLoading(false);
         console.log(error);
       });
-  }, [PConnect]);
+  }, [context]);
 
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
@@ -86,6 +98,8 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}
       data={worklist}
+      loading={isLoading}
+      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
     />
     </StyledPegaDxilMyPageWidgetWrapper>
   );