I have a google sheet where I have scripted a custom sidebar.

Within the sidebar, I want to display the value of column I within the active row.

I've managed to work out the script to store the variable 'I' when the sidebar is opened:

var hotelName = ""

function openSidebar() {
var html = HtmlService.createHtmlOutputFromFile('index');
SpreadsheetApp.getUi().showSidebar(html);
var ss=SpreadsheetApp.getActiveSpreadsheet();
var s=ss.getSheetByName("Contract Registry Document");
var row=s.getActiveCell().getRow();
var column=9;
hotelName = s.getRange(row, column).getValue();
Logger.log(hotelName);
}

However I now need this to appear in an empty DIV element in my sidebar. How do I export this variable?

UPDATE:

That works great. I've now added as well a button to the sidebar to refresh and what I want that to do is to update the script so that if the user has changed rows, the new hotel name will show. At the moment I've added this HTML:

 <div id="footer">

 <div><?= hotel ?></div>

 <p><i class="fa fa-refresh" aria-hidden="true" id="testing"></i></p>

 </div>

And this JQuery to the index file:

$("#testing").on('click', function buttonClick() {
google.script.run.buttonClick();
});

And for the function I just copied the original function:

function buttonClick() {
var ss=SpreadsheetApp.getActiveSpreadsheet();
var s=ss.getSheetByName("Contract Registry Document");
var row=s.getActiveCell().getRow();
var column=9;
var hotelName = s.getRange(row, column).getValue();

// get the html template after retrieving the values
var html_template = HtmlService.createTemplateFromFile('index');

// set the value for the index.html `hotel` placeholder/scriptlet
html_template.hotel = hotelName;

// evaluate the template
var sidebar_html = html_template.evaluate();

SpreadsheetApp.getUi().showSidebar(sidebar_html);

Logger.log(hotelName);
}

However, really I want the value of the cell to update asynchronously so that the sidebar doesn't re-load, just the hotel name...

Would this be possible??

Getting data from a spreadsheet on loading a sidebar

Don't forget to select the row first before displaying the sidebar.

code.gs

function openThisSideBar()
{
  var html = HtmlService.createHtmlOutputFromFile('hotel').setTitle('MySideBar');
  SpreadsheetApp.getUi().showSidebar(html);
}

function getHotel()
{
  var s=SpreadsheetApp.getActive().getSheetByName("Contract Registry Document");
  var row=s.getActiveCell().getRow();
  var n=Utilities.formatString('Your Hotel is named: %s',s.getRange(row, 9).getValue());
  return n;
}

function onOpen()
{
  SpreadsheetApp.getUi().createMenu('MyTools')
    .addItem('Open Sidebar', 'openThisSideBar')
    .addToUi();
}

hotel.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(function()
    {
       google.script.run
           .withSuccessHandler(updateHotel)
           .getHotel();
    });
    function updateHotel(name)
    {
       document.getElementById('hotel').innerHTML=name;
    }
    console.log('MyCode');
    </script>
  </head>
  <body>
   <div id="hotel"></div> 
  </body>
</html>

You can add your refresh like this:

<script>
function refresh()
    {
       google.script.run
          .withSuccessHandler(updateHotel)
          .getHotel();
    }
</script>

And the new html:

<input type="button" value="Refresh" onClick="refresh();" />

That way you needn't refresh the entire page but just the div.

Use Scriptlets with createTemplateFromFile() and evaluate(). Then use the printing scriptlets in the html file and set their value in your openSidebar()

function openSidebar() {
  var ss=SpreadsheetApp.getActiveSpreadsheet();
  var s=ss.getSheetByName("Contract Registry Document");
  var row=s.getActiveCell().getRow();
  var column=9;
  var hotelName = s.getRange(row, column).getValue();

  // get the html template after retrieving the values
  var html_template = HtmlService.createTemplateFromFile('index');

  // set the value for the index.html `hotel` placeholder/scriptlet
  html_template.hotel = hotelName;

  // evaluate the template
  var sidebar_html = html_template.evaluate();

  SpreadsheetApp.getUi().showSidebar(sidebar_html);

  Logger.log(hotelName);
}

index.html

<html>
  <body>
    <p>The hotel name is: <?= hotel ?></p>
  </body>
</html>

来源：https://stackoverflow.com/questions/47306725/use-variable-value-from-gs-file-in-custom-html-sidebar

标签

javascript

jquery

variables

google-apps-script

google-apps

Use variable value from .gs file in custom HTML sidebar

Getting data from a spreadsheet on loading a sidebar