├── LICENSE
├── README.md
├── with-HtmlOutput
    ├── output-client.html
    └── output-server.gs
└── with-HtmlTemplate
    ├── template-client.html
    └── template-server.gs


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Zig Mandel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # htmlService-get-set-data
 2 | Send an initialization data object from server .gs to client .html.
 3 | <br>For Google Apps Script [HtmlService](https://developers.google.com/apps-script/guides/html/).
 4 | <br>
 5 | <br>This github contains simple, small functions and samples you can copy and paste to your projects.
 6 | <br>
 7 | <br>Two different methods: for [HtmlOutput](https://developers.google.com/apps-script/reference/html/html-output) and [HtmlTemplate](https://developers.google.com/apps-script/reference/html/html-template).
 8 | <br>Both methods safely store any (serializable) javascript object taking care of possible issues regarding security (code injection) or formatting (conflicts with html special characters in the data).
 9 | <br>
10 | <br>Both methods are more efficient than having the client call the server to get the data object after your initial Javasctipt+html skeleton loads in the client, which requires an aditional client-side call. See [google.script.run](https://developers.google.com/apps-script/guides/html/reference/run). You can use google.script.run to further communicate with the server (after a user action for example).
11 | 
12 | # Licence
13 | Free to use under the MIT Licence https://opensource.org/licenses/MIT
14 | 
15 | # Usage
16 | **Method #1, using templates**
17 | <br>How? Sets a template variable from .gs, then evaluates the template, which inserts the variable inside html javascript.
18 | <br>Advantages: if data is very large, this might be more efficient as it copies less data to the html output.
19 | <br>Disadvantages: requires to evaluate the template first (might be more server overhead). This disadvantage is not relevant if you are already using templates.
20 | <br>Sample: doGetWithTemplates in [template-server.gs](https://github.com/zmandel/htmlService-get-set-data/blob/master/with-HtmlTemplate/template-server.gs) and [template-client.html](https://github.com/zmandel/htmlService-get-set-data/blob/master/with-HtmlTemplate/template-client.html).
21 | <br>
22 | <br>
23 | **Method #2, without templates**
24 | <br>This method only uses htmlOutput.
25 | <br>How? Stored in an appended, hidden div. Data is stringified plus encoded in base64 to avoid conflicts with special HTML characters.
26 | <br>Advantages: does not require templates.
27 | <br>Disadvantages: If the data is very large, it will increase the HTML file size (about 33% overhead of data size in html compared with method #1). If that is a concern (when passing huge objects) you may use base94 or even base128 encoding but requires more code and can have issues, see http://stackoverflow.com/questions/6008047/why-dont-people-use-base128
28 | <br>Sample: doGetWithHtmlOutput in [output-server.gs](https://github.com/zmandel/htmlService-get-set-data/blob/master/with-HtmlOutput/output-server.gs) and [output-client.html](https://github.com/zmandel/htmlService-get-set-data/blob/master/with-HtmlOutput/output-client.html).
29 | * appendDataToHtmlOutput: append a javascript object to an htmlOutput from your .gs file.
30 | * getDataFromHtml: call it from your html file script to get your stored data
31 | 
32 | # Working sample script (identical to this repo)
33 | https://script.google.com/d/1bXkZpXnFlw9PUc10ecnb7Scq6ubXfGIrFy8xj33ffen4hw5s-STABaZY/edit?usp=sharing
34 | 
35 | # Author
36 | Zig Mandel https://developers.google.com/experts/people/sigmund-zig-mandel
37 | 


--------------------------------------------------------------------------------
/with-HtmlOutput/output-client.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <script>
 3 | 
 4 |     /**
 5 |     * getDataFromHtml
 6 |     *
 7 |     * Inputs
 8 |     * idData: optional. id for the data element. defaults to "mydata_htmlservice"
 9 |     *
10 |     * Returns
11 |     * The stored data object
12 |     */
13 |     function getDataFromHtml(idData) {
14 |         if (!idData)
15 |             idData = "mydata_htmlservice";
16 |         var dataEncoded = document.getElementById(idData).innerHTML;
17 |         var data = JSON.parse(atob(dataEncoded));
18 |         return data;
19 |     }
20 | 
21 | 
22 |     // sample usage of getDataFromHtml
23 |     function initialize() {
24 |         var data = getDataFromHtml();
25 |         document.getElementById("myTitle").innerText = data.first + " - " + data.last;
26 |         //or use jquery:  $("#myTitle").text(data.first + " - " + data.last);
27 |     }
28 | 
29 |     // use onload or use jquery to call your initialization after the document loads
30 |     window.onload = initialize;
31 | </script>
32 | <html>
33 | <body>
34 |     <H2 id="myTitle"></H2>
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/with-HtmlOutput/output-server.gs:
--------------------------------------------------------------------------------
 1 | /**
 2 | * appendDataToHtmlOutput
 3 | *
 4 | * Appends data to the given htmlOutput
 5 | *
 6 | * Inputs
 7 | * data: object to append
 8 | * htmlOutput: where to append
 9 | * idData: optional. id for the data element. defaults to "mydata_htmlservice"
10 | *
11 | * Returns
12 | * the same htmlOutput (for chaining)
13 | */
14 | function appendDataToHtmlOutput(data, htmlOutput, idData) {
15 |     if (!idData)
16 |         idData = "mydata_htmlservice";
17 | 
18 |     // data is encoded after stringifying to guarantee a safe string that will never conflict with the html.
19 |     // downside: increases the storage size by about 30%. If that is a concern (when passing huge objects) you may use base94
20 |     // or even base128 encoding but that requires more code and can have issues, see http://stackoverflow.com/questions/6008047/why-dont-people-use-base128
21 |     var strAppend = "<div id='" + idData + "' style='display:none;'>" + Utilities.base64Encode(JSON.stringify(data)) + "</div>";
22 |     return htmlOutput.append(strAppend);
23 | }
24 | 
25 | 
26 | // sample usage of appendDataToHtmlOutput
27 | function doGetWithHtmlOutput() {
28 |     var htmlOutput = HtmlService.createHtmlOutputFromFile('output-client.html')
29 |         .setSandboxMode(HtmlService.SandboxMode.IFRAME)
30 |         .setTitle('sample');
31 | 
32 |     // data can be any (serializable) javascript object.
33 |     // if your data is a native value (like a single number) pass an object like {num:myNumber}
34 |     var data = { first: "hello", last: "world" };
35 | 
36 |     // appendDataToHtmlOutput modifies the html and returns the same htmlOutput object
37 |     return appendDataToHtmlOutput(data, htmlOutput);
38 | }
39 | 
40 | 


--------------------------------------------------------------------------------
/with-HtmlTemplate/template-client.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <script>
 4 |     var data = <?!= JSON.stringify(dataFromServerTemplate) ?>; //Stores the data directly in the javascript code
 5 | 
 6 |     // sample usage
 7 |     function initialize() {
 8 |         document.getElementById("myTitle").innerText = data.first + " - " + data.last;
 9 |         //or use jquery:  $("#myTitle").text(data.first + " - " + data.last);
10 |     }
11 | 
12 |     // use onload or use jquery to call your initialization after the document loads
13 |     window.onload = initialize;
14 | </script>
15 | 
16 | 
17 | <html>
18 | <body>
19 |     <H2 id="myTitle"></H2>
20 | </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/with-HtmlTemplate/template-server.gs:
--------------------------------------------------------------------------------
 1 | 
 2 | // sample usage with templates
 3 | // does not use appendDataToHtmlOutput
 4 | function doGetWithTemplates() {
 5 |     var htmlTemplate = HtmlService.createTemplateFromFile('template-client.html');
 6 | 
 7 |     htmlTemplate.dataFromServerTemplate = { first: "hello", last: "world" };
 8 | 
 9 |     var htmlOutput = htmlTemplate.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
10 |         .setTitle('sample');
11 |     return htmlOutput;
12 | }
13 | 


--------------------------------------------------------------------------------