I'm just learning google script and want to start by making a simple hello world. I have done google's tutorial and when I click "test this code" on the publish web app popup, the code runs and I get my basic hello world result. Great. But When I paste the provided URL into the browser or embed that same URL into google sites, I just get a blank page.
How do I run an web app? Am I missing something?
code.gs:
function doGet() {
var html= HtmlService
.createTemplateFromFile('Index');
html.name = 'David';
return html.evaluate();
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<b>Hi <?=name?>!</b>
</body>
</html>
Coming from a basic PHP background, I'm used to just going to the URL of the .php file and bang, away it goes... I'm so confused.
https://stackoverflow.com/a/40843413/6288442
Google had just recently enabled this feature. It has been under a
'feature request' status for quite a long time. Link here
You can now explicitly define X-Frame-Options.
To allow embedding under another domain, the option should be
HtmlService.XFrameOptionsMode.ALLOWALL
Google documentation on the subject:
https://developers.google.com/apps-script/reference/html/html-output#setXFrameOptionsMode(XFrameOptionsMode)
Example:
function doGet() {
return HtmlService.createTemplateFromFile('form.html')
.evaluate() // evaluate MUST come before setting the Sandbox mode
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); }
Hope this helps!
I think this should work
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<b>Hi <?!=name?></b>
</body>
</html>
https://developers.google.com/apps-script/guides/html/templates#force-printing_scriptlets
Name of file should also be exactly same
I think Index and index won't work
Related
I am developing a web app on App Script (to use Google APIs). I have a chrome extension that works alongside the web app so that I can send information about the browser.
I am using a content script that initializes once the Web App loads. I want to simply send a message from the extension to the web app through the content script. However, DOM doesn't work because App Script uses iFrames. Here is the code from my actual web app:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="pageId" onchange="updateSessionInfo()">
</body>
<script>
function updateSessionInfo(){
var pageId = document.getElementById("pageId").value;
google.script.run.update(pageId);
}
</script>
</html>
I was trying to use DOM to send the pageId to the input element and by having a change in the value, the update function would send the information.
However, this is the structure I receive on my browser:
Chrome Dev Tools
Am I thinking correctly? Or is editing the DOM both dirty and unfeasible? Is there another way?
UPDATE:
I have found the actual document HTML elements by looking deeper down the tree:
New Console
But if the element with id="pageId" is down there, why does it return null when I call it?
UPDATE:
I noticed times when it returns null, and sometimes where the element is detected:
Newest Console
This works for me as a dialog:
Typically I would expect that if this will run as a dialog it will also run as a webapp with the addition of a doget();
gs:
function runmydialog() {
const ui = SpreadsheetApp.getUi();
ui.showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'test');
}
function update(msg) {
SpreadsheetApp.getUi().alert(msg);
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<body>
<input type="text" id="pageId" onchange="updateSessionInfo()">
<script>
function updateSessionInfo(){
var pageId = document.getElementById("pageId").value;
google.script.run.update(pageId);
}
</script>
</body>
</html>
Dialog:
Alert:
I noticed that your script is not inside the body. I don't know if that makes a difference.
I want to have my browser tab title for Gmail show the Subject for the current email because I have software that helps time tracking by capturing tab titles. Unfortunately, it shows Inbox (6) - my.name#mycompany.com all the time.
I see Change Title With Javascript provides javascript to change the tab title to alternative text. How would I get the Subject of the current message in Gmail in a Gmail add-on?
assuming you are retrieving a message of type GmailMessage and that you are running your js client side in an HTML context such as a webapp you could:
create a function in app script that calls the method getSubject()
Serve HTML
call backend function with google.script.run
call a success handler that changes title when async function is completed with success.
in your HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(subject) {
document.title = subject
}
google.script.run.withSuccessHandler(onSuccess)
.getSubject();
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
and in your .gs
getSubject(){
//get your message here
return (message.getSubject());
}
REFERENCES
Serving HTML on web app
google.script.run
My problem is simple. All the possible solutions I searched for online did not address my question.
Google's developer website for Class google.script.run (https://developers.google.com/apps-script/guides/html/reference/run#withSuccessHandler) showcased the method myFunction(...) (any server-side function).
I have copied their exact code and html code and deduced that the function doSomething() does not execute. Nothing gets logged.
I intend to use this to execute an HTML file so that I could play a sound file. I could do this so far with a sidebar popping up from the side, as discussed in this thread: Google Script: Play Sound when a specific cell change the Value.
However, this code provided by Google does not work. Why?
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function doSomething() {
Logger.log('I was called!');
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run.doSomething();
</script>
</head>
<body>
</body>
</html>
By using google.script.run you are calling a server-side Apps Script function.
https://developers.google.com/apps-script/guides/html/reference/run
Please double-check that you follow the following steps to do it correctly:
Please make sure that you put the html part of the code in a separate HTML file (which you create through File->New->HTML file) with the name corresponding to the one you are calling in HtmlService.createHtmlOutputFromFile() - in your case Index.html
Select “doGet” as the function to be run.
Deploy the script as a web app - this is the requirement for using Apps Script HTML service. Please find the instructions here: https://developers.google.com/apps-script/guides/web
Make sure that every time after you implement changes in your code, you deploy the script as a NEW project version. This is necessary to update the changes.
Open the current web app URL you obtain after updating your version, to open your html output.
In your case only an empty HTML file will be opened, to test functionality - insert some text in your HTML body, to test the correct functionality. The latter can be confirmed by viewing the Logs after running the code.
I created a Google Apps Script add-on to display a sidebar on click:
function displayPage_() {
getScriptProperties_()
var htmlTemplate = HtmlService.createTemplateFromFile('PAGE');
var html = htmlTemplate.evaluate()
.setTitle('Connector');
SpreadsheetApp.getUi().showSidebar(html);
}
This successfully loads the file PAGE.html as long as it is simple html. However, when I try to add include like this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include("STYLESHEET"); ?>
</head>
<body>
</body>
</html>
It throws this error:
[17-02-09 08:55:50:239 MST] Execution failed: ReferenceError: "include" is not defined.
It doesn't matter what is in the include it always fails.
I have done this before and it worked. As far as I can tell, I have this set up just like the other project, but it doesn't work in this project. I assume that I forgot to enable something, but don't know how to tell what is missing because the transcript is vague.
What am I missing? Or, doing wrong?
I got crazy too...
Found it in an example provided in Google Script Reference, what I didn't know was that include() is a user-defined function. Paste this code and it will work:
function include(File) {
return HtmlService.createHtmlOutputFromFile(File).getContent();
};
Let me know if I understood properly.
I have seen the past documentation regarding Caja and filtering the use of Google Fonts. There hasn't been any recent action on the web regarding this issue.
Does anyone know of a way to use Google Fonts when creating a templated page via web apps?
I have tried the instructions it provides on the Google api pages but it always defaults to the default font. Other post seem to have been idle for a while and I thought someone might have figured out a way to pull it off.
Simple solution, after I read through some of the documentation (here and here). I did 3 things:
stripped out the body and head tags. That felt very weird but it worked.
changed my sandbox mode to IFRAME in my code.gs file
added the following code to the html template called in the code.gs file
In code.gs:
function doGet() {
var html = HtmlService
.createTemplateFromFile('index')
.evaluate()
.setTitle('Font Test')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
In index.html file:
<!DOCTYPE html>
<?// HEAD ?>
<base target="_top">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
<?// BODY ?>
<div>Font Test</div>