How to convert my google sheet script to web app? - google-apps-script

I have created a Google Sheet to process a Sales and send mail from it. But I have found a limitation, it works only on PC and cannot be used on an android phone using the Sheets app. Is there a way to convert my code to a web app, use Sheets as my database and use the interface from my phone?

Create a deployment of the project as a web-app. you'll probably want to use the Test Deployment for developing and you will need the doGet(e) function to get the page up and running.
function doGet(e)
{
var html = HtmlService.createHtmlOutputFromFile("your_HTML_file_here");
return html;
}
The function above creates the webpage but the rest of the code will end up in the html file that contains the web page.
To interact with google and its services you can use
google.script.run
This allows the user to run google script code from an html page.

Not sure what you mean by "convert". You can publish your project as web app (for that you need doGet() function and some kind of UI) and then access it on mobile via URL.

Related

run standalone appscript deployed as webapp through a button in spreadsheet (which is a bounded function)

I want to run an app script that is deployed as a web app with, run as ME, and allows any user with a Google account to access it. The trigger to run the web app should be a button in the google spreadsheet. The function in web app has no arguments and no return values it does a lot of condition checks opens multiple files and performs a certain task. I am unable to trigger this standalone function using a bounded script.
One easy way to start a web app from a spreadsheet is to use a link instead of a button. It would be something like this:
=hyperlink("https://script.google.com/macros/s/AKfycbwn2BhBcX0ipQBrpdKymDA8ygqq3lr3aBWM13LuLqFOAgbbhNpu/exec", "Start my fancy web app")
To use a button to launch the web app, try the pattern shown at How to open URL via Google Apps Script.

Can I deploy google app script project locally or from another platform?

I am creating a web application using a google app script. In this application I integrated google sign in as a feature. When I deploy the app through the google app script IDE, everything is fine until I press the button "sign in with google" and it gives me an error which is saying mismatch with the JavaScript origin. When I try to add the JavaScript origin it will not accept it and says either it is invalid or it is forbidden. When I try to do that locally it works perfectly (I added the JavaScript origin as my localhost) but the rest of the functionalities like adding data to a spreadsheet does not work. I know that there is no solution for the first bit (to use the sign in button when I deploy the app through Google App Script IDE) because I have done exhaustive research about it. So, I was wondering if there is another way. like another platform that can support the deployment of my project, meaning there is no problem with the google sign in and the interaction with the google spreadsheet.
For security reasons, Google Apps Script sandboxes your HTML Service (see restrictions documentation). In the case of Content Services, it redirects to a different domain every time it’s executed (see documentation). Because of this, you have two options: use Google Apps Script to execute as the visiting user and to get a static site hosting.
1. Using Google Apps Script
Instead of running the calls to the APIs in the front end, you can make functions in Google Apps Script and then call them using google.script.run in the frontend. It will also simplify your code as all the OAuth is handled by Google Apps Script.
// Google Apps Script side
function doSomething() {
const ss = SpreadsheetApp.openByUrl('…')
// […]
return result
}
And to call it I’d use something like:
// Client side
function doWork() {
google.script.run
.withSuccessHandler(successCallback)
.doSomething() // Function name in the backend
}
Make sure to deploy the application with the option Execute as: with the value User accessing the web app so it’s not executed as you.
With this setup the user will be asked to give the required permissions before opening the page.
2. Use a web hosting
The second solution is to find a web hosting provider. Because you don’t seem to have a backend it can be for static pages (some are free). This will give you a stable URL and should work exactly the same as in your localhost.
References
HTML Service: Restrictions (Google Developers)
Content Service Redirects (Google Developers)
google.script.run (Google Developers)

How to load JavaScript file after launching Google Web App

I have two questions:
I have a Google web app (created with google app script) in my G-Suite account. Permissions are set to Execute the app as: Me / Who has access to the app: Anyone
In addition to Code.gs the app has three files
"Form.html" (html interface)
"JSfile1.html" (Javascript routines)
"JSfile2.html" (Javascript routines)
The loading of the third file ("JSfile2.html") is optional depending upon the user (which is determined after the app is launched). Executing doGet(e){} I am loading the first two files and depending upon the user I would like to either load or skip "JSfile2.html". Is there a way to append
HTMLOutput after the app is launched. I am using the following code.
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form');
var js1 = include('JSfile1')
HTMLOutput.append(js1);
HTMLOutput.append(template.evaluate().getContent());
return HTMLOutput
.setTitle('BCAS, App')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function include(file) {
return HtmlService.createHtmlOutputFromFile(file).getContent();
};
Is there a way to retrieve information from users browser local storage before the web app is launched and make it available while executing doGet()
No to both questions. The proper way to do this is by using google.script.run. Call server functions from client side and adjust the DOM accordingly.
Reference:
Client server communication

One question survey app Google Apps Script and Google Sheets with user management

I have to do a little bit of "crowdsourcing" for my work and it would consist in a very simple web app where a user can register/log in, and then be taken to a page where a picture is shown to a user and submit a number.
I'd like to be able to set up a few rules to choose which picture the user will see (so he won't have to answer twice the same question and also to allow some overlap between users to compare their answers).
We can assume that I have a google sheet with a list of images URLs that can be accessed and that I would like the answers to be populated there.
I figured that this tutorial would be a good start since it handles user creation and management and user can submit ideas :
Creating a CRUD Web App with Google Sheets
That being said I'm a bit clueless, I've tried to look for sample scripts deployed as web app but it's hard to know where to start.
I'll appreciate any help !
Google Apps Script is, basically, a javascript environment with a set of libraries that interact with the Google Apps. For instance, to read or store information from/to Google Sheets or Google Docs. If you know javascript, you can create simple applications there. In addition, you can create plugins for Google Applications if you are interested.
A very simple example
Suppose you wanna display an HTML page. You can create an stand-alone script (an script not-bound to a G suite application) and use the content or the HTML services.
You can create a function that sends a simple message to the browser using the ContentService:
function doGet() {
return ContentService.createTextOutput('Hello, world!');
}
Or you can create a function that sends an HTML file in the same project using the HtmlService:
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
Once you have created the function, you must deploy the script as a web application.
Save the script as a new version doing File > Manage Versions and Save new version.
Then, publish the app using Publish > Deploy as web app and provinding information about the permissions for the application.
After Google publishes the application, it gives you an URL to access the application,
You may check more in a simple tutorial on producing content with Google Apps Script. In addition, you may check the google guide to use the HtmlService to provide templated content, i.e. where the HTML are templates which data is provided by javascript functions and variables.
Getting started with Google Apps Script
To start, you may check some tutorials in the internet:
Google has some tutorials and a series of Youtube videos.
In addition, you may find multiple resources for Google App Scripts that may help you:
Google has a list of sample projects
Tanakeich has a list of resources for taking advantage of Google Apps Script.
Oshliaer has another list of resources.
There are Google Codelab (tutorials) for Apps Scripts. They include a lab for using Google Sheets as a reporting tool and for creating a Hangouts Chat bot with Apps Script
Developing Google Apps Script projects locally
Although Google Apps Script provides a web interface to create your applications (your scripts), a better idea may be to create the software locally, using more-traditional tools for Javascript.
Clasp is a command-line tool to develop locally Google Apps Script projects.
Google has a codelab that teach you how to use clasp.

Calling Google Apps Script Gadget from custom Google Gadget?

Using a Google Site with an embedded Google Apps Script, I'm displaying some data from a database using JDBC. The Google Apps Script uses doGet to load an HTML page:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
...the index.html page in turn calls a function in my Apps Script to get some database data:
google.script.run.withSuccessHandler(mySuccessHandler).getSomeDBData();
When the mySuccesshandler is called, I render the data with the JQuery.
This works. However, embedded Google Apps Scripts have a statically defined height. A post on SO suggested developing a custom Google Gadget which dynamically resizes when content changes.
But I can't find any examples, or confirmation that I can port my current Google Apps Script to my own Gadget. The documentation on working with remote content doesn't mention databases.
I tried placing the call to my App Script in the Gadget XML file:
google.script.run.withSuccessHandler(mySuccessHandler).getSomeDBData();
However, this failed with cannot call run of undefined. So is there any way I can call a GAS from a custom Google Widget?
You cant mix them like that, they are different and disconnected (for example how would the xml gadget know which apps script to call in your attempt?).
The easiest would be to use the apps script solely as a data provider like json from a contentService in doGet. From the xml gadget you do an ajax get to the apps script published url & any needed parameters.
To avoid auth hassles publish script to run as you with anonymous access.