Workflows | Showcase | MESCIUS DataViewsJS Demos

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 | MESCIUS 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" />
<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:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</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">
<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 */