@pega/custom-dx-components 0.24.12 → 0.24.14

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.tsx.mustache

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+import { Fragment, Children, ReactElement } from 'react';
+import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import DetailsRender from './DetailsRender';
 import HighlightRender from './HighlightRender';
 
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
 
 // includes in bundle
 import { getAllFields } from './utils';
@@ -14,40 +14,31 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
   showLabel: boolean;
   showHighlightedData: boolean;
-  children: any;
+  children: ReactElement[];
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // 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 { getPConnect, children, label, showLabel = true, showHighlightedData = false  } = props;
+  const { getPConnect, label, children, showLabel = true, showHighlightedData = false  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
   // update children with readonly
-  // eslint-disable-next-line guard-for-in
-  for (const index in children) {
-    const kid = children[index];
-    kid.props.getPConnect().setInheritedProp('readOnly', true);
-    kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
-  }
+  Children.toArray(children).forEach(child => {
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('readOnly', true);
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  });
 
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { colGap: 0, 'margin-line-start': 0 };
-  // @ts-ignore
+
+  const gridContainer: GridContainerProps = { colGap: 0 };
   gridContainer.cols = gridRepeat;
-  // @ts-ignore
   gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  // @ts-ignore
-  gridHighlightContainer.cols = gridRepeat;
-  // @ts-ignore
-  gridHighlightContainer.alignItems = 'flex-start';
-  // @ts-ignore
-  gridHighlightContainer.pad = [0, 0, 2, 0];
-
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
@@ -55,26 +46,10 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-      // field.config.displayMode = 'STACKED_LARGE_VAL';
-
-      // // Mark as status display when using pyStatusWork
-      // if (field.config.value === '@P .pyStatusWork') {
-      //   field.type = 'TextInput';
-      //   field.config.displayAsStatus = true;
-      // }
-      // // @ts-ignore
-      // return getPConnect().createComponent(field);
-      return <HighlightRender field={field} props={props} />;
+      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
     });
   }
 
-  const hrStyle = {
-    line: {
-      margin: '0.75rem 0',
-      opacity: '50%'
-    }
-  };
-
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
 {{! pick new delimiters for mustache }}
@@ -90,10 +65,13 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
                 <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
               ))}
             </Flex>
-            <hr style={hrStyle.line} />
+            <StyledHighlightedFieldsHrLine />
           </>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
+      <Grid
+        as={StyledDetailsGridContainer}
+        container={gridContainer}
+        data-testid={`column-count-${numRegions}`} >
        {children.map((child: any, i: number) => (
         <Flex
           // @ts-ignore

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

@@ -16,6 +16,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
+          hideLabel: true,
           displayMode: 'STACKED_LARGE_VAL',
           displayAsStatus: true,
           key: 'pyStatusWork'
@@ -26,6 +27,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
+          hideLabel: true,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pyID'
         }
@@ -35,6 +37,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
+          hideLabel: true,
           displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateDateTime'
         }
@@ -43,6 +46,7 @@ export const pyReviewRaw = {
         type: 'UserReference',
         config: {
           label: '@L Create Operator',
+          hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
           displayMode: 'STACKED_LARGE_VAL',
@@ -160,7 +164,6 @@ export const pyReviewResolved = {
       config: {
         value: 'New',
         label: 'Work Status',
-        displayMode: 'STACKED_LARGE_VAL',
         displayAsStatus: true
       }
     },
@@ -168,16 +171,14 @@ export const pyReviewResolved = {
       type: 'TextInput',
       config: {
         value: 'M-1002',
-        label: 'Case ID',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Case ID'
       }
     },
     {
       type: 'DateTime',
       config: {
         value: '2022-12-11T20:06:27.232Z',
-        label: 'Create date/time',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Create date/time'
       }
     },
     {
@@ -188,8 +189,7 @@ export const pyReviewResolved = {
           userId: 'conns',
           userName: 'Sara Connor'
         },
-        placeholder: 'Select...',
-        displayMode: 'STACKED_LARGE_VAL'
+        placeholder: 'Select...'
       }
     }
   ],
@@ -199,22 +199,25 @@ export const pyReviewResolved = {
 export const regionChildrenResolved = [
   {
     readOnly: true,
-    value: '',
+    value: 'Deadline',
     label: 'SLA Deadline',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Deadline'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Goal',
     label: 'SLA Goal',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Goal'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Start Time',
     label: 'SLA Start Time',
+    hideLabel: true,
     listType: 'associated',
     datasource: [
       {

package/src/tasks/create/templates/Constellation/Template/DETAILS-region/styles.ts.mustache

@@ -6,3 +6,18 @@ export default styled.div(() => {
     margin: 0px 0;
   `;
 });
+
+export const StyledDetailsGridContainer = styled.div(() => {
+  return css`
+    margin-line-start: 1;
+  `;
+});
+
+export const StyledHighlightedFieldsHrLine = styled.hr(() => {
+  return css`
+    line: {
+      margin: '0.75rem 0';
+      opacity: '50%'
+    }
+  `;
+});

package/src/tasks/create/templates/Constellation/Template/PAGE/localizations.json.mustache

@@ -1,4 +1,6 @@
 {
-  "Get next work" : "Get next work",
-  "No task currently available" : "No task currently available"
+  "fields" : {
+    "Get next work" : "Get next work",
+    "No task currently available" : "No task currently available"
+  }
 }

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

@@ -97,11 +97,11 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     }
   };
 
-return (
-    <>
-      <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
-    </>
-  );
+  return (
+      <>
+        <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+      </>
+    );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {

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

@@ -81,7 +81,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
-    <br></br>
+    <br />
     <Table
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}

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

@@ -97,7 +97,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
     }
   };
 
-return (
+  return (
     <>
       <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
     </>

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

@@ -81,7 +81,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       whatsNewLink={whatsnewlink}
       image={image.replace(/ /g, '+')}
     />
-    <br></br>
+    <br />
     <Table
       title={PConnect.getLocalizedValue('Work list', '', '')}
       columns={columns}

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

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

package/src/tasks/publish/helper.js

@@ -84,11 +84,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/src/tasks/publish-all/helper.js

@@ -70,11 +70,17 @@ export const zipComponent = async componentKey => {
   const srcDirectory = await getComponentDirectoryPath(componentKey);
   const buildDirectory = await path.join(path.resolve(), 'dist/components', componentKey);
   const configJson = `${srcDirectory}/config.json`;
+  const localizationJson = `${srcDirectory}/localizations.json`;
 
   const zip = new AdmZip();
 
   zip.addLocalFolder(srcDirectory, 'src/');
   zip.addLocalFile(configJson);
+
+  if (fs.existsSync(localizationJson)) {
+    zip.addLocalFile(localizationJson);
+  }
+
   zip.addLocalFolder(buildDirectory);
   const zipContent = zip.toBuffer().toString('base64');
 

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/DetailsRender.tsx

@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
   const displayCompArr: ReactElement[] = [];
 
-  Object.values(kids).forEach((value: any) => {
+  Object.values(kids).forEach((value: any, i :number) => {
     const { type } = value.getPConnect().getRawMetadata();
     const { hideLabel, variant, testId, label } = value
       .getPConnect()
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
 
     let displayComp;
     const key = JSON.stringify(value.getPConnect());
+    const key1 = key.concat(`-${i}`);
 
     if (type === 'reference') {
       const refElement = value.getPConnect().getComponent();
@@ -30,17 +31,10 @@ const DetailsRender = (props: DetailsRenderProps) => {
       const element = value.getPConnect().getComponent();
       const displayEl = <Fragment key={key}>{element}</Fragment>;
 
-      const fvlStyle = {
-        myColGap: {
-          columnGap: '0'
-        }
-      };
-
-      // const myEl = <div>boo</div>;
       displayComp = (
-        <Fragment key={key}>
+        <Fragment key={key1}>
           <FieldValueList
-            style={fvlStyle.myColGap}
+            style={{ columnGap: '0'}}
             variant={hideLabel ? 'stacked' : variant}
             data-testid={testId}
             fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}

package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/HighlightRender.tsx

@@ -1,10 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import React from 'react';
 import { FieldValueList, Text } from '@pega/cosmos-react-core';
+import type { PConnProps } from './PConnProps';
 
-const HighlightRender = (data: any) => {
-  const { getPConnect } = data.props;
-  const { field } = data;
+interface HighlightRenderProps extends PConnProps {
+  field?: any;
+}
+
+const HighlightRender = (props: HighlightRenderProps) => {
+  const { getPConnect, field } = props;
 
   field.config['displayMode'] = 'DISPLAY_ONLY';
 
@@ -16,20 +20,12 @@ const HighlightRender = (data: any) => {
 
   const configProps = getPConnect().resolveConfigProps(field.config);
 
-  // field.config = configProps;
-
+  // @ts-ignore
   const reactField = getPConnect().createComponent(field);
-  // const reactField = field.getPConnect().getComponent();
-
-  const styles = {
-    myWidth: {
-      width: 'auto'
-    }
-  };
 
   return (
     <FieldValueList
-      style={styles.myWidth}
+      style={{ width: 'auto' }}
       variant='stacked'
       data-testid={field.testId}
       fields={[

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

@@ -20,6 +20,10 @@ const meta: Meta<typeof PegaDxilMyDetails> = {
 export default meta;
 type Story = StoryObj<typeof PegaDxilMyDetails>;
 
+const Region = props => {
+  return <></>;
+};
+
 const renderField = resolvedProps => {
   const {
     displayAsStatus = false,
@@ -124,20 +128,36 @@ export const BasePegaDxilMyDetails: Story = args => {
         setInheritedProp: () => {
           /* nothing */
         },
-        resolveConfigProps: () => {
-          /* nothing */
+        resolveConfigProps: config => {
+          return config;
         }
       };
     }
   };
 
-  const regionAChildren = pyReviewRaw.children[0].children.map(child => {
-    return props.getPConnect().createComponent(child);
-  });
-
   return (
     <>
-      <PegaDxilMyDetails {...props} {...args}>{regionAChildren}</PegaDxilMyDetails>
+      <PegaDxilMyDetails {...props} {...args}>
+        <Region
+          {...{
+            getPConnect: () => ({
+              setInheritedProp: () => {},
+              getChildren: () =>
+                pyReviewRaw.children[0].children.map((child, index) => {
+                  return {
+                    getPConnect: () => ({
+                      getRawMetadata: () => pyReviewRaw.children[0].children[index],
+                      getConfigProps: () => {},
+                      resolveConfigProps: () => regionChildrenResolved[index],
+                      getComponent: config =>
+                        props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
+                    })
+                  };
+                })
+            })
+          }}
+        />
+      </PegaDxilMyDetails>
     </>
   );
 };

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

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
-import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
+import { Fragment, Children, ReactElement } from 'react';
+import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
 import DetailsRender from './DetailsRender';
 import HighlightRender from './HighlightRender';
 
-import StyledPegaDxilMyDetailsWrapper from './styles';
+import StyledPegaDxilMyDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
 
 // includes in bundle
 import { getAllFields } from './utils';
@@ -21,33 +21,30 @@ interface PegaDxilMyDetailsProps extends PConnFieldProps {
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
 
-  const { getPConnect, children, label, showLabel = true, showHighlightedData = false  } = props;
+  const { getPConnect, label, showLabel = true, showHighlightedData = false  } = props;
   const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
 
-  // update children with readonly
-  // eslint-disable-next-line guard-for-in
-  for (const index in children) {
-    const kid = children[index];
-    kid.props.getPConnect().setInheritedProp('readOnly', true);
-    kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  // storybook doesn't get children of 1 as an array of 1
+  let { children } = props;
+  if (!Array.isArray(children)) {
+    children = Children.toArray(children);
   }
 
+  // update children with readonly
+  Children.toArray(children).forEach(child => {
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('readOnly', true);
+    // @ts-ignore
+    child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
+  });
+
   const numRegions = getAllFields(getPConnect)?.length;
   const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
-  const gridContainer = { colGap: 0, 'margin-line-start': 0 };
-  // @ts-ignore
+
+  const gridContainer: GridContainerProps = { colGap: 0 };
   gridContainer.cols = gridRepeat;
-  // @ts-ignore
   gridContainer.alignItems = 'start';
 
-  const gridHighlightContainer = { "gap": 2};
-  // @ts-ignore
-  gridHighlightContainer.cols = gridRepeat;
-  // @ts-ignore
-  gridHighlightContainer.alignItems = 'flex-start';
-  // @ts-ignore
-  gridHighlightContainer.pad = [0, 0, 2, 0];
-
   // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
   let highlightedDataArr = [];
   if (showHighlightedData) {
@@ -55,17 +52,10 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
     const { highlightedData = [] } = getPConnect().getRawMetadata().config;
     // @ts-ignore
     highlightedDataArr = highlightedData.map((field) => {
-
-    return <HighlightRender field={field} props={props} />;
+      return <HighlightRender field={field} getPConnect={props.getPConnect} />;
     });
   }
 
-  const hrStyle = {
-    line: {
-      margin: '0.75rem 0',
-      opacity: '50%'
-    }
-  };
 
   return (
     <StyledPegaDxilMyDetailsWrapper>
@@ -77,15 +67,18 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
               container={{ direction: 'row', alignItems: 'normal', colGap: 10 }}
               data-testid={`highlighted-column-count-${numRegions}`}
             >
-              {highlightedDataArr.map((child: any, i: number) => (
+              {highlightedDataArr.map((child: ReactElement, i: number) => (
                 <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
               ))}
             </Flex>
-            <hr style={hrStyle.line} />
+            <StyledHighlightedFieldsHrLine />
           </>
       )}
-      <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
-       {children.map((child: any, i: number) => (
+      <Grid
+        as={StyledDetailsGridContainer}
+        container={gridContainer}
+        data-testid={`column-count-${numRegions}`} >
+       {children.map((child: ReactElement, i: number) => (
 
         <Flex
             // @ts-ignore

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

@@ -17,7 +17,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyStatusWork',
           label: '@L Work Status',
-          displayMode: 'STACKED_LARGE_VAL',
+          hideLabel: true,
           displayAsStatus: true,
           key: 'pyStatusWork'
         }
@@ -27,7 +27,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pyID',
           label: '@L Case ID',
-          displayMode: 'STACKED_LARGE_VAL',
+          hideLabel: true,
           key: 'pyID'
         }
       },
@@ -36,7 +36,7 @@ export const pyReviewRaw = {
         config: {
           value: '@P .pxCreateDateTime',
           label: '@L Create date/time',
-          displayMode: 'STACKED_LARGE_VAL',
+          hideLabel: true,
           key: 'pxCreateDateTime'
         }
       },
@@ -44,9 +44,9 @@ export const pyReviewRaw = {
         type: 'UserReference',
         config: {
           label: '@L Create Operator',
+          hideLabel: true,
           value: '@USER .pxCreateOperator',
           placeholder: 'Select...',
-          displayMode: 'STACKED_LARGE_VAL',
           key: 'pxCreateOperator'
         }
       }
@@ -120,7 +120,6 @@ export const pyReviewResolved = {
       config: {
         value: 'New',
         label: 'Work Status',
-        displayMode: 'STACKED_LARGE_VAL',
         displayAsStatus: true
       }
     },
@@ -128,16 +127,14 @@ export const pyReviewResolved = {
       type: 'TextInput',
       config: {
         value: 'M-1002',
-        label: 'Case ID',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Case ID'
       }
     },
     {
       type: 'DateTime',
       config: {
         value: '2022-12-11T20:06:27.232Z',
-        label: 'Create date/time',
-        displayMode: 'STACKED_LARGE_VAL'
+        label: 'Create date/time'
       }
     },
     {
@@ -148,8 +145,7 @@ export const pyReviewResolved = {
           userId: 'conns',
           userName: 'Sara Connor'
         },
-        placeholder: 'Select...',
-        displayMode: 'STACKED_LARGE_VAL'
+        placeholder: 'Select...'
       }
     }
   ],
@@ -159,22 +155,25 @@ export const pyReviewResolved = {
 export const regionChildrenResolved = [
   {
     readOnly: true,
-    value: '',
+    value: 'Deadline',
     label: 'SLA Deadline',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Deadline'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Goal',
     label: 'SLA Goal',
+    hideLabel: true,
     displayMode: 'LABELS_LEFT',
     key: 'SLA Goal'
   },
   {
     readOnly: true,
-    value: '',
+    value: 'Start Time',
     label: 'SLA Start Time',
+    hideLabel: true,
     listType: 'associated',
     datasource: [
       {