Workflows

This demos shows how to use DataViewsJS and simple grouping to implement a workflow for objectives, allowing the user to check specific tasks in order to move them to the next status

<p>Workflows can help eliminate repetitive tasks and focus on what matters most. This demos shows how to use DataViewsJS and simple grouping to implement a workflow for objectives, allowing the user to check specific tasks in order to move them to the next status.</p>
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Showcase/Workflows/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="custom presenters, custom headers" /> <meta name="description" content="This demos shows how to use DataViewsJS and simple grouping to implement a workflow for objectives, allowing the user to check specific tasks in order to move them to the next status" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Workflows | Showcase | GrapeCity DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <!-- Google Tag Manager --> <script> (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ'); </script> <!-- End Google Tag Manager --> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E674186349827489#B0LYWQMpFdP3WSHlVaGdjTFtyLCxUQjdFV5MHey9kTyBnY0pkY6tWcr34caJjSPlEVlR6QpJnZEdjSj9kbkRUZChzMsRFS99mN4ZGO72yK7FXe5tmN59Eai5UM7dEVvgUeYN5MqdUTIpWTpBnSTJEWv24YwoFWr9mWEl6UNVmVMxUd5ckUQdlUNV4MDhENaV5KNNWbJtiSwFUYCVUax4GUuBjZDN7T5dWdDpFNyJjSxJkes3mUt94QrdnMK5mZORGeFZ4QyFTMmdWOWdlMmJ4ZJhTS5MmZatyZ7k5c0JXVB3mWVNke7AFRiojITJCLikjNBNjNzcjI0ICSiwSN8AjN9YjMwUTM0IicfJye35XX3JSWUVVOiojIDJCLiEjdgMlSzdXZpZVY4FGRiojIOJyebpjIkJHUiwiI9MDMykDMggDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WSgkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI9gDN7IDO9QzM6gTM4cjNiojIklkI1pjIEJCLi4TPn3UZuJ7cPZTW5hUMtN7MJN6aQFnT5gmd9FEZ4EETlFmW63kU8IGdiRGTJZle5UDbZJHTR34T0JzZoZmbalXQwNmM8EndEFEdSVlMiVnckFmQUJTOahmc7AzRHhlU4I4Vs3kN6lHaHR4LuhWULNIe', SJS_LICENSE_KEY: '*.grapecity.com,E613631884219496#B0qRgJHWSJ7NyBlc8BjNMRHW7g7YldTZXFTQuFnW4hVOCplVSlVV09ERlhEZuVTVKlTazE4Q6VGSw2CdWZUWSVmbjVXbrxmWFVWR8ZzQro7U84WMGdlbuVHb73kS5kjUTN4NvFVdLdXWVR4Nox6Z7UUSysEcXJEMsN6bDN4TxMDVwVmWBRzKxhkTzAXTaJmdD3CRFJTd8R4R6M5RklWa6oUaLlXMwR4R8ZUdtRWVxUUaQh6VXNDdEhlZ7FHR6QXTPJTVvkWcyZnbSdHRtZHcYF6TKN4axYGcZNjTDF7TvFTTr24VqZjVHVjcLd7QkRmdNxkI0IyUiwiI5gDOEF4QGVjI0ICSiwiMzkTO9kTOyMTM0IicfJye35XX3JSSGljQiojIDJCLiITMuYHITpEIkFWZyB7UiojIOJyebpjIkJHUiwiI4MDMyEDMgkDM8ATOxAjMiojI4J7QiwiIt36YukHdpNWZwFmcn9iKiojIz5GRiwiIj9WagkHdpNUZwFmcHJiOiEmTDJCLlVnc4pjIsZXRiwiI6kDN9EjM4gDOxMjNzEjNiojIklkIs4XZzxWYmpjIyNHZisnOiwmbBJye0ICRiwiI34TQ72kNBV6YXpXdGxGWxdHcol4MyUGUHJVbQVHRx44Sw84YxRkS4QnZadDNmhWWxV5QxFlTlZEbBJ5N8gUNQlDb7J6Kl36YHVnb4NGN92UMFdlNORFU8VDSaFlQSVlS4EHTrA5Ohh', }, }; </script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <!-- Google Tag Manager (noscript) --> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WT462SJ" height="0" width="0" style="display: none; visibility: hidden;" ></iframe ></noscript> <!-- End Google Tag Manager (noscript) --> <noscript>You need to enable JavaScript to run this app.</noscript> <div class="main-container"> <div id="grid"></div> </div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError( 'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.' ); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === 'string') return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === 'Object' && o.constructor) n = o.constructor.name; if (n === 'Map' || n === 'Set') return Array.from(n); if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _iterableToArray(iter) { if (typeof Symbol !== 'undefined' && Symbol.iterator in Object(iter)) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } // presenters var userPicPresenter = '<img class="pic" title="{{=it.assignee}}" src="{{=it.assigneeImage}}" />'; var taskPresenter = '\n <span class="icon {{?it.completed}}icon-checked{{?}} fa fa-check" onclick="completeTask(\'{{=it.id}}\')"></span>\n <span class="label">{{=it.task}}</span>\n'; var cols = [ { id: 'task', caption: 'Task', dataField: 'task', width: '*', presenter: taskPresenter, }, { id: 'dueDate', caption: 'Due Date', dataField: 'dueDate', align: 'right', width: 120, }, { id: 'assigneeImage', caption: 'Assignee', dataField: 'assigneeImage', presenter: userPicPresenter, width: 54, }, { id: 'assignee', caption: 'Assignee', dataField: 'assignee', visible: false, }, { id: 'completed', caption: 'Completed', dataField: 'completed', visible: false, }, ]; // clone data var demoData = _toConsumableArray(data); // layout var layout = new GC.DataViews.GridLayout({ allowSorting: false, allowGrouping: false, allowColumnReorder: false, allowColumnResize: false, rowHeight: 44, showColHeader: false, showRowHeader: false, selectionMode: 'none', grouping: [ { field: 'name', header: { height: 56, template: '<div class="group"><span>{{=it.name}}</span></div>', }, footer: { visible: false, }, collapsed: false, }, ], }); var dataView = new GC.DataViews.DataView(document.getElementById('grid'), demoData, cols, layout); // focus data.view by default document.getElementById('grid').focus(); // event handlers window.completeTask = function (id) { var dataViewItems = dataView.data.getItems(); var item = dataViewItems.find(function (entry) { return entry.id === id; }); if (item) { var original = data.find(function (t) { return t.id === id; }); dataView.data.updateItem( item.sourceIndex, Object.assign({}, item.dataItem, { name: item.completed ? original.name : 'Completed', completed: !item.completed, }) ); } };
var data = [ { id: '001', name: 'Standing agenda', task: 'Review pipeline', assignee: 'Rose C Engstrom', assigneeImage: 'https://i.pravatar.cc/32?img=1', dueDate: 'Tomorrow', completed: false, }, { id: '002', name: 'Standing agenda', task: 'Approved budget', assignee: 'Rose C Engstrom', assigneeImage: 'https://i.pravatar.cc/32?img=2', dueDate: 'Tomorrow', completed: false, }, { id: '003', name: 'Review revenue', task: 'Media plan', assignee: 'Andrew Y Forbis', assigneeImage: 'https://i.pravatar.cc/32?img=3', dueDate: 'Tomorrow', completed: false, }, { id: '004', name: 'Review revenue', task: 'Overall goals and success metrics', assignee: 'Andrew Y Forbis', assigneeImage: 'https://i.pravatar.cc/32?img=4', dueDate: 'Tomorrow', completed: false, }, { id: '005', name: 'New topics', task: 'Customizable sales deck template', assignee: 'Pamela R Gardner', assigneeImage: 'https://i.pravatar.cc/32?img=5', dueDate: 'Tomorrow', completed: false, }, { id: '006', name: 'New topics', task: 'New messaging framework', assignee: 'James S Dock', assigneeImage: 'https://i.pravatar.cc/32?img=6', dueDate: 'Tomorrow', completed: false, }, { id: '007', name: 'New topics', task: 'Team awards', assignee: 'Douglas I Graham', assigneeImage: 'https://i.pravatar.cc/32?img=7', dueDate: 'Tomorrow', completed: false, }, { id: '008', name: 'Follow up', task: 'Prepare SAM numbers', assignee: 'Caroline T Decaro', assigneeImage: 'https://i.pravatar.cc/32?img=8', dueDate: 'Friday', completed: false, }, { id: '009', name: 'Follow up', task: 'Discuss candidates for Sales Manager', assignee: 'Viola M Rosa', assigneeImage: 'https://i.pravatar.cc/32?img=9', dueDate: 'May 28', completed: false, }, { id: '010', name: 'Follow up', task: 'Job analysis of sales representative', assignee: 'Dennis J Butler', assigneeImage: 'https://i.pravatar.cc/32?img=10', dueDate: 'April 12', completed: false, }, ];
.main-container { overflow: hidden; height: 100%; } .wrapper { position: relative; height: 100%; } .grid-container { height: 100%; } .grid-container #grid { height: 100%; } .gc-viewport { box-sizing: border-box; } .gc-group-header-row.gc-row { display: flex; align-items: center; flex-direction: row; } .gc-row { display: flex; align-items: center; flex-direction: row; } .gc-group-header-row { background-color: transparent; color: inherit; border-bottom: 2px solid; align-items: flex-end; } .gc-cell-border { border-right: transparent; } .gc-cell { padding: 6px 10px; display: inherit !important; } .pic { width: 32px; height: 32px; display: block; border-radius: 50%; } .group { font-size: 1.5rem; font-weight: 600; margin-left: 10px; margin-bottom: 0; } .icon { color: grey; border-radius: 50%; width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, 0.25); display: inline-flex; align-items: center; justify-content: center; margin-right: 0.75em; cursor: pointer; } .icon:hover { border-color: #2e69dc; color: #2e69dc; } .icon.icon-checked { background-color: #25e8c8; border-color: transparent; color: white; } .icon.icon-checked:hover { background-color: #28ceb2; } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNob3djYXNlL1dvcmtmbG93cy9wdXJlanMvc3R5bGVzLnNjc3MiLCJTaG93Y2FzZS9Xb3JrZmxvd3MvcHVyZWpzL3N0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxnQkFBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLGtCQUFBO0VBQ0EsWUFBQTtBQ0NGOztBREVBO0VBQ0UsWUFBQTtBQ0NGO0FEQ0U7RUFDRSxZQUFBO0FDQ0o7O0FER0E7RUFDRSxzQkFBQTtBQ0FGOztBREdBO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0EsbUJBQUE7QUNBRjs7QURHQTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLG1CQUFBO0FDQUY7O0FER0E7RUFDRSw2QkFBQTtFQUNBLGNBQUE7RUFDQSx3QkFBQTtFQUNBLHFCQUFBO0FDQUY7O0FER0E7RUFDRSx5QkFBQTtBQ0FGOztBREdBO0VBQ0UsaUJBQUE7RUFDQSwyQkFBQTtBQ0FGOztBREdBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0Esa0JBQUE7QUNBRjs7QURHQTtFQUNFLGlCQUFBO0VBQ0EsZ0JBQUE7RUFDQSxpQkFBQTtFQUNBLGdCQUFBO0FDQUY7O0FER0E7RUFDRSxXQUFBO0VBQ0Esa0JBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLHFDQUFBO0VBQ0Esb0JBQUE7RUFDQSxtQkFBQTtFQUNBLHVCQUFBO0VBQ0Esb0JBQUE7RUFDQSxlQUFBO0FDQUY7QURFRTtFQUNFLHFCQUFBO0VBQ0EsY0FBQTtBQ0FKO0FER0U7RUFDRSx5QkFBQTtFQUNBLHlCQUFBO0VBQ0EsWUFBQTtBQ0RKO0FESUU7RUFDRSx5QkFBQTtBQ0ZKIiwiZmlsZSI6IlNob3djYXNlL1dvcmtmbG93cy9wdXJlanMvc3R5bGVzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5tYWluLWNvbnRhaW5lciB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLndyYXBwZXIge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmdyaWQtY29udGFpbmVyIHtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gICNncmlkIHtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gIH1cbn1cblxuLmdjLXZpZXdwb3J0IHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cblxuLmdjLWdyb3VwLWhlYWRlci1yb3cuZ2Mtcm93IHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbn1cblxuLmdjLXJvdyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG59XG5cbi5nYy1ncm91cC1oZWFkZXItcm93IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICBib3JkZXItYm90dG9tOiAycHggc29saWQ7XG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbn1cblxuLmdjLWNlbGwtYm9yZGVyIHtcbiAgYm9yZGVyLXJpZ2h0OiB0cmFuc3BhcmVudDtcbn1cblxuLmdjLWNlbGwge1xuICBwYWRkaW5nOiA2cHggMTBweDtcbiAgZGlzcGxheTogaW5oZXJpdCAhaW1wb3J0YW50O1xufVxuXG4ucGljIHtcbiAgd2lkdGg6IDMycHg7XG4gIGhlaWdodDogMzJweDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbn1cblxuLmdyb3VwIHtcbiAgZm9udC1zaXplOiAxLjVyZW07XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG4gIG1hcmdpbi1sZWZ0OiAxMHB4O1xuICBtYXJnaW4tYm90dG9tOiAwO1xufVxuXG4uaWNvbiB7XG4gIGNvbG9yOiBncmV5O1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIHdpZHRoOiAyNHB4O1xuICBoZWlnaHQ6IDI0cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMC4yNSk7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgbWFyZ2luLXJpZ2h0OiAwLjc1ZW07XG4gIGN1cnNvcjogcG9pbnRlcjtcblxuICAmOmhvdmVyIHtcbiAgICBib3JkZXItY29sb3I6ICMyZTY5ZGM7XG4gICAgY29sb3I6ICMyZTY5ZGM7XG4gIH1cblxuICAmLmljb24tY2hlY2tlZCB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzI1ZThjODtcbiAgICBib3JkZXItY29sb3I6IHRyYW5zcGFyZW50O1xuICAgIGNvbG9yOiB3aGl0ZTtcbiAgfVxuXG4gICYuaWNvbi1jaGVja2VkOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMjhjZWIyO1xuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi53cmFwcGVyIHtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBoZWlnaHQ6IDEwMCU7XG59XG5cbi5ncmlkLWNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbn1cbi5ncmlkLWNvbnRhaW5lciAjZ3JpZCB7XG4gIGhlaWdodDogMTAwJTtcbn1cblxuLmdjLXZpZXdwb3J0IHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbn1cblxuLmdjLWdyb3VwLWhlYWRlci1yb3cuZ2Mtcm93IHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbn1cblxuLmdjLXJvdyB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGZsZXgtZGlyZWN0aW9uOiByb3c7XG59XG5cbi5nYy1ncm91cC1oZWFkZXItcm93IHtcbiAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiBpbmhlcml0O1xuICBib3JkZXItYm90dG9tOiAycHggc29saWQ7XG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcbn1cblxuLmdjLWNlbGwtYm9yZGVyIHtcbiAgYm9yZGVyLXJpZ2h0OiB0cmFuc3BhcmVudDtcbn1cblxuLmdjLWNlbGwge1xuICBwYWRkaW5nOiA2cHggMTBweDtcbiAgZGlzcGxheTogaW5oZXJpdCAhaW1wb3J0YW50O1xufVxuXG4ucGljIHtcbiAgd2lkdGg6IDMycHg7XG4gIGhlaWdodDogMzJweDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGJvcmRlci1yYWRpdXM6IDUwJTtcbn1cblxuLmdyb3VwIHtcbiAgZm9udC1zaXplOiAxLjVyZW07XG4gIGZvbnQtd2VpZ2h0OiA2MDA7XG4gIG1hcmdpbi1sZWZ0OiAxMHB4O1xuICBtYXJnaW4tYm90dG9tOiAwO1xufVxuXG4uaWNvbiB7XG4gIGNvbG9yOiBncmV5O1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIHdpZHRoOiAyNHB4O1xuICBoZWlnaHQ6IDI0cHg7XG4gIGJvcmRlcjogMXB4IHNvbGlkIHJnYmEoMCwgMCwgMCwgMC4yNSk7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgbWFyZ2luLXJpZ2h0OiAwLjc1ZW07XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cbi5pY29uOmhvdmVyIHtcbiAgYm9yZGVyLWNvbG9yOiAjMmU2OWRjO1xuICBjb2xvcjogIzJlNjlkYztcbn1cbi5pY29uLmljb24tY2hlY2tlZCB7XG4gIGJhY2tncm91bmQtY29sb3I6ICMyNWU4Yzg7XG4gIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gIGNvbG9yOiB3aGl0ZTtcbn1cbi5pY29uLmljb24tY2hlY2tlZDpob3ZlciB7XG4gIGJhY2tncm91bmQtY29sb3I6ICMyOGNlYjI7XG59Il19 */