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>
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 have a project wherein I have created a file named javascript.html, page.html , stylesheet.html and code.gs . I want to print out the title of my web app. Passing the title in page.html in <head> tag. However the same is not working. Is there any other way to do the same in Google appscript.
Below you can see there are three html tags. However I have defined only one in my page.html in appscript code.
Below is the code :
Other than that I haven't added any html tag in my code.
Kindly let me know how to do so?
If you are running your Web Apps with doGet() function, how about using setTitle? The sample script is as follows.
Sample script:
function doGet() {
return HtmlService.createHtmlOutputFromFile("index").setTitle("sample title");
}
By setTitle("sample title"), when the source of Web Apps is seen, you can see <title>sample title</title> in the HTML header.
Reference:
setTitle(title)
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 am having an issue where I created a custom dialog that displays some very basic HTML output using the HTML Service. This works well in Google Sheets, but when I embed the editable google sheet into another website, the content will not load.
Using the inspector/console, I have learned that the issue may be related to "Refused to display {link} in a frame because it set 'X-Frame-Options' to 'sameorigin'." I have referenced https://developers.google.com/apps-script/guides/html/restrictions and believe I have followed all relevant instructions, but I have been unable to resolve this issue for a few weeks now
I am not a developer, just dabbling, so even just resources to learn more about how to approach this issue would be very welcome.
Below is my code. Thank you for your time!
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
</body>
</html>
GS:
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('showDialogPage')
.setWidth(400)
.setHeight(300)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'My custom dialog');
}
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