How can I use a function that returns html within a string, inside a html template in google apps script ?
For example, here is my code.gs:
function doGet() {
return HtmlService.createTemplateFromFile('test').evaluate();
}
function getHtml(){
return "<b> hello there </b>";
}
and in my html file 'test.html' I have the following:
<html>
<?= getHtml() ?>
</html>
You will see the result is something like this:
How can I change this so it produces hello there in bold, without showing the tags ?
Many thanks
Use force-printing:
<?!= getHtml() ?>
as explained here.
Related
I'm building a UI for my Google sheet and I have written my .gs function that returns the value I want. I have also written the HTML dialog that shows the window I need.
I know how to fill the dialog with static text, but I don't know how to put the value returned from the .gs function to be printed out in the dialog.
HTML
<html>
<head>
<base target="_top">
</head>
<body>
I want to have the value returned from the .gs function visible here as text.
<select id="simple" name="simple">
<option> or even better here </option>
<option>another option</option>
<option>yet another option</option>
</select>
</body>
</html>
gs
function getCellContent() {
var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("MySheet");
var value = ss.getRange('A2').getValue();
return value;
};
I feel like I've read the whole internet and found nothing about such basic things.
You can use scriplets to print the value into your HTML. For example
<html>
<body>
<h1> Cell content: </h1>
<p> <?= getCellContent() ?> </p>
</body>
</html>
The solution was outside the code, I've attached.
There is another function which display the window on the screen. In my previous code it was:
.GS
var html = HtmlService.createHtmlOutputFromFile('Index');
But correctly it should appear like this:
var html = HtmlService.createTemplateFromFile('Index').evaluate();
Thanks for your patience.
I faced similar issue when I started with AppsScript. Plain html was rendering fine but scriplets inside the html was not rendering. The problem in my case was simple. Hers's a example that might be helpful for some.
So my Code.gs script contained:
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Menu')
.addItem('Open Html Dialog', 'openDialog')
.addToUi();
}
function getCellContent() {
return 'Some content';
}
function openDialog() {
var html = HtmlService.createTemplateFromFile('index')
.evaluate();
SpreadsheetApp
.getUi()
.showModalDialog(html, 'Dialog title');
}
And I had template named index.html
<body>
<h1>Content: <? getCellContent() ?></h1>
</body>
Note that the above was failing because I was using <? which is parsed by most templating engines as regular JavaScript statements (eg. loops, conditionals, etc) instead of <?= which is used for evaluating an expression (something you want to evaluate and output to html view). So this (<?=) worked:
<?= getCellContent() ?>
Has "Google Apps Script templates" been deprecated. When the showSidebar code is run below it displays the following in the sidebar:
Hello, World! The time is .
==========================
File: code.gs
function showSidebar() {
var ui = HtmlService.createHtmlOutputFromFile('index')
.setTitle('test');
SpreadsheetApp.getUi().showSidebar(ui);
}
======================
File: index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, World! The time is <?= new Date() ?>.
</body>
</html>
Here is the link to google documentation on apps script templates
https://developers.google.com/apps-script/guides/html/templates
No, templates have not been Deprecated.
Rather than use createHtmlOutputFromFile(), you must use createHtmlTemplateFromFile(), then evaluate the template with evaluate() to generate your HtmlOutput.
This process is shown in at the top of the documentation you linked.
I am currently working in project where I have to print a web page which is like a form containing details of the students. When I try to print the web page using window.print() the format of the page changes in the PDF.
How do I keep the original format of the web page in the PDF also??
Please help me! Thanks in advance.
jsPDF is able to use plugins. In order to enable it to print HTML, you have to include certain plugins and therefore have to do the following:
Go to jsPDF and download the latest Version.
Include the following Scripts in your project:
jspdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
If you want to ignore certain elements, you have to mark them with an ID, which you can then ignore in a special element handler of jsPDF. Therefore your HTML should look like this:
<!DOCTYPE html>
<html>
<body>
<p id="ignorePDF">don't print this to pdf</p>
<div>
<p><font size="3" color="red">print this to pdf</font></p>
</div>
</body>
</html>
Then you use the following JavaScript code to open the created PDF in a PopUp:
var doc = new jsPDF();
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
source,
15,
15,
{
'width': 180,'elementHandlers': elementHandler
});
doc.output("dataurlnewwindow");
For me this created a nice and tidy PDF that only included the line 'print this to pdf'.
I like to generate the Google Form using my own template engine. Unfortunatelly in the basic theme you can change only the background image, fonts, color etc is allowed. I like to have a nice HTML page in "bootstrap" style. So far I can see I could do this using Google Script. The script should open the form and generate HTML template (like example below).
Does someone know how to generate correctly this form? Which url to submit should I use? Hidden parameters?
Thanks for any comments.
Code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
};
function getData() {
var form = FormApp.openById('....................');
return form;
}
index.html
<? var data = getData(); ?>
<? var items = data.getItems(); ?>
<form action="https://docs.google.com/forms/d/..................../formResponse" method="POST">
<!-- .................... stands for form id //-->
<ul>
<? for (var i = 0; i < items.length; i++) { ?>
<li><?= items[i].getTitle(); ?></li>
<? } ?>
</ul>
<input type="submit"/>
</form>
You can use this Google Form HTML Exporter tool
http://stefano.brilli.me/google-forms-html-exporter/ all you have to provide is link to the Google Form.
I have created a web page through the Html Services api in google apps script. In the script, I have one google script(.gs) file and two html files(.html). This script is published on web. To display html file on web I used following function in .gs file:
function doGet() { //Published on web
return HtmlService.createTemplateFromFile('<htmlFile_1>').evaluate();
}
function doProcess() {
return HtmlService.createTemplateFromFile('<htmlFile_2>').evaluate();
}
doGet() is returning this Html file on the web. Now I want to display another Html File by replacing this file. So, I used following in htmlFile_1:
//htmlFile_1.html
<html>
<head>
<script>
function loadMainHtmlPage(){
google.script.run.doProcess(); //calling another function in .gs file
setTimeout(function(){hello()},4000);
}
function hello(){
alert("hiii");
document.getElementById("loading").style.display="none";}
</script>
</head>
<body onload="loadMainHtmlPage();">
<div id="loading" style="display:block;">
<img src="http://commondatastorage.googleapis.com/kickoff/loading.gif"/>
</div>
</body>
</html>
This htmlFile_1 is not calling the doProcess(), that would return the htmlFile_2.'
Any suggestion to implement this?
You need to include an onSuccess (and optionally an onFailure) handler on this line of code
google.script.run.doProcess();
See below
Server code
function getSuperHero() {
return {name: "SuperGeek", catch_phrase: "Don't worry ma'am, I come from the Internet" };
}
Client code
<script>
function onSuccess(hero) {
alert (hero.catch_phrase);
}
google.script.run.withSuccessHandler(onSuccess).getSuperHero();
</script>