Action Column | Features | MESCIUS DataViewsJS Demos

Columns can be customized with specific actions, whether those are built-in or custom, allowing further flexibility for user interaction. This example shows how you can implement custom actions in a column by adding edit and details buttons to each row in a view. Actions appear automatically as buttons, so you only need to name them in the column definition to make them appear. In our example, you can see that these buttons are edit and details. Since the edit action is already defined in the DataViews library, no further configuration is needed. When clicked, the row enters edit mode and save and cancel buttons appear. The details button shows a window with all the row details. The button action, showDetails, is defined in the demo code. Try clicking on the edit button in a row to change the data, or the details button to show more information that isn't present in the row.

<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/Columns/ActionColumn/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="columns, command" />
<meta
name="description"
content="Columns can be customized with specific actions, whether those are built-in or custom, allowing further flexibility for user interaction.  This example shows how you can implement custom actions in a column by adding **Edit** and **Details** buttons to each row in a view."
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Action Column | Features | 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/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/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></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 id="grid" class="grid"></div>
<script src="locale.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>

var cols = [
{
id: 'firstName',
caption: 'First Name',
dataField: 'firstName',
width: '*',
},
{
id: 'lastName',
caption: 'Last Name',
dataField: 'lastName',
width: '*',
},
{
id: 'score',
caption: 'Score',
dataField: 'score',
width: '*',
dataType: 'number',
},
{
id: 'position',
caption: 'Position',
dataField: 'position',
width: '*',
},
{
id: 'controlPanel',
action: [
{
name: 'edit',
handler: startEditing,
},
{
name: locale.details,
handler: showDetails,
},
],
width: 270,
},
];
function getDataView() {
return window.dataView || window.getControlByElement(document.body);
}
function showDetails(args) {
showDialog(args.dataItem);
}
function startEditing(args) {
var dataView = getDataView();
var hitInfo = args.hitInfo;
if (!dataView.isEditing) {
var cell = document.querySelector('#'.concat(args.rowID, ' .c').concat(hitInfo.column, ' .gc-action-area'));
cell.innerHTML = '<button class="gc-action" data-action="save">'
.concat(locale.save, '</button>\n      <button class="gc-action" data-action="cancel">')
.concat(locale.cancel, '</button>');
dataView.startEditing();
}
}
function showDialog(dataItem) {
var overlay = $('<div class="dialog-overlay"></div>');
var dialog = $(
'<div class="dialog-container">\n  <div class="dialog-header">\n    <span class="header-title">Applicant Details</span>\n    <div class="dialog-close-button"><span>&#x2715</span></div>\n  </div>\n  <div class="dialog-body">\n    <div class="name">'
.concat(dataItem.firstName, ' ')
.concat(dataItem.lastName, '</div>\n    <div class="position">')
.concat(dataItem.position, '</div>\n    <div class="advantage">')
.concat(dataItem.advantage, '</div>\n  </div>\n</div>')
);
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
$(document.body).append(overlay).append(dialog);
var containerRect = dialog[0].getBoundingClientRect();
var left = Math.max(0, parseInt((width - containerRect.width) / 2 + window.pageXOffset, 10));
var top = Math.max(0, parseInt((height - containerRect.height) / 2 + window.pageYOffset, 10));
dialog.css({
left: left,
top: top,
});
overlay.on('mousewheel', function () {
return false;
});
$('.dialog-close-button').on('click', function () {
overlay.remove();
dialog.remove();
});
}
var dataView = new GC.DataViews.DataView(
document.getElementById('grid'),
data,
cols,
new GC.DataViews.GridLayout({
rowHeight: 40,
colMinWidth: 100,
allowEditing: true,
})
); // focus data.view by default
document.getElementById('grid').focus();

// resumes
var data = [{
firstName: 'Alexa',
lastName: 'Wilder',
registeredDate: 'Oct 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. He can solve problems in a short time.'
}, {
firstName: 'Victor',
lastName: 'Wooten',
registeredDate: 'May 14, 2018',
score: 70,
position: 'Web Developer',
advantage: 'Positive and optimistic, always first to work on latest technology in company.'
}, {
firstName: 'Darrin',
lastName: 'Sweeney',
registeredDate: 'June 14, 2018',
score: 60,
position: '.NET Developer',
advantage: 'Loves games day, family day, and outings.'
}, {
firstName: 'Jen',
lastName: 'Coulter',
registeredDate: 'April 14, 2018',
score: '95',
position: 'Admin Assistant',
advantage: 'Very good communication skills.'
}, {
firstName: 'Ifeoma',
lastName: 'Mays',
registeredDate: 'April 14,2018',
score: 85,
position: 'Sales Manager',
advantage: 'Manages his team well. They are always ready to resolve conflict.'
}, {
firstName: 'Akeem',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 80,
position: 'Sales Manager',
advantage: 'Has experience in managing teams over 20 employees.'
}, {
firstName: 'Buffy',
lastName: 'Weber',
registeredDate: 'April 25, 2018',
score: 80,
position: 'Sales',
advantage: 'Is eager to communicate with others.'
}, {
firstName: 'Akeem',
lastName: 'Abdul',
registeredDate: 'April 14, 2018',
score: 80,
position: 'Web Developer',
advantage: 'Positive and optimistic, always first to work on latest technology in company.'
}, {
firstName: 'Buffy',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. He can solve problems quickly.'
}, {
firstName: 'Guy',
lastName: 'Wooten',
registeredDate: 'July 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'A lot of experience on latest technology.'
}, {
firstName: 'Gina',
lastName: 'Wilder',
registeredDate: 'Oct 14, 2018',
score: 70,
position: 'Web Developer',
advantage: 'Very smart. She can solve problems quickly.'
}, {
firstName: 'Guy',
lastName: 'Wooten',
registeredDate: 'May 14, 2018',
score: 90,
position: 'Sales',
advantage: 'Is eager to communicate with others Would be good at networking.'
}, {
firstName: 'Daryl',
lastName: 'Sweeney',
registeredDate: 'June 14, 2018',
score: 90,
position: 'Sales',
advantage: 'Love games day, family day, and outings.'
}, {
firstName: 'Sally',
lastName: 'Weber',
registeredDate: 'April 14, 2018',
score: 90,
position: 'Web Developer',
advantage: 'Very smart. She can solve problems quickly.'
}, {
firstName: 'Euna Lee',
lastName: 'Mays',
registeredDate: 'April 14,2018',
score: 90,
position: 'Admin Assistant',
advantage: 'HR department is good. They always ready to resolve confusions if any.'
}, {
firstName: 'Akeem',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 60,
position: 'Admin Assistant',
advantage: 'Manages his team well. They are always ready to resolve conflict.'
}, {
firstName: 'Buffy',
lastName: 'Weber',
registeredDate: 'April 25, 2018',
score: 65,
position: 'Admin Assistant',
advantage: 'Manages her team well. They are always ready to resolve conflict.'
}, {
firstName: 'Aaron',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 60,
position: '.NET Developer',
advantage: 'Very smart. He can solve problems quickly.'
}, {
firstName: 'Buffy',
lastName: 'Carr',
registeredDate: 'April 14, 2018',
score: 70,
position: '.NET Developer',
advantage: 'A lot of exposure on latest technology.'
}, {
firstName: 'Guy',
lastName: 'Junker',
registeredDate: 'July 14, 2018',
score: 80,
position: '.NET Developer',
advantage: 'A lot of exposure on latest technology.'
}];

var locale = { details: 'Details', save: 'Save', cancel: 'Cancel' };

.dialog-overlay {
background: rgba(55, 58, 71, 0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
.dialog-container {
background: #fff;
border: 1px solid #d3d3d3;
color: #777;
font-family: "Roboto", sans-serif;
font-weight: 300;
min-height: 200px;
position: absolute;
width: 300px;
z-index: 10000;
}
.gc-column-header-cell p {
margin: 0;
}
.dialog-header {
border-bottom: solid 1px #f1f1f1;
padding: 1em;
}
.dialog-header .header-title {
font-weight: bold;
}
.dialog-close-button {
border-radius: 10px;
color: #6a9f9f;
float: right;
text-align: center;
width: 20px;
}
.dialog-close-button:hover {
color: #406363;
cursor: pointer;
}
.dialog-body {
padding: 1em;
}
.dialog-body .name {
font-size: 20px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dialog-body .position {
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dialog-body .advantage {
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0NvbHVtbnMvQWN0aW9uQ29sdW1uL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0NvbHVtbnMvQWN0aW9uQ29sdW1uL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsaUNBQUE7RUFDQSxZQUFBO0VBQ0EsT0FBQTtFQUNBLGVBQUE7RUFDQSxNQUFBO0VBQ0EsV0FBQTtFQUNBLGFBQUE7QUNDRjs7QURFQTtFQUNFLGdCQUFBO0VBQ0EseUJBQUE7RUFDQSxXQUFBO0VBQ0EsaUNBQUE7RUFDQSxnQkFBQTtFQUNBLGlCQUFBO0VBQ0Esa0JBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0NGOztBREVBO0VBQ0UsU0FBQTtBQ0NGOztBREVBO0VBQ0UsZ0NBQUE7RUFDQSxZQUFBO0FDQ0Y7O0FERUE7RUFDRSxpQkFBQTtBQ0NGOztBREVBO0VBQ0UsbUJBQUE7RUFDQSxjQUFBO0VBQ0EsWUFBQTtFQUNBLGtCQUFBO0VBQ0EsV0FBQTtBQ0NGOztBREVBO0VBQ0UsY0FBQTtFQUNBLGVBQUE7QUNDRjs7QURFQTtFQUNFLFlBQUE7QUNDRjs7QURFQTtFQUNFLGVBQUE7RUFDQSxpQkFBQTtFQUNBLG1CQUFBO0VBQ0EsZ0JBQUE7RUFDQSx1QkFBQTtBQ0NGOztBREVBO0VBQ0Usa0JBQUE7RUFDQSxtQkFBQTtFQUNBLGdCQUFBO0VBQ0EsdUJBQUE7QUNDRjs7QURFQTtFQUNFLGdCQUFBO0VBQ0EsZ0JBQUE7RUFDQSx1QkFBQTtBQ0NGIiwiZmlsZSI6IkZlYXR1cmVzL0NvbHVtbnMvQWN0aW9uQ29sdW1uL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmRpYWxvZy1vdmVybGF5IHtcbiAgYmFja2dyb3VuZDogcmdiYSg1NSwgNTgsIDcxLCAwLjkpO1xuICBoZWlnaHQ6IDEwMCU7XG4gIGxlZnQ6IDA7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICB3aWR0aDogMTAwJTtcbiAgei1pbmRleDogOTk5OTtcbn1cblxuLmRpYWxvZy1jb250YWluZXIge1xuICBiYWNrZ3JvdW5kOiAjZmZmO1xuICBib3JkZXI6IDFweCBzb2xpZCAjZDNkM2QzO1xuICBjb2xvcjogIzc3NztcbiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCBzYW5zLXNlcmlmO1xuICBmb250LXdlaWdodDogMzAwO1xuICBtaW4taGVpZ2h0OiAyMDBweDtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB3aWR0aDogMzAwcHg7XG4gIHotaW5kZXg6IDEwMDAwO1xufVxuXG4uZ2MtY29sdW1uLWhlYWRlci1jZWxsIHAge1xuICBtYXJnaW46IDA7XG59XG5cbi5kaWFsb2ctaGVhZGVyIHtcbiAgYm9yZGVyLWJvdHRvbTogc29saWQgMXB4ICNmMWYxZjE7XG4gIHBhZGRpbmc6IDFlbTtcbn1cblxuLmRpYWxvZy1oZWFkZXIgLmhlYWRlci10aXRsZSB7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xufVxuXG4uZGlhbG9nLWNsb3NlLWJ1dHRvbiB7XG4gIGJvcmRlci1yYWRpdXM6IDEwcHg7XG4gIGNvbG9yOiAjNmE5ZjlmO1xuICBmbG9hdDogcmlnaHQ7XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgd2lkdGg6IDIwcHg7XG59XG5cbi5kaWFsb2ctY2xvc2UtYnV0dG9uOmhvdmVyIHtcbiAgY29sb3I6ICM0MDYzNjM7XG4gIGN1cnNvcjogcG9pbnRlcjtcbn1cblxuLmRpYWxvZy1ib2R5IHtcbiAgcGFkZGluZzogMWVtO1xufVxuXG4uZGlhbG9nLWJvZHkgLm5hbWUge1xuICBmb250LXNpemU6IDIwcHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcbn1cblxuLmRpYWxvZy1ib2R5IC5wb3NpdGlvbiB7XG4gIGZvbnQtc3R5bGU6IGl0YWxpYztcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG59XG5cbi5kaWFsb2ctYm9keSAuYWR2YW50YWdlIHtcbiAgbWFyZ2luLXRvcDogMTVweDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG59XG4iLCIuZGlhbG9nLW92ZXJsYXkge1xuICBiYWNrZ3JvdW5kOiByZ2JhKDU1LCA1OCwgNzEsIDAuOSk7XG4gIGhlaWdodDogMTAwJTtcbiAgbGVmdDogMDtcbiAgcG9zaXRpb246IGZpeGVkO1xuICB0b3A6IDA7XG4gIHdpZHRoOiAxMDAlO1xuICB6LWluZGV4OiA5OTk5O1xufVxuXG4uZGlhbG9nLWNvbnRhaW5lciB7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIGJvcmRlcjogMXB4IHNvbGlkICNkM2QzZDM7XG4gIGNvbG9yOiAjNzc3O1xuICBmb250LWZhbWlseTogXCJSb2JvdG9cIiwgc2Fucy1zZXJpZjtcbiAgZm9udC13ZWlnaHQ6IDMwMDtcbiAgbWluLWhlaWdodDogMjAwcHg7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgd2lkdGg6IDMwMHB4O1xuICB6LWluZGV4OiAxMDAwMDtcbn1cblxuLmdjLWNvbHVtbi1oZWFkZXItY2VsbCBwIHtcbiAgbWFyZ2luOiAwO1xufVxuXG4uZGlhbG9nLWhlYWRlciB7XG4gIGJvcmRlci1ib3R0b206IHNvbGlkIDFweCAjZjFmMWYxO1xuICBwYWRkaW5nOiAxZW07XG59XG5cbi5kaWFsb2ctaGVhZGVyIC5oZWFkZXItdGl0bGUge1xuICBmb250LXdlaWdodDogYm9sZDtcbn1cblxuLmRpYWxvZy1jbG9zZS1idXR0b24ge1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xuICBjb2xvcjogIzZhOWY5ZjtcbiAgZmxvYXQ6IHJpZ2h0O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIHdpZHRoOiAyMHB4O1xufVxuXG4uZGlhbG9nLWNsb3NlLWJ1dHRvbjpob3ZlciB7XG4gIGNvbG9yOiAjNDA2MzYzO1xuICBjdXJzb3I6IHBvaW50ZXI7XG59XG5cbi5kaWFsb2ctYm9keSB7XG4gIHBhZGRpbmc6IDFlbTtcbn1cblxuLmRpYWxvZy1ib2R5IC5uYW1lIHtcbiAgZm9udC1zaXplOiAyMHB4O1xuICBmb250LXdlaWdodDogYm9sZDtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG59XG5cbi5kaWFsb2ctYm9keSAucG9zaXRpb24ge1xuICBmb250LXN0eWxlOiBpdGFsaWM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufVxuXG4uZGlhbG9nLWJvZHkgLmFkdmFudGFnZSB7XG4gIG1hcmdpbi10b3A6IDE1cHg7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xufSJdfQ== */