davids davids - 3 months ago 18
HTML Question

Using Apps Script to manipulate the html content in HtmlOutput

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?

Answer

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