@genesislcap/blank-app-seed 5.7.0 → 5.8.0

package/.genx/configure.js

@@ -1,4 +1,12 @@
 const versions = require('./versions.json');
+const fs = require('fs');
+const path = require('path');
+const {
+  DIRS_MAP,
+  DIR_CLIENT_MAIN_ALIAS,
+  DIR_CLIENT_TEMP_ALIAS,
+  FRAMEWORKS_DIR_MAP,
+} = require('./static');
 const {
   excludeFrameworks,
   formatRouteData,
@@ -8,6 +16,8 @@ const {
   registerPartials,
   validateRoute,
   deleteGradleWrappers,
+  generateStore,
+  fontUtils,
 } = require('./utils');
 
 /**
@@ -38,8 +48,111 @@ module.exports = async (data, utils) => {
     includeDependencies: !!(FDC3ListenersEnabled || FDC3EventHandlersEnabled),
     channels: data.ui?.fdc3?.channels || [],
   };
+
+  if (data.designTokens && Object.keys(data.designTokens).length > 0) {
+    try {
+      const frameworkDir = FRAMEWORKS_DIR_MAP.get(data.framework);
+      const templateFile = path.join(__dirname, '..', DIR_CLIENT_TEMP_ALIAS, frameworkDir, 'src/styles/design-tokens.json');
+      const jsonContent = JSON.stringify(data.designTokens, null, 2);
+      const templateDir = path.dirname(templateFile);
+      if (!fs.existsSync(templateDir)) {
+        fs.mkdirSync(templateDir, { recursive: true });
+      }
+      fs.writeFileSync(templateFile, jsonContent);
+    } catch (err) {
+      console.warn('Failed to write designTokens to template:', err?.message || err);
+    }
+  }
+
+  // Handle header logo copy
+  if (data.headerLogo && data.headerLogo.trim() !== '') {
+    try {
+      const sourcePath = path.resolve(data.headerLogo);
+      if (!fs.existsSync(sourcePath)) {
+        console.warn(`Header logo file not found: ${sourcePath}`);
+      } else {
+        const ext = path.extname(sourcePath);
+        const frameworkDir = FRAMEWORKS_DIR_MAP.get(data.framework);
+        let targetDir;
+
+        // Angular uses src/assets, others use public
+        if (data.framework === 'angular') {
+          targetDir = path.join(__dirname, '..', DIR_CLIENT_TEMP_ALIAS, frameworkDir, 'src/assets');
+        } else {
+          targetDir = path.join(__dirname, '..', DIR_CLIENT_TEMP_ALIAS, frameworkDir, 'public');
+        }
+
+        // Ensure target directory exists
+        if (!fs.existsSync(targetDir)) {
+          fs.mkdirSync(targetDir, { recursive: true });
+        }
+
+        const targetPath = path.join(targetDir, `header-logo${ext}`);
+        fs.copyFileSync(sourcePath, targetPath);
+
+        // Store the logo source path for templates
+        data.headerLogoSrc = `./header-logo${ext}`;
+
+        console.log(`Header logo copied to: ${targetPath}`);
+      }
+    } catch (err) {
+      console.warn('Failed to copy header logo:', err?.message || err);
+    }
+  }
+
+  // Handle custom fonts
+  if (data.customFonts && data.customFonts.trim() !== '') {
+    try {
+      const customFontsObj = typeof data.customFonts === 'string'
+        ? JSON.parse(data.customFonts)
+        : data.customFonts;
+
+      const processedFonts = fontUtils.processFontFiles(customFontsObj);
+
+      if (processedFonts) {
+        const { fontFamily, fontData } = processedFonts;
+        const frameworkDir = FRAMEWORKS_DIR_MAP.get(data.framework);
+
+        // Set data immediately so templates can use it even if file copy fails
+        data.fontFamily = fontFamily;
+        data.fontData = fontData;
+
+        // Determine target directory
+        let targetDir;
+        if (data.framework === 'angular') {
+          targetDir = path.join(__dirname, '..', DIR_CLIENT_TEMP_ALIAS, frameworkDir, 'src/assets/fonts');
+        } else {
+          targetDir = path.join(__dirname, '..', DIR_CLIENT_TEMP_ALIAS, frameworkDir, 'public/fonts');
+        }
+
+        // Create directory
+        if (!fs.existsSync(targetDir)) {
+          fs.mkdirSync(targetDir, { recursive: true });
+        }
+
+        // Copy font files
+        customFontsObj.files.forEach((fontPath, index) => {
+          const sourcePath = path.resolve(fontPath.trim());
+
+          if (fs.existsSync(sourcePath)) {
+            const fileName = path.basename(sourcePath);
+            const targetPath = path.join(targetDir, fileName);
+            fs.copyFileSync(sourcePath, targetPath);
+            console.log(`Font copied: ${fileName}`);
+          } else {
+            console.warn(`Font file not found: ${sourcePath}`);
+          }
+        });
+      }
+    } catch (err) {
+      console.warn('Failed to process custom fonts:', err?.message || err);
+    }
+  }
+
   excludeFrameworks(data.framework);
 
+  generateStore(data.routes, utils, data.framework);
+
   data.routes.forEach((route) => {
     generateRoute(route, utils, data.framework);
   });
@@ -50,6 +163,7 @@ module.exports = async (data, utils) => {
       generateCsv(entity, utils);
     });
 
+
   if (data.excludeGradleWrapper) {
     deleteGradleWrappers();
   }

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",
@@ -38,17 +38,20 @@
           "product-info",
           ".yml",
           ".sh",
-          ".json",
           ".js",
           ".kt",
           ".kts",
           ".ts",
+          ".css",
           ".md",
           ".properties",
           ".html",
           ".gitignore",
           ".xml",
           ".iml"
+        ],
+        "exclude": [
+          "design-tokens.json"
         ]
       }
     }

package/.genx/prompts/api.js

@@ -1,6 +1,8 @@
 const { websocketValidator } = require('./validators');
 const { TEXTS } = require('../static');
 
+const defaultHeaderLogo = '';
+
 const apiHostIntro = () => console.log(TEXTS.INTRO_API_HOST);
 const ssoIntro = () => console.log(TEXTS.INTRO_API_SSO);
 
@@ -26,8 +28,31 @@ module.exports = async (inquirer, prevAns = {}) => {
       when: prevAns.enableSSO === undefined,
     },
   ]);
+  
+  const { headerLogo = prevAns.headerLogo } = await inquirer.prompt([
+    {
+      name: 'headerLogo',
+      type: 'input',
+      message: 'Header logo file path (optional)',
+      default: defaultHeaderLogo,
+      when: prevAns.headerLogo === undefined,
+    },
+  ]);
+  
+  const { customFonts = prevAns.customFonts } = await inquirer.prompt([
+    {
+      name: 'customFonts',
+      type: 'input',
+      message: 'Custom fonts JSON (optional, e.g. {"files":["./Font-Regular.ttf","./Font-Bold.ttf"]})',
+      default: prevAns.customFonts || '',
+      when: prevAns.customFonts === undefined,
+    },
+  ]);
+  
   return {
     apiHost,
     enableSSO,
+    headerLogo,
+    customFonts,
   };
 };

package/.genx/prompts/ui.js

@@ -13,6 +13,9 @@ const parseRoutes = parseJSONArgument('routes', defaultRoutes);
 const defaultUI = {};
 const parseUI = parseJSONArgument('ui', defaultUI);
 
+const defaultDesignTokens = {};
+const parseDesignTokens = parseJSONArgument('designTokens', defaultDesignTokens);
+
 const selectedFrameworkInfo = (framework) => {
   if (framework && frameworkValidator(framework) === true) {
     console.log(
@@ -28,6 +31,7 @@ module.exports = async (inquirer, prevAns = {}) => {
     framework = prevAns.framework,
     ui = prevAns.ui,
     routes = prevAns.routes,
+    designTokens = prevAns.designTokens,
   } = await inquirer.prompt([
     {
       name: 'framework',
@@ -55,11 +59,19 @@ module.exports = async (inquirer, prevAns = {}) => {
       when: !prevAns.routes,
       default: JSON.stringify(defaultRoutes),
     },
+    {
+      name: 'designTokens',
+      type: 'input',
+      message: TEXTS.MESSAGE_UI_DESIGN_TOKENS,
+      when: !prevAns.designTokens,
+      default: JSON.stringify(defaultDesignTokens),
+    },
   ]);
 
   return {
     routes: parseRoutes(routes),
     ui: parseUI(ui),
+    designTokens: parseDesignTokens(designTokens),
     framework: normalizeFrameworkAlias(framework),
   };
 };

package/.genx/prompts.js

@@ -16,7 +16,7 @@ module.exports = async (inquirer, prevAns = {}) => {
   Version: ${version}
   License: ${license}`);
 
-  const { apiHost, enableSSO } = await apiPrompts(inquirer, prevAns);
+  const { apiHost, enableSSO, headerLogo, customFonts } = await apiPrompts(inquirer, prevAns);
   const {
     description,
     groupId,
@@ -25,12 +25,17 @@ module.exports = async (inquirer, prevAns = {}) => {
     csv,
     excludeGradleWrapper,
   } = await genesisServerPrompts(inquirer, prevAns);
-  const { routes, ui, framework } = await uiPrompts(inquirer, prevAns);
+  const { routes, ui, framework, designTokens } = await uiPrompts(
+    inquirer,
+    prevAns,
+  );
 
   return {
     apiHost,
     routes,
     enableSSO,
+    headerLogo,
+    customFonts,
     description,
     groupId,
     applicationVersion,
@@ -39,5 +44,6 @@ module.exports = async (inquirer, prevAns = {}) => {
     ui,
     framework,
     excludeGradleWrapper,
+    designTokens,
   };
 };

package/.genx/static.js

@@ -78,6 +78,7 @@ const TEXTS = {
     'Generate empty CSV for entities? (config in JSON format)',
   MESSAGE_UI_ROTUES: 'Pages config in JSON format',
   MESSAGE_UI_CONFIG: 'UI configuration in JSON format',
+  MESSAGE_UI_DESIGN_TOKENS: 'Design tokens JSON (leave empty to use defaults)',
   MESSAGE_UI_FRAMEWORK: 'Framework',
   ERROR_VALIDATOR_FRAMEWORK: 'Selected framework is not supported',
   ERROR_VALIDATOR_WEBSOCKET: 'Not a valid websocket',

package/.genx/templates/angular/component/component.filter.form.hbs

@@ -0,0 +1,6 @@
+import { UiSchema } from '@genesislcap/foundation-forms';
+
+{{#if tile.config.filterFormUiSchema}}
+export const filterFormSchema: UiSchema = {{{ tile.config.filterFormUiSchema }}}
+{{/if}}
+

package/.genx/templates/angular/component/component.hbs

@@ -18,12 +18,19 @@ import { createFormSchema } from './{{kebabCase tile.title}}.create.form.schema'
 {{#if tile.config.updateFormUiSchema}}
 import { updateFormSchema } from './{{kebabCase tile.title}}.update.form.schema';
 {{/if}}
+{{#if tile.config.filterFormUiSchema}}
+import { filterFormSchema } from './{{kebabCase tile.title}}.filter.form.schema';
+{{/if}}
 {{#if tile.config.columns}}
 import { columnDefs } from './{{kebabCase tile.title}}.column.defs';
 {{/if}}
 {{#if tile.config.gridOptions}}
 import { gridOptions } from './{{kebabCase tile.title}}.gridOptions';
 {{/if}}
+{{#ifAny tile.config.eventing.publishEventName tile.config.eventing.listener}}
+import { actions, selectors } from '../../../store/store';
+import { injectSelector } from '@reduxjs/angular-redux';
+{{/ifAny}}
 
 {{#ifAny tile.metadata.comment tile.metadata.todo}}
 /**
@@ -49,9 +56,9 @@ export class {{pascalCase tile.componentName}} {
   hasUserPermission = (permissionCode: string) => getViewUpdateRightComponent(getUser(), permissionCode);{{#if tile.config.createFormUiSchema}}
   createFormSchema = createFormSchema;{{/if}}{{#if tile.config.uischema}}
   uischema = createFormSchema;{{/if}}{{#if tile.config.updateFormUiSchema}}
-  updateFormSchema = updateFormSchema;{{/if}}{{#if tile.config.gridOptions}}
-  gridOptions = gridOptions as GridOptionsConfig;{{/if}}{{#if tile.config.reqrep}}
-  reqrep = { pollingInterval: 5000, requestAutoSetup: false };{{/if}}{{#if tile.config.columns}}
+  updateFormSchema = updateFormSchema;{{/if}}{{#if tile.config.filterFormUiSchema}}
+  filterFormSchema = filterFormSchema;{{/if}}{{#if tile.config.gridOptions}}
+  gridOptions = gridOptions as GridOptionsConfig;{{/if}}{{#if tile.config.columns}}
   columnDefs = [
     ...columnDefs,
   ];{{/if}}{{#if tile.config.type}}
@@ -62,5 +69,30 @@ export class {{pascalCase tile.componentName}} {
       "xField": "groupBy",
       "yField": "value",{{/ifEquals}}
   };{{/if}}{{#if tile.config.customEvents}}
-  customActions = emCustomActions;{{/if}}
+  customActions = emCustomActions;{{/if}}{{#ifAny tile.config.eventing.publishEventName tile.config.eventing.listener}}
+  {{#if tile.config.eventing.listener}}
+  criteria = injectSelector(selectors.eventing.getCriteriaFor{{pascalCase tile.title}});
+  {{/if}}
+  {{/ifAny}}{{#if tile.config.eventing.publishEventName}}
+  handleRowSelection = (e: any) => {
+    {{#ifEquals tile.componentType 'grid'}}
+    const selectedRows = e.api.getSelectedRows();
+    {{else}}
+    const selectedRows = e.detail.api.getSelectedRows();
+    {{/ifEquals}}
+    if (!selectedRows || !selectedRows.length) {
+        actions.eventing.publish{{pascalCase tile.config.eventing.publishEventName}}(null);
+        return;
+    };
+    const { TIMESTAMP, RECORD_ID, ROW_REF, ...data } = selectedRows[0];
+    actions.eventing.publish{{pascalCase tile.config.eventing.publishEventName}}(data);
+  };{{/if}}
+  {{#ifAny tile.config.gridOptions tile.config.eventing.publishEventName}}
+  gridOptionsModel = {
+    {{#if tile.config.gridOptions}}
+    onRowClicked: gridOptions?.onRowClicked,{{/if}}{{#if tile.config.eventing.publishEventName}}{{#ifEquals tile.componentType 'grid'}}
+    onSelectionChanged: this.handleRowSelection,
+    rowSelection: 'single'{{/ifEquals}}{{/if}}
+  };
+  {{/ifAny}}
 }

package/.genx/templates/angular/entityManager.hbs

@@ -25,14 +25,25 @@
       [deleteEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined"
       {{/if}}
       {{#if config.gridOptions}}
-      [gridOptions]="{{ config.gridOptions }}"
+      [gridOptions]="gridOptionsModel"
       {{/if}}
-      {{#if config.snapshot}}
-      [datasourceConfig]="{ isSnapshot: {{ config.snapshot }} }"
-      {{/if}}
-      {{#if config.reqrep}}
-      [datasourceConfig]="reqrep"
+      {{#if config.eventing.publishEventName}}
+      (selectionChanged)="handleRowSelection($event)"
       {{/if}}
+      {{#ifAny config.snapshot config.reqrep config.eventing.listener}}
+      [datasourceConfig]="{
+        {{#if config.snapshot}}
+        isSnapshot: {{ config.snapshot }},
+        {{/if}}
+        {{#if config.reqrep}}
+        pollingInterval: 5000,
+        requestAutoSetup: false,
+        {{/if}}
+        {{#if config.eventing.listener}}
+        criteria: criteria()
+        {{/if}}
+      }"
+      {{/ifAny}}
       {{#if config.entityName}}
       entityLabel="{{ config.entityName }}"
       {{/if}}
@@ -48,6 +59,12 @@
       {{#if config.enableSearchBar}}
       enable-search-bar
       {{/if}}
+      {{#if config.enableFilters}}
+      enable-filters
+      {{#if config.filterFormUiSchema}}
+      [filtersUiSchema]="filterFormSchema"
+      {{/if}}
+      {{/if}}
       {{#if config.customEvents}}
       [customActions]="customActions"
       {{/if}}

package/.genx/templates/angular/grid.hbs

@@ -14,9 +14,12 @@
         polling-interval="5000"
         request-auto-setup="false"
         {{/if}}
-        {{#if config.gridOptions}}
-        [deferredGridOptions]="{ onRowClicked: gridOptions.onRowClicked }"
+        {{#if config.eventing.listener}}
+        [criteria]="criteria()"
         {{/if}}
+        {{#ifAny config.gridOptions config.eventing.publishEventName}}
+        [deferredGridOptions]="gridOptionsModel"
+        {{/ifAny}}
       ></grid-pro-genesis-datasource>
       {{#if config.gridOptions}}
       <grid-pro-column *ngFor="let columnDef of gridOptions?.columnDefs" [definition]="columnDef"></grid-pro-column>

package/.genx/templates/angular/slices/eventing.slice.hbs

@@ -0,0 +1,41 @@
+import { CriteriaBuilder, ExpressionBuilder, Serialisers } from '@genesislcap/foundation-criteria';
+import { createSlice } from '@genesislcap/foundation-redux';
+
+export const eventingSlice = createSlice({
+  name: 'eventing',
+  initialState: {
+{{#each events}}
+    {{this}}: null{{#unless @last}},{{/unless}}
+{{/each}}
+  },
+  reducers: {
+{{#each events}}
+    publish{{pascalCase this}}: (state, action) => {
+      state.{{this}} = action.payload;
+    }{{#unless @last}},{{/unless}}
+{{/each}}
+  },
+  selectors: {
+{{#each listeners}}
+    getCriteriaFor{{pascalCase tileName}}: (state) => {
+      const criteriaBuilder = new CriteriaBuilder();
+      const data: any = state.{{eventName}};
+      if (!data) return '';
+
+{{#each mappings}}
+      if (data.{{sourceField}}) {
+        criteriaBuilder.And(new ExpressionBuilder()
+          .withField('{{targetField}}')
+          .withValue(data.{{sourceField}})
+          .withSerialiser(Serialisers.EQ)
+          .build());
+      }
+{{/each}}
+
+      return criteriaBuilder.build();
+    }{{#unless @last}},{{/unless}}
+{{/each}}
+  },
+});
+
+

package/.genx/templates/angular/store.hbs

@@ -0,0 +1,14 @@
+import { createStore } from '@genesislcap/foundation-redux';
+import { eventingSlice } from './slices/eventing.slice';
+
+export const { reduxStore, store, actions, selectors } = createStore([eventingSlice], {
+  eventing: {
+    {{#each events}}
+    {{this}}: null{{#unless @last}},{{/unless}}
+    {{/each}}
+  },
+});
+
+export type Store = typeof store;
+export type Actions = typeof actions;
+export type Selectors = typeof selectors;

package/.genx/templates/angular/tabsLayout.hbs

@@ -1,7 +1,7 @@
 <rapid-layout-region type="tabs">
     {{#each route.tiles}}
     <rapid-layout-item title="{{this.title}}">
-        {{> (lookup . 'type') }}
+        <app-{{kebabCase this.componentName}}></app-{{kebabCase this.componentName}}>
     </rapid-layout-item>
     {{/each}}
 </rapid-layout-region>

package/.genx/templates/react/component/component.filter.form.hbs

@@ -0,0 +1,6 @@
+import { UiSchema } from '@genesislcap/foundation-forms';
+
+{{#if tile.config.filterFormUiSchema~}}
+export const filterFormSchema: UiSchema = {{{ tile.config.filterFormUiSchema }}}
+{{/if}}
+

package/.genx/templates/react/component/component.hbs

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 {{#if tile.config.permissions.viewRight~}}
 import { getUser } from '@genesislcap/foundation-user';
 import { getViewUpdateRightComponent } from '../../../utils';
@@ -22,6 +23,9 @@ import { createFormSchema as createFormSchemaTile } from './{{pascalCase tile.ti
 {{#if tile.config.updateFormUiSchema~}}
 import { updateFormSchema as updateFormSchemaTile } from './{{pascalCase tile.title}}UpdateFormSchema';
 {{/if}}
+{{#if tile.config.filterFormUiSchema~}}
+import { filterFormSchema as filterFormSchemaTile } from './{{pascalCase tile.title}}FilterFormSchema';
+{{/if}}
 {{#if tile.config.columns~}}
 import { columnDefs as columnDefsTile } from './{{pascalCase tile.title}}ColumnDefs';
 {{/if}}
@@ -29,6 +33,15 @@ import { columnDefs as columnDefsTile } from './{{pascalCase tile.title}}ColumnD
 import { GridOptionsConfig } from '@genesislcap/rapid-grid-pro';
 import { gridOptions as gridOptionsTile } from './{{pascalCase tile.title}}GridOptions';
 {{/if}}
+{{#if tile.config.eventing.publishEventName}}
+import { actions } from '../../../store/store';
+{{/if}}
+{{#if tile.config.eventing.listener}}
+import { useSelector } from 'react-redux';
+import { selectors } from '../../../store/store';
+{{/if}}
+import { layoutComponentsMap, LayoutComponentNames } from '../../../store/store';
+import { getElementByTagFromComponent } from '../../../utils/goldenLayout.helper';
 import './{{pascalCase tile.title}}Component.css';
 
 {{#ifAny tile.metadata.comment tile.metadata.todo}}
@@ -41,32 +54,94 @@ import './{{pascalCase tile.title}}Component.css';
 {{/ifAny}}
 
 export const {{pascalCase tile.componentName}}: React.FC = () => {
-  {{#if tile.config.permissions.viewRight~}}
-  const hasUserPermission = (permissionCode: string): boolean => getViewUpdateRightComponent(getUser(), permissionCode);
-  {{else if tile.config.permissions.updateRight~}}
-  const hasUserPermission = (permissionCode: string): boolean => getViewUpdateRightComponent(getUser(), permissionCode);
+  {{#if tile.config.permissions.viewRight}}
+  const hasUserPermission = (permissionCode: string): string | boolean => getViewUpdateRightComponent(getUser(), permissionCode);
+  {{else if tile.config.permissions.updateRight}}
+  const hasUserPermission = (permissionCode: string): string | boolean => getViewUpdateRightComponent(getUser(), permissionCode);
+  {{/if}}
+  {{#if tile.config.eventing.publishEventName}}
+  const handleRowSelection = (e: any) => {
+    const selectedRows = e.api.getSelectedRows();
+    if (!selectedRows || !selectedRows.length) {
+      actions.eventing.publish{{pascalCase tile.config.eventing.publishEventName}}(null);
+      return;
+    }
+    const { TIMESTAMP, RECORD_ID, ROW_REF, ...data } = selectedRows[0];
+    actions.eventing.publish{{pascalCase tile.config.eventing.publishEventName}}(data);
+  };
   {{/if}}
-  {{#if tile.config.createFormUiSchema~}}
+  {{#if tile.config.createFormUiSchema}}
   const createFormSchema: typeof createFormSchemaTile = createFormSchemaTile;
   {{/if}}
-  {{#if tile.config.uischema~}}
+  {{#if tile.config.uischema}}
   const uischema: typeof createFormSchemaTile = createFormSchemaTile;
   {{/if}}
-  {{#if tile.config.updateFormUiSchema~}}
+  {{#if tile.config.updateFormUiSchema}}
   const updateFormSchema: typeof updateFormSchemaTile = updateFormSchemaTile;
   {{/if}}
-  {{#if tile.config.columns~}}
+  {{#if tile.config.filterFormUiSchema}}
+  const filterFormSchema: typeof filterFormSchemaTile = filterFormSchemaTile;
+  {{/if}}
+  {{#if tile.config.columns}}
   const columnDefs: typeof columnDefsTile = [...columnDefsTile];
   {{/if}}
-  {{#if tile.config.gridOptions~}}
-  const deferredGridOptions: { onRowClicked: GridOptionsConfig.onRowClicked } = { onRowClicked: gridOptionsTile?.onRowClicked  }
+  {{#ifAny tile.config.gridOptions tile.config.eventing.publishEventName}}
+  const gridOptions: { {{#if tile.config.gridOptions}}onRowClicked: GridOptionsConfig.onRowClicked, {{/if}}{{#if tile.config.eventing.publishEventName}}onSelectionChanged: any, rowSelection: 'multiple' | 'single'{{/if}} } = {
+    {{#if tile.config.gridOptions}}
+    onRowClicked: gridOptionsTile?.onRowClicked,
+    {{/if}}
+    {{#if tile.config.eventing.publishEventName}}
+    onSelectionChanged: handleRowSelection,
+    rowSelection: 'single',
+    {{/if}}
+  }
+  {{/ifAny}}
+  const datasourceConfig: { isSnapshot?: boolean, pollingInterval?: string, requestAutoSetup?: string, criteria?: string } = {
+    {{#if tile.config.snapshot}}
+    isSnapshot: {{ tile.config.snapshot }},
+    {{/if}}
+    {{#if tile.config.reqrep}}
+    pollingInterval: '5000',
+    requestAutoSetup: 'false',
+    {{/if}}
+    {{#if tile.config.eventing.listener}}
+    criteria: useSelector(selectors.eventing.getCriteriaFor{{pascalCase tile.title}}),
+    {{/if}}
+  }
+  {{#if tile.componentType}}
+  {{#ifEquals tile.componentType 'grid'}}
+  useEffect(() => {
+    const componentElement = layoutComponentsMap.get(LayoutComponentNames.{{constantCase tile.componentName}});
+    const componentDatasource = componentElement ? getElementByTagFromComponent(componentElement, 'grid-pro-genesis-datasource') : undefined;
+
+    if (componentDatasource) {
+      {{#if tile.config.eventing.listener}}
+      componentDatasource.criteria = datasourceConfig.criteria;
+      {{/if}}
+      {{#if tile.config.reqrep}}
+      componentDatasource.requestAutoSetup = datasourceConfig.requestAutoSetup;
+      componentDatasource.pollingInterval = datasourceConfig.pollingInterval;
+      {{/if}}
+    }
+  }, [datasourceConfig]);
+  {{/ifEquals}}
   {{/if}}
-  {{#if tile.config.reqrep~}}
-  const reqrep: { pollingInterval: number } = { pollingInterval: 5000, requestAutoSetup: false };
+  {{#if tile.componentType}}
+  {{#ifEquals tile.componentType 'manager'}}
+  useEffect(() => {
+    const componentElement = layoutComponentsMap.get(LayoutComponentNames.{{constantCase tile.componentName}});
+    const componentDatasource = componentElement ? getElementByTagFromComponent(componentElement, 'entity-management') : undefined;
+
+    if (componentDatasource) {
+      componentDatasource.datasourceConfig = datasourceConfig;
+    }
+  }, [datasourceConfig]);
+  {{/ifEquals}}
   {{/if}}
-  {{#if tile.config.type~}}
+
+  {{#if tile.config.type}}
   const chartConfig: {
-    {{#ifEquals tile.config.type 'pie'~}}
+    {{#ifEquals tile.config.type 'pie'}}
     radius: number;
     angleField: string;
     colorField: string;
@@ -75,7 +150,7 @@ export const {{pascalCase tile.componentName}}: React.FC = () => {
     yField: string;
     {{/ifEquals}}
   } = {
-    {{#ifEquals tile.config.type 'pie'~}}
+    {{#ifEquals tile.config.type 'pie'}}
     radius: 0.75,
     angleField: 'value',
     colorField: 'groupBy',