Customize tree grid columns

CodeTree/Innovator/Client/Modules/components/treeGrid/treeGridTemplates.js

@@ -0,0 +1,140 @@
+import gridFormatters from '../grid/formatters';
+import gridTemplates from '../grid/templates';
+
+function treeGridTemplates() {
+	const levelClass = 'aras-grid-row-levelpad';
+	const levelFilledClass = levelClass + ' aras-grid-row-levelpad-filled';
+	const expandButtonClass = 'aras-treegrid-expand-button';
+	const minusClass = expandButtonClass + ' aras-icon-minus';
+	const plusClass = expandButtonClass + ' aras-icon-plus';
+	const loadingClass = expandButtonClass + ' aras-icon-loading';
+	const backgroundImage =
+		'radial-gradient(circle at 0 0, #9C9C9C 1px, transparent 1px, transparent 100%)';
+	const levelPaddingBackgroundoffset = 4.5;
+
+	const templates = {
+		getRowClasses: function(grid, row) {
+			let classes = 'aras-grid-row';
+			if (row.selected) {
+				classes += ' aras-grid-row_selected';
+			}
+
+			if (row.animations) {
+				classes += ' ' + row.animations;
+			}
+
+			const customClasses = grid.getRowClasses(row.id);
+			if (customClasses) {
+				classes += ' ' + customClasses;
+			}
+
+			return classes;
+		},
+		getCellTemplate: function(grid, row, head, value) {
+			const type = grid._getCellType(head.id, row.id, value, grid);
+			const cellMetadata = grid.getCellMetadata(head.id, row.id, type);
+			const formatter = gridFormatters[type];
+			const template = formatter
+				? formatter(head.id, row.id, value, grid, cellMetadata)
+				: {};
+
+			const cellStyles = getCellStyles(row.id, head.index, head.data.label);
+			if (!head.treeHeadView) {
+				return Object.assign(template, cellStyles ? { style:  cellStyles } : undefined);
+			}
+			let expandButtonClassName;
+			if (row.loading) {
+				expandButtonClassName = loadingClass;
+			} else {
+				expandButtonClassName = row.expanded ? minusClass : plusClass;
+			}
+
+			const backgroundWidth = grid.view.defaultSettings.levelPaddingMultiplier;
+			const bgPositions = (row.levelLines || []).reduce(function(
+				array,
+				elm,
+				index
+			) {
+				if (elm) {
+					array.push(index * backgroundWidth + levelPaddingBackgroundoffset);
+				}
+				return array;
+			},
+			[]);
+
+			const bgParameters = bgPositions.reduce(
+				function(prev, elm) {
+					prev.images.push(backgroundImage);
+					prev.positions.push(elm + 'px');
+					return prev;
+				},
+				{
+					images: [],
+					positions: []
+				}
+			);
+
+			return Object.assign(template, {
+				className: row.className,
+				children: [
+					{
+						tag: 'div',
+						className: 'aras-treegrid-cell-container',
+						children: ((row.levelLines || []).length
+							? [
+									{
+										tag: 'span',
+										className: levelFilledClass,
+										style: {
+											'background-image': bgParameters.images.join(','),
+											'background-position': bgParameters.positions.join(','),
+											width:
+												backgroundWidth * (row.levelLines || []).length + 'px'
+										}
+									}
+							  ]
+							: []
+						).concat([
+							{
+								tag: 'span',
+								className: levelFilledClass,
+								children: !row.data.children
+									? ''
+									: [
+											{
+												tag: 'div',
+												className: expandButtonClassName
+											}
+									  ]
+							},
+							{
+								tag: 'span',
+								className: template.className || '',
+								children: template.children || [value]
+							}
+						])
+					}
+				]
+			},
+			cellStyles ? { style:  cellStyles } : undefined);
+		}
+	};
+	return gridTemplates(templates);
+}
+
+function getCellStyles(rowId, index, columnName)
+{
+	try {
+		const data_object = mainPage._grid.getUserData(rowId, 'data_object');
+		var res = JSON.parse(data_object[index]);
+
+		return res ? res.styles : null;
+	}
+	catch
+	{
+		console.warn(`'Data Template' for some node in column called ${columnName} has not correct json format`);
+		return null;
+	}
+}
+
+export default treeGridTemplates;

Imports/TGV_Sample/Import/rb_TreeGridViewDefinition/Package Structure.xml

@@ -1,6 +1,8 @@
 <AML>
  <Item type="rb_TreeGridViewDefinition" id="643BBFE7BAD046AE8B393BC54920CD88" action="add">
   <description>Display a tree grid view of a PackageDefinition's contents</description>
+  <max_child_items>100</max_child_items>
+  <max_query_depth>2</max_query_depth>
   <query_definition keyed_name="Query Package Definitions" type="qry_QueryDefinition">124F907FB9B7435B988B8E9AE0071F3C</query_definition>
   <name>Package Structure</name>
   <Relationships>
@@ -15,23 +17,37 @@
     <Relationships>
      <Item type="rb_ColumnMapping" id="3799AC14220F4FE9B9B295EB5032E7BF" action="add">
       <cell_view_type>Text</cell_view_type>
-      <data_template>{"id": "INVALID_ID_VALUE", "type": "PackageDefinition"}{PackageDefinition.name}</data_template>
+      <data_template>{
+  "id": "INVALID_ID_VALUE",
+  "type": "{PackageDefinition.name}"
+}</data_template>
       <sort_order>128</sort_order>
       <source_id keyed_name="A9568095447E4BF3A33CFFE608D18B3C" type="rb_ColumnDefinition">A9568095447E4BF3A33CFFE608D18B3C</source_id>
       <template>{"text_template":"{PackageDefinition.name}"}</template>
       <tree_row_ref_id>F4561E763B2D4FC38F2A991A62240929</tree_row_ref_id>
      </Item>
      <Item type="rb_ColumnMapping" id="710413B80D124876B2178670446A144E" action="add">
       <cell_view_type>Text</cell_view_type>
-      <data_template>{"id": "INVALID_ID_VALUE", "type": "PackageGroup"}{PackageGroup.name}</data_template>
+      <data_template>{
+  "id": "INVALID_ID_VALUE",
+  "type": "{PackageGroup.name}"
+}</data_template>
       <sort_order>256</sort_order>
       <source_id keyed_name="A9568095447E4BF3A33CFFE608D18B3C" type="rb_ColumnDefinition">A9568095447E4BF3A33CFFE608D18B3C</source_id>
       <template>{"text_template":"{PackageGroup.name}"}</template>
       <tree_row_ref_id>8DF6CED7231C420C91F5D9B74DB87230</tree_row_ref_id>
      </Item>
      <Item type="rb_ColumnMapping" id="9870FC834C9543F99E5639C0B7B724A1" action="add">
       <cell_view_type>Text</cell_view_type>
-      <data_template>{"id": "INVALID_ID_VALUE", "type": "PackageElement"}{PackageElement.name}</data_template>
+      <data_template>{
+  "id": "INVALID_ID_VALUE",
+  "type": "{PackageElement.name}",
+  "styles":
+  {
+    "background-color": "#77ee77",
+    "font-weight": "bold"
+  }
+}</data_template>
       <sort_order>384</sort_order>
       <source_id keyed_name="A9568095447E4BF3A33CFFE608D18B3C" type="rb_ColumnDefinition">A9568095447E4BF3A33CFFE608D18B3C</source_id>
       <template>{"text_template":"{PackageElement.name}","icon":"../Images/Shaded.svg"}</template>
@@ -50,7 +66,12 @@
     <Relationships>
      <Item type="rb_ColumnMapping" id="30FDCEE107B841459CBD2918F81E62C9" action="add">
       <cell_view_type>Item</cell_view_type>
-      <data_template />
+      <data_template>{
+  "styles":
+  {
+    "background-color": "#bbffbb"
+  }
+}</data_template>
       <sort_order>128</sort_order>
       <source_id keyed_name="9FB168EC5A1844988D4D0E8F47CCD2B9" type="rb_ColumnDefinition">9FB168EC5A1844988D4D0E8F47CCD2B9</source_id>
       <template>{"text_template":"{PackageElement.element_id}","item_type_name":"{PackageElement.element_type}","item_id":"{PackageElement.element_id}"}</template>

README.md

@@ -4,35 +4,27 @@ This project includes a very simple demonstration of Aras Tree Grid View (TGV) f
 
 An upcoming Aras Labs blog post will walk through the steps of manually configuring a TGV and the underlying QueryDefinition.  
 
-## History
-
-Release | Notes
---------|--------
-[v1.1.0](https://github.com/ArasLabs/tree-grid-view-sample/releases/tag/v1.1.0) | Confirmed support for Aras 11.0 SP15.
-[v1.0.0](https://github.com/ArasLabs/tree-grid-view-sample/releases/tag/v1.0.0) | First release.
-
-#### Supported Aras Versions
-
-Project | Aras
---------|------
-[v1.1.0](https://github.com/ArasLabs/tree-grid-view-sample/releases/tag/v1.1.0) | 11.0 SP15, 11.0 SP14, 11.0 SP12, 11.0 SP11
-[v1.0.0](https://github.com/ArasLabs/tree-grid-view-sample/releases/tag/v1.0.0) | 11.0 SP12, 11.0 SP11
-
-> Warning: This package is not backwards-compatible with Innovator 11.0 SP10. 
-
 ## Installation
 
 #### Important!
 **Always back up your code tree and database before applying an import package or code tree patch!**
 
 ### Pre-requisites
 
-1. Aras Innovator installed (version 11.0 SP12)
+1. Aras Innovator installed (version 12.0)
 2. Aras Package Import Utility
 3. aras.labs.TGV_Sample package
+4. Code Tree overlay
 
 ### Install Steps
+# The Code Tree
+
+1. Backup your code tree and store the backup in a safe place.
+2. Copy the /Innovator/ folder in your local repository.
+3. Paste this folder to the root of your code tree.
+        This should be the same folder that contains the InnovatorServerConfig.xml.
 
+# The Database
 1. Backup your database and store the BAK file in a safe place.
 2. Open up the Aras Package Import tool.
 3. Enter your login credentials and click **Login**