google apps script - How do I make a Sidebar display values from cells? -

i have google sheet i'm using database of clients. there quite lot of variables (columns) need store per entry, thought easier view each entry if have sidebar display of values of active row.

example: if click cell c1, display values c1, c2, c3 , c4 in sidebar.

is possible? i've gotten far getting sidebar display cannot figure out how value cell , print sidebar.

thank in advance, i've reached dead end (very) limited intellect!

something this?

this add-on uses poller idea how poll google doc add-on call server function getrecord(). function grabs row of data selected, , returns showrecord() callback on client (javascript) side, handles presentation in sidebar.

it's not complete - watch todo comments. wonder if worth further developing , publishing?

code.gs

/**  * @onlycurrentdoc  limits script accessing current spreadsheet.  */  var sidebar_title = 'record viewer';  /**  * adds custom menu items show sidebar , dialog.  *  * @param {object} e event parameter simple onopen trigger.  */ function onopen(e) {   spreadsheetapp.getui()       .createaddonmenu()       .additem('view records', 'showsidebar')       .addtoui(); }  /**  * runs when add-on installed; calls onopen() ensure menu creation ,  * other initializion work done immediately.  *  * @param {object} e event parameter simple oninstall trigger.  */ function oninstall(e) {   onopen(e); }  /**  * opens sidebar. sidebar structure described in sidebar.html  * project file.  */ function showsidebar() {   var ui = htmlservice.createtemplatefromfile('sidebar')       .evaluate()       .setsandboxmode(htmlservice.sandboxmode.iframe)       .settitle(sidebar_title);   spreadsheetapp.getui().showsidebar(ui); }   /**  * returns active row.  *  * @return {object[]} headers & values of cells in row.  */ function getrecord() {   // retrieve , return information requested sidebar.   var sheet = spreadsheetapp.getactivesheet();   var data = sheet.getdatarange().getvalues();   var headers = data[0];   var rownum = sheet.getactivecell().getrow();   if (rownum > data.length) return [];   var record = [];   (var col=0;col<headers.length;col++) {     var cellval = data[rownum-1][col];     // dates must passed strings - use fixed format     if (typeof cellval == "object") {       cellval = utilities.formatdate(cellval, session.getscripttimezone() , "m/d/yyyy");     }     // todo: format cell values using sheetconverter library     record.push({ heading: headers[col],cellval:cellval });   }   return record; } 

sidebar.html

<!-- use templated html printing scriptlet import common stylesheet. --> <?!= htmlservice.createhtmloutputfromfile('stylesheet').getcontent(); ?>  <!-- below html code defines sidebar element structure. --> <div class="sidebar branding-below">   <p>   sidebar displays cells in row, "record".   </p>   <!-- div-table class used make group of divs behave table. -->   <div class="block div-table" id="sidebar-record-block">   </div>   <div class="block" id="sidebar-button-bar">   </div>   <div id="sidebar-status"></div> </div>  <!-- enter sidebar bottom-branding below. --> <div class="sidebar bottom">   <img alt="add-on logo" class="logo" width="25"       src="https://googledrive.com/host/0b0g1udyjgry6xzdjqwf4a1jyy1k/apps-script_2x.png">   <span class="gray branding-text">record viewer mogsdad</span> </div>  <!-- use templated html printing scriptlet import javascript. --> <?!= htmlservice.createhtmloutputfromfile('sidebarjavascript').getcontent(); ?> 

sidebarjavascript.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script>   /**    * run initializations on sidebar load.    */   $(function() {     // assign handler functions sidebar elements here, if needed.      // call server here retrieve information needed build     // dialog, if necessary.      // start polling updates             poll();   });    /**    * poll server-side function @ given interval, have    * results passed successhandler callback.    *    * https://stackoverflow.com/a/24773178/1677912    *    * @param {number} interval   (optional) time in ms between polls.    *                            default 2s (2000ms)    */   function poll(interval) {     interval = interval || 1000;     settimeout(function() {       google.script.run         .withsuccesshandler(showrecord)         .withfailurehandler(           function(msg, element) {             showstatus(msg, $('#button-bar'));             element.disabled = false;           })         .getrecord();     }, interval);   };    /**    * callback function display "record", or row of spreadsheet.    *    * @param {object[]}  array of field headings & cell values    */   function showrecord(record) {     if (record.length) {       (var = 0; < record.length; i++) {         // build field name on fly, formatted field-1234         var str = '' + i;         var fieldid = 'field-' + ('0000' + str).substring(str.length)          // if field # doesn't exist on page, create         if (!$('#'+fieldid).length) {           var newfield = $($.parsehtml('<div id="'+fieldid+'"></div>'));           $('#sidebar-record-block').append(newfield);         }          // replace content of field div new record         $('#'+fieldid).replacewith('<div id="'+fieldid+'" class="div-table-row"></div>');         $('#'+fieldid).append($('<div class="div-table-th">' + record[i].heading + '</div>'))                       .append('<div class="div-table-td">' + record[i].cellval + '</div>');       }     }      // todo: hide existing fields beyond current record length      //setup next poll     poll();   }    /**    * displays given status message in sidebar.    *    * @param {string} msg status message display.    * @param {string} classid message type (class id) message    *   should displayed as.    */   function showstatus(msg, classid) {     $('#sidebar-status').removeclass().html(msg);     if (classid) {       $('#sidebar-status').addclass(classid);     }   }  </script> 

stylesheet.html

<!-- css package applies google styling; should included. --> <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">  <style> label {   font-weight: bold; }  .branding-below {   bottom: 54px;   top: 0; }  .branding-text {   left: 7px;   position: relative;   top: 3px; }  .logo {   vertical-align: middle; }  .width-100 {   width: 100%;   box-sizing: border-box;   -webkit-box-sizing : border-box;‌   -moz-box-sizing : border-box; }  #sidebar-value-block, #dialog-elements {   background-color: #eee;   border-color: #eee;   border-width: 5px;   border-style: solid; }  #sidebar-button-bar, #dialog-button-bar {   margin-bottom: 10px; }  .div-table{   display:table;   width:auto; /*  background-color:#eee;   border:1px solid  #666666;*/   border-spacing:5px; } .div-table-row{   display:table-row;   width:auto;   clear:both; } .div-table-td, .div-table-th {   display:table-cell;            width:200px;            background-color:rgb(230, 230, 230);   } .div-table-th {   /*float:left;*/   font-weight: bold; } .div-table-td {   /*float:right;*/ } </style>