is it possible to reference / import a file that is inside the script.
test.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="/testsrc.html"></script>
</head>
<body onLoad="onLoad()">
<div>
<p id='result'>....</p>
</div>
</body>
</html>
testsrc.html
function onLoad(){
document.getElementById("result").innerHTML = "ran";
}
You could do:
<?!= HtmlService.createHtmlOutputFromFile('testsrc').getContent() ?>
instead of
<script src="/testsrc.html"></script>
Don't forget to wrap all your js code in testsrc.html file in <script></script>
PS: better yet in your code.gs file create an include() function like this
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
then you can call it any time you need to include any file:
<?!= include('testsrc') ?>
Related
Having trouble getting a parameter from the URL of a Web App deployed from Google App Script, passing it through a HTML template, and then getting it again as a parameter for a JS function when a user clicks on a button in the Web App.
Specifically, in the code below, I am having trouble passing the variable "username" from the html back to a JS function defined in my original Google App Script when the user clicks on the button "approveTC"...
Here is the Google Apps Script
function doGet(e) {
if(e.parameters.name === undefined){
var tmp = HtmlService.createTemplateFromFile('entername')
return tmp.evaluate();
} else {
var tmp = HtmlService.createTemplateFromFile('timecard')
tmp.username = e.parameters.name
return tmp.evaluate();
}
}
function timecardApproved(name){
return signAndSendTc(name)
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include("timecard-css"); ?>
</head>
<body>
<div>
<h1>Hello <?!= username?></h1>
</div>
<div>
<iframe src=<?!= getTcJpg(username); ?> width="80%" height="800px" frameborder="0"></iframe>
</div>
<div>
<br>
<button id="approveTC">Approve Timecard</button>
</div>
<script>
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC(username){
google.script.run.timecardApproved(username);
}
</script>
</body>
</html>
When you assign the templated value to a variable in your script, make sure that you pass it stringified
This works for me:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<h1>Hello <?!= username?></h1>
</div>
<div>
</div>
<div>
<br>
<button id="approveTC">Approve Timecard</button>
</div>
<script>
var uname = "<?!= username ?>"
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC() {
console.log(uname)
}
</script>
</body>
</html>
After a lot of experimenting, this was the solution that ended up working for me... very close to what #ziganotschka suggested. Except, when I tried #ziganotschka's method earlier, the variable didn't pass through correctly to my Google Apps Script. This code does work for me, though...
<script>
var username = <?= username ?>
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC(){
google.script.run.timecardApproved(username);
}
</script>
I'm linking the library with the src attribute and using a function to call it and its not working
GS:
function doGet(e) {
var params = JSON.stringify(e.parameters)
var params2 =JSON.parse(params)
cache.put("name", params2.name)
cache.put("DBID", params2.DBID)
return HtmlService.createTemplateFromFile("test").evaluate()
}
function include(f1){
return HtmlService.createHtmlOutputFromFile(f1).getContent();
}
Html:
<head>
<title>Email form test</title>
<?!= include("CSS") ?>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8.17.6/dist/sweetalert2.all.js"></script>
<?!= include('Javascript') ?>
<button type="button" name="Submit" onclick="javascript:t1();"id="sub1"class="btn btn-white btn-animation-1">Submit</button>
Calling library (after its been initialized above):
<script>
function t1(){
Swal.fire('Any fool can use a computer');
}
</script>
the expected result should be I click the button and "any fool can use a computer" should pop up in a sweet alert 2 box
You don't need to import and evaluate the Sweetalert library within Apps Script - you can include it in your HTML file as you would normally and return the HTML Output from file on doGet():
code.gs:
function doGet(e) {
// your code here
return HtmlService.createHtmlOutputFromFile("index");
}
and index.html:
<!DOCTYPE html>
<html>
<head>
<title>Email form test</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8.17.6/dist/sweetalert2.all.js"></script>
<button type="button" name="Submit" onclick="t1();"id="sub1"class="btn btn-white btn-animation-1">Submit</button>
<script>
function t1(){
Swal.fire('Any fool can use a computer');
}
</script>
</body>
</html>
Example is more easy to Understand.I tried to print a google document by through a side bar.
I have retrieved a script extract on the web.
My result is a printing the contents of the sidebar and not a google document printing .... oops
Can someone help me ?
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
function initButtonImprimer() {
var bouton = document.getElementById('button-imprimer');
bouton.onclick = function(e) {
print();
return false;
}
}
</script>
</head>
<body>
...
<div>
...
<input type="button" id="button-imprimer" value="Imprimer" />
...
</div>
...
<script type="text/javascript">
initButtonImprimer();
</script>
</body>
</html>
I'm trying to make my first Google App. I have my HTML doc which has the include statement as outlined on HTML Service: Best Practices.
<html>
<head>
<base target="_top">
<?!= include('stylesheet') ?>
</head>
<body>
...
</body>
My code.gs file is as follows:
function doGet() {
return HtmlService.createTemplateFromFile('BooksTS2.html')
.evaluate();
}
My style sheet is named stylesheet.html, and for testing purposes is really simple:
<style>
p {color: green;}
</style>
But when I run it I get this error message: ReferenceError: "include" is not defined.
In the example they created the reusable function include(), you need to add it in your code.gs file:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
You can always use the printing scriptlet directly in your html file like this:
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
</head>
<body>
...
</body>
</html>
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>