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>
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>
this my sample project in app script.i am beginer in making projects in webapp.
in this project, I could run a button click event and I could not enter data in input control by clicking the button. I will be thankful if anyone helps me.
code.js:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function typesomething(x) {
Logger.log(x+' to call!');
}
function dosomething() {
Logger.log('succefullly executed');
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run.doSomething();
var txtname=document.getelementById("txt1");
function getdata() {
google.script.run.typesomething("MURTY LIKES TO ");
document.getelementById("txt1").value="hello world";
}
</script>
</head>
<body>
<input type="button" value="ACCEPT" onClick="getdata()"/>
<input type="text" placeholder="Enter Name." id="txt1"/>
</body>
</html>
There are a couple of typos
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run.dosomething(); // Was doSomething, whereas in your script it is dosomething
var txtname=document.getElementById("txt1"); // not getelement
function getdata() {
google.script.run.typesomething("MURTY LIKES TO ");
document.getElementById("txt1").value="hello world"; // not getelement
}
</script>
</head>
<body>
<input type="button" value="ACCEPT" onClick="getdata()"/>
<input type="text" placeholder="Enter Name." id="txt1"/>
</body>
</html>
Watch your capitals!
Below is my HTML file in Google App Script.
It creates a dialogue box on a spreadsheet. When the ok button is pressed I want it to run a function that I have created in App script and also close the dialogue box.
When I am clicking OK the app script code is not running. What can I do better?
Thanks.
<!DOCTYPE html>
<html>
<head>
<h3>Welcome</h3>
<meta charset="utf-8">
<title>SEOMango</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Ok" class="create ok_button"
onclick="close1();" id="ok_button"/>
<!--JQUERY-->
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function close1()
{
google.script.host.close();
google.script.run.withSuccessHandler.doSomething();
}
</script>
</body>
</html>
try something like this:
function close1()
{
google.script.run.withSuccessHandler(end).doSomething();
}
function end()
{
google.script.host.close();
}
You first need to execute you function on google side doSomethingthen if it is successful call end() function with google.script.host.close() inside of it to close your sidebar/dialog box.
as #tehhowch mentionned it you are here closing your Html page before executing your function doSomething().
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>
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') ?>