Menu
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?
643
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
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
