Im trying to build a small app with google app script which will work as an inventory with login
im working with HTML and CSS but facing difficulty in connecting both
when i try this in browser, nothing is shown
this is my structure
my code.gs is like this
function doGet(request) {
return HtmlService.createTemplateFromFile('Index')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
My html script goes like this
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h2>Login Page</h2><br>
<div class="login">
<form id="login" method="get" action="login.php">
<label><b>User Name
</b>
</label>
<input type="text" name="Uname" id="Uname" placeholder="Username">
<br><br>
<label><b>Password
</b>
</label>
<input type="Password" name="Pass" id="Pass" placeholder="Password">
<br><br>
<input type="button" name="log" id="log" value="Log In Here">
<br><br>
<input type="checkbox" id="check">
<span>Remember me</span>
<br><br>
Forgot <a href="#">Password</a>
</form>
</div>
</body>
</html>
and css goes like this
<style>
body
{
margin: 0;
padding: 0;
background-color:#6abadeba;
font-family: 'Arial';
}
.login{
width: 382px;
overflow: hidden;
margin: auto;
margin: 20 0 0 450px;
padding: 80px;
background: #23463f;
border-radius: 15px ;
}
h2{
text-align: center;
color: #277582;
padding: 20px;
}
label{
color: #08ffd1;
font-size: 17px;
}
#Uname{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#Pass{
width: 300px;
height: 30px;
border: none;
border-radius: 3px;
padding-left: 8px;
}
#log{
width: 300px;
height: 30px;
border: none;
border-radius: 17px;
padding-left: 7px;
color: blue;
}
span{
color: white;
font-size: 17px;
}
a{
float: right;
background-color: grey;
}
<style>
what could be going wrong?
I refereed this document from google https://developers.google.com/apps-script/guides/html/best-practices
i changed my code to match this best practice but still having issues
I think that in your Stylesheet, the tag of <style> is not correctly enclosed. In your case, <style>,,,<style>. I think that this is the reason for your current issue. So, please modify your Stylesheet file as follows.
From:
a{
float: right;
background-color: grey;
}
<style>
To:
a{
float: right;
background-color: grey;
}
</style> <!-- Modified -->
Note:
When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".
Related
I've created a script that, when deployed as a web app, asks the user for some input, and creates and writes to a Google document.
Apparently, downloading the Google document from the script is not possible, and the next best thing seems to convert the doc and save it in My Drive.
I have tried this very simple approach, inspired by Convert Google Doc to PDF using Google Script Editior
Project is deployed as a web app
Code.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function editDoc(data) {
let doc = DocumentApp.create("Title");
let body = doc.getBody();
body.setText(data);
docblob = doc.getAs('application/pdf');
docblob.setName(doc.getName() + ".pdf");
let file = DriveApp.createFile(docblob);
}
Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form onsubmit="edit()">
<input type="text" id="input">
<input type="submit" id="sub" value="Submit">
</form>
<script>
function edit() {
google.script.run.editDoc(document.getElementById("input").value);
}
</script>
</body>
</html>
As a result, this adds a pdf to my google drive, which should be the pdf form of the created google doc, however it is blank.
I believe your goal as follows.
You want to create new Google Document including the value from the input tag.
And, you want to export the Google Document as a PDF file.
You want to achieve this using Google Apps Script.
Modification points:
I think that the reason of however it is blank is that the Document is not saved.
In order to download the PDF file, I would like to propose to convert the PDF data to the base64 data and set it as the data URL, and then, download it.
When above points are reflected to your script, it becomes as follows.
Modified script:
Google Apps Script side: Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function editDoc(data) {
let doc = DocumentApp.create("Title");
let body = doc.getBody();
body.setText(data);
doc.saveAndClose();
return {
data: "data:application/pdf;base64," + Utilities.base64Encode(doc.getBlob().getBytes()),
filename: doc.getName() + ".pdf"
};
}
HTML & Javascript side: Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form onsubmit="event.preventDefault(); edit();">
<input type="text" id="input">
<input type="submit" id="sub" value="Submit">
</form>
<script>
function edit() {
google.script.run.withSuccessHandler(({data, filename}) => {
const a = document.createElement("a");
document.body.appendChild(a);
a.download = filename;
a.href = data;
a.click();
}).editDoc(document.getElementById("input").value);
}
</script>
</body>
</html>
I thought that in this case, a simple button can be also used instead of the submit button.
In the case of Google Docs, when a blog is retrieved, in the current stage, the blob is the PDF format.
In this modified script, when a text is inputted and a button is clicked, a PDF file is downloaded to the local PC.
Note:
In your script, it seems that Web Apps is used. In this case, when the script of Web Apps is modified, please redeploy the Web Apps as new version. By this, the latest script is reflected to the Web Apps. Please be careful this.
References:
Class google.script.run
saveAndClose()
base64Encode(data)
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 going through the book Google Apps Scripts, 2nd Edition. The lesson I am on for creating a web app asked me to use the following code:
function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('06 Automating Forms')
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
return html;
}
However, when I run this code I get the "You do not have permission to call getFolderById" error message. I don't understand why I am getting this error message. Also, it says the error is on line 2.
I am calling the "getFolderByID" method in my index.html file. Here is that code:
<div class="body">
<div><h2>This App will allow you to create a form from a template
in Google Docs.</h2></div>
<hr>
<div id="options">
<?var files =
DriveApp.getFolderById('0B6YzuBeNxooXSWE3Vm9WMlVnWkk').getFiles();?>
<select id='template'>
<option value="notSel">Select a Template</option>
<?while (files.hasNext()){
var file = files.next();?>
<option value="<?=file.getId()?>"><?=file.getName()?></option>
<?}?>
</select>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
</script>
<style>
.body{
padding: 10px;
}
</style>
Is there a way to get permission to call that method? I thought if I run the code a box pops up and allowing me access to that area of Drive.
Only script files have the ability to ask for authorization, html files don't.
The simplest thing to do is to add a dummy function in your code.gs file like this :
function myFunction() {
DriveApp.getFolderById('0B6YzuBeNxooXSWE3Vm9WMlVnWkk');
}
run it from the script editor and you will get the authorization request as expected.
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.
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>