davids davids - 1 year ago 66
HTML Question

Using Apps Script to manipulate the html content in HtmlOutput

I am using

Apps Script
and trying to create a
within my
Google Sheet
that displays the results of converting the contents to

This is the html for the page

<!DOCTYPE html>
<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. -->
.width-100 {
width: 100%;
height: 100%
<div class="sidebar branding-below">
<div class="block form-group">
<label for="json"><b>JSON</b></label>
<textarea class="width-100" id="json" name="json" rows="10"></textarea>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

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

function displayText_(text) {
var html = HtmlService.createHtmlOutputFromFile('Sidebar')
.setTitle('JSON Results');
var contents = html.getContent();

Here is a sample
string for use with the answer:

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

I have tried using
by connecting to
and to
(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 Source

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');

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

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


  <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