Using Apps Script to manipulate the html content in HtmlOutput

Question

I am using Apps Script and trying to create a Sidebar within my Google Sheet that displays the results of converting the contents to JSON.

This is the html for the page Sidebar:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <!-- The CSS package above applies Google styling to buttons and other elements. -->
    <style>
      .width-100 {
        width: 100%;
        height: 100%
      }
    </style>
  </head>
  <body>
    <div class="sidebar branding-below">
      <form>
        <div class="block form-group">
          <label for="json"><b>JSON</b></label>
          <textarea class="width-100" id="json" name="json" rows="10"></textarea>
        </div>
      </form>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
  </body>
</html>

I have previously created the desired JSON and am now attempting to set the contents of the textarea with the created JSON using this method:

function displayText_(text) {
  var html = HtmlService.createHtmlOutputFromFile('Sidebar')
  .setTitle('JSON Results');
  var contents = html.getContent();
  contents.getElementById('json').setText(text);
  html.setContent(contents);
  SpreadsheetApp.getUi().showSidebar(html);
}

Here is a sample JSON string for use with the answer:

var jsonString = {"someKey":"someValue","anotherKey":"anotherValue"}

I have tried using getElementById by connecting to html and to contents (my current approach). Nothing produces the desired results. I am guessing this is pretty simple, but have no idea how to manipulate the html from Apps Script.

I am pretty sure I could create the entire html content within Apps Script and replace the contents, but that is a hack and not easy to maintain.

Is there an easier way to do this?

Harold · Accepted Answer · 2016-08-15 17:44:04Z

3

for what I understood, What you are trying to achieve is to inject content from the server side in the client side. The function displayText_ is a server side function.
if so you could change the server side function for a function that may look like that: (instead of having simple client side file we will use a template file)

function displayText_(text) {
  var htmlTemplate = HtmlService.createTemplateFromFile('Sidebar');
  htmlTemplate.json = text;
  var html = htmlTemplate.evaluate().setTitle('JSON Results');
  SpreadsheetApp.getUi().showSidebar(html);
}

and on the client side you'll then need to change

<textarea class="width-100" id="json" name="json" rows="10"></textarea>

for

  <textarea class="width-100" id="json" name="json" rows="10"><?!=json?></textarea>

if you want to have a dynamical change then you should have a look at the client / server communication process here

answered Aug 15, 2016 at 17:44

Harold

3,3671 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davids Over a year ago

I figured it would be easy. Thanks!

BigglesZX Over a year ago

Was struggling to deal with a conversion from the now-deprecated uiapp today and this solved my problem (pretty much the exact same use-case) perfectly. Thank you!

Collectives™ on Stack Overflow

Using Apps Script to manipulate the html content in HtmlOutput

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related