Google apps script web app

Google apps script web app DEFAULT

Google Apps Script: Web Apps

Did you know that you can easily create an interactive webpage web app that you can embed in your own website or your Google Workspace domain for internal use with your organisation with Google Apps Script?

Perhaps you want to create a small online app using resources you have in your Google workspace, like Google Sheets or BigQuery.

Maybe the functionality of Google Forms is not enough and you want to build a custom form for something like a seat booking form with a way for users to register a bunch of participants and immediately see if there are seats available. Or create a form where each answer creates a new set of questions that you want to add to a Google Sheet in our own way.

What if you wanted to road test a new app idea and want to use the development speed of Google Apps Script to get a proof of concept up and running in a flash?

Fortunately for you, Google Apps Script has you covered with the ability to deploy Web Apps.

Even if you have been working in the Google Apps Script environment for a while, getting started on Web Apps can be a bit of a daunting task. It’s just that little bit different that it can make you apprehensive at first. However, let me tell you that once you master the few basics, you will be smashing out Web Apps in no time.

In this tutorial, we will go over the very basics of creating your very first Web App. Don’t worry it will be a little bit more useful and interactive than a “Hello World” app. We will get the user to enter a value client-side. Then send it server-side for calculation and then return it back for display client-side.

Let’s take a look at what we are going to build:

Go on! Give it a try and see what happens. 

The example

In the example above the user enters a number. Up “Submit” the number is sent to Google Apps Script. It is first checked for whether a number has been added or not. If a number has been added, it will return the calculated number back to the client-side HTML and display it below the submit line.

Tiny little Google Apps Script Web App success condition

If there is no number, then it will return an error text.

Tiny little Google Apps Script Web App no data condition

If there is an issue Google Apps Script-side, it will alternatively record an error.

Tiny little Google Apps Script Web App back end error condition

We’ll also log the inputted data in Google Apps Script, just so you know it is all working.

Google Apps Script logged data from front end web app

Yeah, yeah. I know. We can do all this stuff client-side. This is just the basics so we can chat about how to carry out all the steps without overcomplicating it with something more show-offy (Don’t worry, we have some more fun in the next tutorial on Web Apps and take things up a notch).

The Code

This code will run two Google Apps Script files (.gs) and one HTML file (.html). Let’s take a look:

Code.gs

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

/**#####################################

  * Sets up server-side HTML environment

  */

functiondoGet(){

returnHtmlService.createHtmlOutputFromFile('Index')

.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

};

/**#####################################

  * Gets a value from server-side input.

  * Sends it to updateNumber to be updated.

  * Result will be returned server-side.

  *

  * @param {string} element - number as text from server-side

  * @return {string} contains evaluated number and test.

  */

functiongetNumberFromWebAPP(element){

//Just a quick proof that the returned number value will be a text. Remove on production.

console.log(`Returned number is:${element}`,typeof element);

let num=parseInt(element);//Change text of num to number.

//If the parsed number is a number, return calculated number otherwise return error.

if(Number.isInteger(num)){

returnupdateNumber_(num);

};

return`<em style='color:red'>You didn'tinputanumber!`;

};

/**#####################################

  * This function is an example of a location you can update your value in.

  *

  * @param {num} num - number from getNumberFromWebAPP()

  * @return {num} contains evaluated number.

  */

functionupdateNumber_(num){

returnnum+num;

};

Test.gs

//run two versions num as text and empty string.

functiontest(){

console.log(getNumberFromWebAPP("3"),getNumberFromWebAPP(""));

};

Index.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<!DOCTYPE html>

<html>

<head>

<base target="_top"/>

</head>

<body>

<h2>Tiny little Google Apps Script Web App</h2>

<label for="numberInput">Enteranumber andclick submit.</label>

<input

type="number"

id="numberInput"

name="numberInput"

min="0"

max="100"

/>

<span></span>

<input

id="submitBtn"

type="submit"

value="Submit"

onclick="sendData()"/>

<div id="result">

<em>Yourresultwillappearhere!</em>

</div>

<script>

/**

         * Send number to Google Apps Script and returns a calculated

         * value back to display on page.

         */

functionsendData(){

//Get inputted number and result div

let number=document.querySelector('#numberInput').value;

let updateLocation=document.querySelector('#result')

//If the Google Apps script fails this error will be displayed

// under result.

// NOTE!!! not advisable for public deployment.

functiononFailure(error){

let warning=`<span style="color:red">${error}</span>`;

updateLocation.innerHTML=warning;

};

// The calculated result will be displayed in the result div.

functiononSuccess(element){

let result=`Your result calculated from GAS is:${element}`;

updateLocation.innerHTML=result;

};

/** First tests if GAS code is successful,

          * attempts to run GAS-side function.

          * on failure sends to onFailure function with nature of error.

          * on success sends to onSuccess function with returned result.

          */

google.script.run.withFailureHandler(onFailure)

.withSuccessHandler(onSuccess)

.getNumberFromWebAPP(number);

};

</script>

</body>

</html>

Code Breakdown

Code.gs

Taking a quick glance at the Code.gs file, you would probably expect a lot more going on here, but apart from the function at the start, there should not be anything new for you if you have been playing with scripts for a little while.

doGet()

/**#####################################

  * Sets up server-side HTML environment

  */

functiondoGet(){

returnHtmlService.createHtmlOutputFromFile('Index')

.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

};

The function’s role is to connect a server-side HTML document with the back-end Google Apps Script code (I am sure the die-hards will be having a meltdown over this oversimplification 🤣 ~🐐).

According to the Google Apps Script docs, for a Web App to work it requires a or function and that function returns a or of some flavour.

Our first task is to invoke the HTMLService which allows us to run client-side web pages. Line 5

There are a number of ways for us to generate and display HTML files in Google Apps Script. The most common is the method that creates and serves HTML from a *.HTML file that you can generate from the script editor.

This approach takes one argument, the title of the HTML file that you will be using. In our case, this is and would be displayed like this:

Note that the file name does not have the file type extension.

If you were to run everything as it is, it would run just fine unembedded or if you were to embed it in a Google Site, but if you were to embed this into, say a WordPress document, like I have done in the example at the start, then you need to create one more line.

Google Apps Script HTML service provides its own controls against clickjacking by default. This means that if you left the HTML service with the defaut XFrame options, it will not show if you embed it in an external site. You will need to remove this and leave this in the hands of the site you wish to embed your Web App into. To do this we must call the setXFrameOptionsMode and change from its default settings by calling the HTML service again and setting the to ALLOWALL.

Great! You are all set. If you have some data in your Index.htmlfile and deployed your web app you would see your HTML file displayed in your browser.

getNumberFromWebAPP(element)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/**#####################################

  * Gets a value from server-side input.

  * Sends it to updateNumber to be updated.

  * Result will be returned server-side.

  *

  * @param {string} element - number as text from server-side

  * @return {string} contains evaluated number and test.

  */

functiongetNumberFromWebAPP(element){

//Just a quick proof that the returned number value will be a text. Remove on production.

console.log(`Returned number is:${element}`,typeof element);

let num=parseInt(element);//Change text of num to number.

//If the parsed number is a number, return calculated number otherwise return error.

if(Number.isInteger(num)){

returnupdateNumber_(num);

};

return`<em style='color:red'>You didn'tinputanumber!`;

};

Our little web app will attempt to send a number to our server-side . On the client-side (), we run a special Google code that will call a function in our file.

This function is . During this process, a data element will be transferred over to our Google Apps Script. There are a number of things you can do with this element, but for us, we just want its data.

The data we should expect to see is number as a string. On line 12, we run a simple proof of this by logging the value of the element parameter and then checking its type with the Javascript typeof operator. We will use this later in our development to test to ensure what is coming in is what we expect. Then in production, we will delete this console logging line. Line 12

The logged result should look like this if the is 3:

Our first real task is to convert our text number from a string to an integer and assign it to our variable. We do this with the parseInt() function that takes our element parameter. If it can convert it to a number, then it will display a number if not it will display NaN (Not a number). Line 14

Once this is done our next step is to validate with an ‘if’ statement. This time around I will use the Number.isInterger method on and if it returns true, then I know I have a number an can use it to run my calculation with the function and then return to complete function. Lines 25-26

The calculated value will be then returned server-side for display to our users.

However, if your returns false, then we know this is not a number and we will return an error warning back to our HTML file. Line 28

Essentially, you want your function that is receiving the data to run validation on the data and set the data up to send to other working functions.

updateNumber_()

/**#####################################

  * This function is an example of a location you can update your value in.

  *

  * @param {num} num - number from getNumberFromWebAPP()

  * @return {num} contains evaluated number.

  */

functionupdateNumber_(num){

returnnum+num;

};

This function is a quick example of something you might use to modify your data. You could just as easily create a function to send your data to a Google Doc or Sheet or transform it and return it in some other way. In the next tutorial, we will be doing something a little more interesting here but for now, this little function is a short proof and a suggested design of how you might like to layout your processes in your Google Apps Script file.

This function takes our parameter and doubles it before returning it to our main to then be sent back server-side.

Test.gs

//run two versions num as text and empty string.

functiontest(){

console.log(getNumberFromWebAPP("3"),getNumberFromWebAPP(""));

};

Yeah, this is just a reminder to make sure you run some tests on your code.

To be honest, testing server-side HTML can be tricky with Google Apps Script at the moment. So these types of little tests can be really helpful.

In our function, we are checking to see if our validation is going to work in the function. We run the function with a test argument of a number as a string and then an empty string – the two conditions we are likely to receive. If our validation is working correctly we should get back the doubled value 6 as an integer and an error warning.

Index.html

Just like in our Code.gs file we have kept our HTML simple. It contains a basic HTML body without CSS for styling and then a script block.

Our Index.html file looks like this:

Google Apps Script basic display of html
HTML

Here is just the HTML:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<body>

<h2>Tiny little Google Apps Script Web App</h2>

<label for="numberInput">Enteranumber andclick submit.</label>

<input

type="number"

id="numberInput"

name="numberInput"

min="0"

max="100"

/>

<span></span>

<input

id="submitBtn"

type="submit"

value="Submit"

onclick="sendData()"/>

<div id="result">

<em>Your result will appear here!</em>

</div>

...

...

</body>

We are using a simple number input with an id of for the user to select the number. This will force the user to either leave the input as blank or add a number. Just remember, a number input will still return a number as a string of text.

When the user clicks the submit button, the Javascript function will run.

The calculated number will be returned in the div with the id, ‘result’.

Javascript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

...

<script>

/**

         * Send number to Google Apps Script and returns a calculated

         * value back to display on page.

         */

functionsendData(){

//Get inputted number and result div

let number=document.querySelector('#numberInput').value;

let updateLocation=document.querySelector('#result')

//If the Google Apps script fails this error will be displayed

// under result.

// NOTE!!! not advisable for public deployment.

functiononFailure(error){

let warning=`<span style="color:red">${error}</span>`;

updateLocation.innerHTML=warning;

};

// The calculated result will be displayed in the result div.

functiononSuccess(element){

console.log(element);

let result=`Your result calculated from GAS is:${element}`;

updateLocation.innerHTML=result;

};

/** First tests if GAS code is successful,

          * attempts to run GAS-side function.

          * on failure sends to onFailure function with nature of the error.

          * on success sends to onSuccess function with returned result.

          */

google.script.run.withFailureHandler(onFailure)

.withSuccessHandler(onSuccess)

.getNumberFromWebAPP(number);

};

</script>

...

Setting up the function

The function takes up the entirety of the script tag. This function will get the number and attempt to send it to the server-side Code.gs file calling the function.

The functions first…erh...function is to get the user’s value from the number input. Line 9

It is probably also a good idea to grab the div that we are going to return the calculated number into as well. Line 10

Connecting with server-side…safely

Next, we have two functions. We’ll talk about these in a moment, but first, let’s cover our script line that sends our number to the Code.gs file on lines 32-34. Let’s break down each part so we know what is going on:

    1. :  This is an asynchronous client-side Google API that can call server-side functions in Google Apps Scripts. link
    2. : It is always a good idea to check if we can connect server-side or if there are any errors in the server-side code. We can do this with the failure handler. It will test the server connection and whether or not the server-side process works correctly. If there is a failure, it will return an error that we can log or display. This function also takes 1 argument, in our case, it is the function. Which will, you guessed it, run when there is a failure. More on this later. link
    3. : If all goes well, we then run the success handler, which will run the call to the server-side function – in our case, – and spit back our returned result and then initialises the function we created above. link
    4. : This is the server-side function that initially receives the values in our file. Both the success handler and failure handler will run this function. This will be where you add your own Google Apps Script function to run.
onFailure(error)

The function is run if the failure handler encounters a problem. It takes one parameter, the error data generated from the failure handler.

...

//If the Google Apps script fails this error will be displayed

// under result.

// NOTE!!! not advisable for public deployment.

functiononFailure(error){

let warning=`<span style="color:red">${error}</span>`;

updateLocation.innerHTML=warning;

};

...

On line 6, we create a warning variable, changing the colour to red to indicate a warning and then insert our error message. Then on the following line, we update the result div with our warning span message.

The failure handler error messages can be quite helpful and explicit. While this is very useful for you while developing your code, it might not be a great idea to share with your users. So you might want to consider more simple error message for them.

An on failure function can be much more than reporting an error message. You might use this function to receive the type of error message to try and affect a recall of the function after a delay or transport your user to another page.

onSuccess(element)

If our call to server-side was a success, we then run our function. This function takes a parameter generated from your serverside process or none at all.

// The calculated result will be displayed in the result div.

functiononSuccess(element){

let result=`Your result calculated from GAS is:${element}`;

updateLocation.innerHTML=result;

};

For our example, we are just creating a string containing a brief explanation of where the returned result was generated from and the returned calculated value held in the parameter.

Then we ship this text to our ‘results’ div to be displayed for the user.

Done!

That’s your code, but currently editing and testing your client-side index.html script can be a little tricky in the Google Apps Script editor.

Working With Front End Index.html

It can be a little tricky to troubleshoot and check for errors in the HTML file in your Google Apps Script editor right now. Even if you deploy your web app (more on this next), and check the Chrome browser developer tools you are not going to get very helpful error warnings.

My preferred approach is to do all the front end work in something like Visual Studio Code and put place-marker like console logs in where it is intended to connect with the Google API.

If you do have a heavy front end web app project, another approach might be to use CLASP to connect your Google Apps Script project with Visual Studio Code.  You can check out my tutorial on this here:

Working with Google Apps Script in Visual Studio Code using clasp

Deploying Your Web App

Running, or more appropriately, deploying, your web app is a little different to running your everyday Apps Script.

To deploy your code for the first time from your Google Apps Script editor got to the menu bar and select Public >> Deploy as web app…

Google Apps Script publish deploy as web app

A popup window will appear:

Deploy as webApp first time Google Apps Script

First, enter the project version details. You could put something down like, “first edition” or “first test”.  Make sure the selection is set to new.

Next, ensure that you execute the app as yourself for this project. Essentially this is saying that you want the app to have the same functionality that you are experiencing. Users will not be able to access your Google Workplace documents, Google Drive or even your Google Apps Script code unless you explicitly code this into your web app. So no need to worry.

Under the header Who has access to the app, it is advisable that on your first deployment that you deploy as yourself. That way you can test the app out, and if it is working how you want, then you can come back to this and deploy it later for anyone or for just your domain if you have a Google Workspace account.

Once you are done, hit the Deploy button. Another window will pop up baring the link to your client-side webpage.

URL of webapp once deployed Google Apps Script

Go on, copy the URL and paste it into your browser to see what you created.

If you have been playing along, your webpage should look like this:

My google apps script web app with warning bar

Now if you are anything like me the first time I wrote a web app, you’d be a little annoyed about the warning in grey at the top of your shiny new app. Don’t worry, this will disappear once you embed it into a page.

Testing your Web App

So you are working on your project and you do a test deploy for the first time. You discover a bunch of errors. You do a few updates and save your code and refresh the deployed web app page and nothing happens.

What to do?

Head back to the editor menu and select Public >> Deploy as web app… again. Wait for the popup window to appear. This time around, you will notice a little difference.

Google Apps Script web app testing app on deploy

Just under your current web app URL, you will notice this sentence:

Test web app for your latest code.

Click the link in blue and a test page will open that will display your latest update.

Keep this open while you edit your code and every time you make a save, refresh this test URL and you will see the modifications.

Final deploy of your web app

Once you are happy with your code, it’s time to redeploy it. Head back to Public >> Deploy as web app… 

Final Deploy as web app google apps script

This time update your project version to New. Then briefly explain what changed in this update.

Next, if you are intending on sharing our project to a wider audience, update who has access to your app to Anyone (This will only display to those with a Gmail account or Google Workplace domain account), Anyone and anonymous (For everyone), or if you have a Google Workplace account, you should be able to select just the users in your domain.

Finally, smash that Update button. Another popup with your  URL will appear. Select it and paste it into your browser for a quick test.

When you are ready, it’s time to embed it into your site.

Embedding your Web App

For us, we are going to embed our new web app into our WordPress blog above, but for most embeds in a website, these instructions will hold true. Check your content management service for more info if you get stuck.

Navigate to where you can insert raw HTML in our site. You will be inserting your code as an iframe.

Take a look at my code for the embedded web app I posted at the top of this post:

<iframe

width="80%"

height="200px"

title="Tiny little Google Apps Script Web App"

src="https://script.google.com/macros/s/AKfycbyuA0MxsJJN4XhAtV9v0VnasQ9IACuKUAzUEMaS19wlLwtsUaI/exec"

frameborder="0"

scrolling="no">

</iframe>

I’ve set the width of the web app to 80% of the total width of the blog post space. I know all the data will fit into a height of 200 pixels so that is my height. Then, I give it a title so web crawlers for search engines know what is going on.

Next, goes the URL to my web app. You will need to put your own URL in here.

I want my web app to seem like it is part of the page, so I removed the default frame border by setting its thickness to zero and removed the scrolling on the iframe.

All done. Save or update your webpage and it should be displayed. Great job! You have a Google App Script web app on your page.

Final Words

Well, this was quite a journey. I had intended on quite a more complex example but once I built the web app realised that it was too distracting from understanding the core basics of building a web app. So instead, we will level up to this in the next tutorial and have some fun with calling Google Sheets data into our web app just like a mini database.

If you want to get a notification for when the next tutorial is out, why not subscribe? Top right-sidebar or the very bottom of this page. If you enjoyed the article, please give it a like and if you have some coffee money to keep me going writing these epic tutorials you can donate at the top right of my page.

Next Tutorial:

Creating an embedded interactive Chain Story app with Google Apps Script and Google Sheets

I would really love to hear what you have used this tutorial to help you make. It really inspires me and your fellow readers.

Looking to learn more about Google Apps Scripts in a more structured format? Udemyhas some great courses that can get you from the basics to a real Google Apps Script pro!

Got a more specific problem you need help with, but don’t have the time to develop the skills? Fiverr’s your best bet to find a skilled Google Apps Script professional to solve your problem quickly and cheaply. *

Sours: https://yagisanatode.com/2020/11/11/google-apps-script-how-to-create-a-basic-interactive-interface-with-web-apps/

Google’s Apps Script should be of interest to all JavaScript developers.
Apps Script is good for automation. You can directly access Google’s many services, such as Google Sheets, Gmail, Google Docs, Google Calendar, and more. See some Google Apps Script starter tutorials here.

With a little bit of imagination, you can create very exciting Apps and add-ons using Google Apps Script.

The first limitation of Apps Script is that it uses an older version of Javascript. It does not support ES6 and its features. Not a big problem. We can use babel and cross compile to a compatible version. The next limitation is that there is no packaging/module setup. You can't directly use npm modules in the Apps Script environment.

Thankfully, there is a command line tool called clasp . The clasp tool makes it easy to upload your Apps Script code.

So in the first part of this project, let us attempt to make use of ES6 and npm modules in Apps Script. We will use Webpack+babel to create a bundle from our source. Then we will upload the bundle using the clasp tool.

See the code for this first part here:
https://github.com/gsmart-in/AppsCurryStep2

Webpack to create the bundle

The most interesting part would be the webpack configuration here:
https://github.com/gsmart-in/AppsCurryStep2/blob/master/webpack.gas.js

In the server folder, you can see two files: api.js and lib.js

api.js is the one that is directly exposed to Apps Script. This file can contain Apps Script compatible code only and is directly uploaded. This file will contain global functions only because that is what Apps Script will understand.

lib.js is our bundle entry point. We can use ES6 and npm modules in lib.js and any of its dependencies. In summary the call structure will be:

api.js -> lib.js -> your custom modules.

Coming back to our webpack configuration

The library target is set to 'var' and library name 'AppLib' so the exported identies in the library(lib.js) can be accessed like this in api.js:

In the modules section of webpack configuration , we have the rules for babel cross compilation.

Also, we use the Copy plugin to simply copy the api.js file to the output folder (from the output folder we upload the generated code to Apps Script using the clasp tool)

Using npm modules

In lib.js we can use ES6 or any advanced features you want. It can include other modules as well.

In order to try this app, clone the project and follow the instructions in the readme page.

Read the detailed article here: Using ES6 and npm modules in Google Apps Script.

Creating a Rich UI for the Apps Script project

Let us build a “Request Management” App. The app will be a Single Page App. You will be able to create new requests (for Laptops, phones, etc) and an admin can view, approve or reject those requests. In the back-end, the app will add the requests to a Google Sheet. So Google Sheet acts as a database.

Here is the complete project:
https://github.com/gsmart-in/AppsCurryApp

See a quick demo of the app here:

Single Page Apps in Google Apps Script

The code is divided into two sections: “client” and “server”. The client folder contains the Vuejs, SCSS and the index.html template We combine all these together to create the bundle that is the index.html file that gets uploaded.

Folder Structure of Apps Curry

The server folder contains the code that runs in Apps Script. The code in ES6 gets compiled to Apps Script compatible code and gets uploaded.

The server folder also contains unit tests for the server side code

You have to bundle and inline all of CSS and Javascript to a single HTML file!

One limitation of Google Apps Script is that it has only one function to show your page. There is no quick way to link your javascript/css files just like you would do in a normal website. So you have to bundle all JS/CSS and inline it.

So we use HtmlWebpackInlineSourcePlugin webpack plugin to inline the generated CSS and JS in to index.html

Here is the webpack configuration:

Conclusion

The purpose of this project was to see how far we can extend the limitations of Apps Script to make it a platform for building complete web apps. Although you can’t build production grade or even limited user base apps on this platform yet, this throws some light on the potentials of such a platform. Imagine being able to create apps, push it and never need to worry about the scaling issues. Imagine a platform that comes ready with user access management built-in. Maybe, one day, this example will help create such a better, scalable universal app platform.

Video Demo of the App

See the complete demo of the app(cloning the project and creating an instance )

Apps Curry Demo - cloning and creating an instance

Read More

Sours: https://dev.to/prasanthmj/creating-a-complete-web-app-on-google-apps-script-using-google-sheet-as-database-26o8
  1. Forge of empire cheat codes
  2. Used cars by owner mi
  3. Apple watch series 3 restart

Prerequisites

Google Sheets can be a really powerful tool when combined with Apps Script. Apps Scripts is like macros in MS Excel but with a lot more extensibility.

Picture this — You have an eCommerce site and you require a spreadsheet to be updated as and when an order is placed. You can pull the data using APIs at fixed intervals but a neater way to do this is to use Google Sheets as a webserver or a webhook.

In this article, I will show you how you can convert your Google Sheet into a web application to capture data and populate the sheet. This is a free alternative to using tools like Zapier but will require some coding experience.

  • Basic understanding of web services( & requests).
  • Basic knowledge of JSON.
  • Minimal Javascript experience.

The first thing we need to set up is the sheet that we are going to use to capture the data.

Navigate to Tools -> Script Editor. This will open a new tab for an Apps Script editor.

To collect data we need to be able to capture the or request sent by the data source. To do this we can use the and function. Here is a sample code with both the functions:

You can add the code to the Code.js file in the Apps Scripts tab. The code is simple. The and functions are used to process and requests respectively.

Most of the time, data is sent as POST requests, so I will focus on the function. The function parses the JSON data using from the request body() and appends the sheet with a new row with the data I require.

Apps Scripts can also parse CSV & XML Data.

Now we require a URL to send the requests to.

Navigate to Publish -> Deploy as web app… on the Apps Scripts tab.

After a few seconds, a menu will pop-up:

The URL for the web app will be listed on the top. Copy it. The URL will remain the same for each deployment.

Every time you change the code and deploy a new version set the Project version to New.

Set Execute the app as to Me.

The last field is Who has access to the app. Set this to Anyone, even anonymous.

This will allow anyone with the web app URL to send requests to it. You can always secure it with token authentication.

Once done, click the Update button.

To test if you have set up the Apps Script correctly simply copy the URL that is generated from the previous step and open it in a browser. The function returns this response:

If the page does not open or it asks you to login, make sure your code is correct and you have deployed the Apps Script with the above configuration.

To test the function I will send a few requests to the URL using Postman. This is the sample data I will use:

You can see in the GIF below, the Live Orders sheet gets updated automatically as I send the request.

Now I can add the URL to my eCommerce site as a webhook to collect order data in real-time.

The applications for this are limitless. Here is another sheet I created to display a real-time graph with temperature & humidity data from various sensors.

The biggest advantage of using Google Sheets is its simplicity for even non-technical users.

Google Apps Scripts does have quotas depending on the type of Google account you have. (Consumer(free user), G Suite, G Suite Business).

The runtime limit of an Apps Script is set to 6 mins & 50 MB of data per call — which means you cannot send large data blobs to it.

The number of requests is also limited to 20,000 per day for a free user and 100,000 per day for a G Suite user which is enough for most use cases.

In this article, we saw how we can use Google Sheets as a simple web server & how to populate the sheet with the POST request data. You can also use this feature for other services like Google Docs, Slides, etc.

Depending on your use case, you can use Google Sheets to create a full-fledged real-time dashboard with visualizations.

Sours: https://levelup.gitconnected.com/turn-your-google-sheet-into-a-web-application-f766f1ff8b98
How to Embed Google Apps Script Web Apps in Websites

In previous tutorials, we created some Web Apps with Google Apps Script and Google Sheets. This post will show you how to embed Google Apps Scripts Web Apps in Websites.

In this post, I am not going to show how to build Webs Apps. I will show you how to embed an already made Web App using the Web App URL. If you want to learn how to create Google Apps Script Web Apps with Google Sheets, you can read the following blog posts.

You can embed Apps Script Web Apps easily on Google Sites. And also you can embed them in other types of the website by doing a little modification to the function of the Apps Script. We will show you how to do it using one of the google apps script Web App examples given above.

In this post, I will use the Web App made for the first blog post link given above. You can copy the Google Sheets with the code to your Google Drive from the following link.

Deploying the Web App and Generating the URL

You have to be careful with access permissions when deploying the Web App. If you want to make anyone on the internet use this Web App, set the following access permissions.

  • Execute as: Me (your email)
  • Who has access: Anyone
Embedding Google Apps Script Web Apps in Websites Set Access Permission

Embed Google Apps Script Web Apps in Google Sites

Embedding in Google Sites is easy as copying and pasting your Web App URL. You can simply insert the Web App to pages using the Embed option.

To embed Google Apps Script Web Apps in Google Sites,

  1. Copy the published Web App URL (For testing, you can directly copy the above live form link)
  2. Go to Google Site, choose the Embed option, paste the URL you copied, and then click Insert.
  3. You can resize it by drawing the edges of the placeholder.

You can see the Google Site that I have embedded the above Web App from the following link.

There are several benefits of embedding Google Apps Script Web Apps in Google Sites rather than directly sharing the Web App URL.

  • You can add additional information about your Web App in the Google Sites pages without any coding skills.
  • It is possible to embed multiple Web Apps in a single Google Site so that you can make a complete web application free.
  • You can have full control of who can access your web application.
  • More user-friendly interface

Embed Google Apps Script Web Apps in other Sites

You can also embed Google Apps Script Web Apps in your existing sites such as WordPress, using HTML tag.

If you are using WordPress, I reccomond you to use GeneratePress theme.

By embedding Web Apps on your site, you can directly collect user feedback, user-submitted information, survey results to Google Sheets.

To embed Web Apps in sites other than Google Sites, you need to make a little modification to the function of the Apps Script project.

Modification tofunction

“To create a Web App with the HTML service, your code must include a doGet() function that tells the script how to serve the page.”

To embed the Web App in sites other than Google Site, you need to use the as explained here. So, your code should be modified as below.

function before modification.

function after modification

Use HTML tag to embed

You can embed the above Web App in a website using the following code snippet.

See the below Web App that I have embedded in this post using the above iframe. It may not be visible if you have logged in to multiple Google Accounts in your browser. If it is not visible, try using the incognito mode (private browsing).

Wrapping Up

Google Apps Scripts lets you boost your collaboration and productivity by building various custom applications connected to various Google Apps. Our blog has several Google Apps Script Web App examples that you can build with Google Sheets.

This post showed you how to embed such Web Apps that are built with Google Apps Script in Google Sites or any other websites. Through that, you can have more advantages than using the Webs Apps URL itself.

Related

Categories SpreadsheetsTags Google Apps Script, Google Sheets, Productivity, Web AppSours: https://www.bpwebs.com/embed-google-apps-script-web-apps-in-websites/

Web script google app apps

In the other hand she was just as tightly holding my friend's penis sticking out with a stake. It will be a long night, I replied, turning her to one side and entering her readily parted crack. Her contented chuckle drowned out my friend's cock. Dasha sat down on the sofa, lifting the hem of her skirt. -Take off your panties with your lips.

Google Sheets Web App - Google Apps Script Web App

Tears flowed from the corners of my aunt's eyes, one got stuck on the bridge of the nose, the second, like. A speck, spread over the pillow. She sobbed.

Now discussing:

In the second volume of the opus "Timur and his team II. Fragments of a private life" initially some parts were not included, since the authors decided not to publish them due to their particularly sophisticated content. However, since you are reading this text, then at your own risk and peril, please - enjoy. We hope that your psychological health will not suffer.



559 560 561 562 563