diff --git a/CodeTree/Innovator/Client/Modules/components/treeGrid/treeGridTemplates.js b/CodeTree/Innovator/Client/Modules/components/treeGrid/treeGridTemplates.js new file mode 100644 index 0000000..3f607db --- /dev/null +++ b/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; diff --git a/Imports/TGV_Sample/Import/rb_TreeGridViewDefinition/Package Structure.xml b/Imports/TGV_Sample/Import/rb_TreeGridViewDefinition/Package Structure.xml index a56a9d5..ccbf4a4 100644 --- a/Imports/TGV_Sample/Import/rb_TreeGridViewDefinition/Package Structure.xml +++ b/Imports/TGV_Sample/Import/rb_TreeGridViewDefinition/Package Structure.xml @@ -1,6 +1,8 @@  Display a tree grid view of a PackageDefinition's contents + 100 + 2 124F907FB9B7435B988B8E9AE0071F3C Package Structure @@ -15,7 +17,10 @@ Text - {"id": "INVALID_ID_VALUE", "type": "PackageDefinition"}{PackageDefinition.name} + { + "id": "INVALID_ID_VALUE", + "type": "{PackageDefinition.name}" +} 128 A9568095447E4BF3A33CFFE608D18B3C @@ -23,7 +28,10 @@ Text - {"id": "INVALID_ID_VALUE", "type": "PackageGroup"}{PackageGroup.name} + { + "id": "INVALID_ID_VALUE", + "type": "{PackageGroup.name}" +} 256 A9568095447E4BF3A33CFFE608D18B3C @@ -31,7 +39,15 @@ Text - {"id": "INVALID_ID_VALUE", "type": "PackageElement"}{PackageElement.name} + { + "id": "INVALID_ID_VALUE", + "type": "{PackageElement.name}", + "styles": + { + "background-color": "#77ee77", + "font-weight": "bold" + } +} 384 A9568095447E4BF3A33CFFE608D18B3C @@ -50,7 +66,12 @@ Item - + { + "styles": + { + "background-color": "#bbffbb" + } +} 128 9FB168EC5A1844988D4D0E8F47CCD2B9 diff --git a/README.md b/README.md index 538e105..a41bf57 100644 --- a/README.md +++ b/README.md @@ -4,22 +4,6 @@ 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! @@ -27,12 +11,20 @@ Project | Aras ### 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** diff --git a/Screenshots/screenshot.png b/Screenshots/screenshot.png index 923ae47..8c3d6b3 100644 Binary files a/Screenshots/screenshot.png and b/Screenshots/screenshot.png differ