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

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.
<!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: 'GrapeCity-Internal-Use-Only,GrapeCity,E195393772372914#B0KV4Ny56Vr5Wb7w6buJWeGRWb4NXUnNXRlFWWXl6SoN5VzVkYslmQ95WTENkTllVQzd4QhpEejdDNJZlWOp6M7oERQNnWspkaaB5QMhnR7dmUkRnVJR4L5cHTKNkZZdDbRBzZIxmSSR6NrpVQaVUQrBlc6ImYysSd4UlUEZGbw2kMl9UOzQVMId6ZXtUN83CO5RzaZt4VY5kM5pkUGpUUUV7UExUeGpUdTV5dFJ4bPhTc8pGeXJHWrkzNlFzdUtWTr5UQDdVckdGbSVUWr2yMPNzctZVRxEEW9lEbsZHUKJnVaRXT5p6Z0tWMqJGVrtSTIZnaopGSWZXbVNjY0hzQB5We4dnUr3ER8MkI0IyUiwiIGZUNwEkN5MjI0ICSiwSM9ETO6czNygTM0IicfJye#4Xfd5nIZRVV9IiOiMkIsISM6ByUKN7dllmVhRXYEJiOi8kI1tlOiQmcQJCLiEDMzATOwAyMwgDMwIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKsAnau26YukHdpNWZwFmcn9iKs86Yu46bj9Se4l6YlBXYydmLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLt36YukHdpNWZwFmcn9iKiojIz5GRiwiI9RXaDVGchJ7RiojIh94QiwSZ5JHd0ICb6VkIsICNxkjM7MjM7czM9MTN9EjI0ICZJJye0ICRiwiI34zZN3yZGNlUnJDe5wkQPVlcBh7SppmUNBlU9dWS7J4ZMRES4MTZkRXTxM7Uq5GeQdHcyFHVup6dQd6ZDpEVrNDSh9kbNdzZrl4dwdPQ', 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(o); 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 */