Action Column

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.

<p>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 <strong>edit</strong> and <strong>details</strong> buttons to each row in a view.</p> <p>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 <strong>edit</strong> and <strong>details</strong>. Since the edit action is already defined in the DataViews library, no further configuration is needed. When clicked, the row enters edit mode and <strong>save</strong> and <strong>cancel</strong> buttons appear. The details button shows a window with all the row details. The button action, <strong>showDetails</strong>, is defined in the demo code.</p> <p>Try clicking on the <strong>edit</strong> button in a row to change the data, or the <strong>details</strong> button to show more information that isn't present in the row.</p>
<!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 | 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/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/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"> <!-- 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 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== */