Responsive Web Apps using Google Apps Script

-
Hi Apps Script developer's,

Google apps Script allows to develop Dynamic and Static Web applications like fetch data from Google Sheet and create dynamic cards, intelligent data entry form, Workflows, Help Desk, etc. When you create Web apps using Google Apps Script, it will not be responsive.

You can make applications responsive using third party framework like Bootstrap, Material design or other HTML responsive framework.

In this post I am explaining how to create responsive(Using Bootstrap 4.0) Google Apps Script Web application from scratch
*Required Basic HTML & responsive framework knowledge 
  • Go to your Google Drive
  • Open Google Apps Script Editor 
  • Create new blank apps script Project & save it
  • Add 3 more Html files Index.html, JavaScript.html & Stylesheet.html with given code



    For any Web application it requires 4 main components(I am explaining best practise here, you can add HTML, JS & Stylesheet in to two files if you want)

    For code files Bitbucket Repository 

    • Server side coding (Code.gs)
    • HTML code file (Index.html)
    • JavaScript (JavaScript.html)
    • Stylesheet(Stylesheet.html)
  • Deploy Apps Script as "Deploy as web app" from "Publish" Menu 
  • See My Apps Script Result (It is not accepting your inputs) using Chrome browser developer tools

Happy Coding...

Location: India

Comments

  1. mukeshJune 8, 2019 at 1:04:00 PM GMT+5:30

    Thank you for the solution of my problem

    ReplyDelete
  2. Pedri HaryadiJuly 22, 2020 at 1:31:00 AM GMT+5:30

    Thank's Shiva. It works...
    I try to embed my apps script webapp to Google Sites before, but that Google Sites blocked my Geolocation function. But with your tips, I can do it without Google Sites because my second problem about webapp display in mobile was solved, it's compatible to mobile device now. Again, Big thanks...

    ReplyDelete
  3. UnknownDecember 8, 2020 at 10:33:00 AM GMT+5:30

    thank you so much, you saved my life

    ReplyDelete

Post a Comment

Popular posts from this blog

Google Apps Script Exception Handling

-
Image
Errors In Computer Programming There are three types of common errors in programming: Syntax Errors Runtime Errors Logical Errors i) Syntax Errors Syntax errors, also called parsing errors , occur at compile time in traditional programming languages and at interpret time in Google Apps Script. For example, the following line causes a syntax error because we used Variable name V caps. function errorTest(){ Var num1=100; } Try to Save ( Ctrl+S ) Error log:  Missing ; before statement. (line 47, file "RegEx") When a syntax error occurs in Google Apps Script, IDE don't allow to save the last changes. ii) Runtime Errors Runtime errors, also called exceptions , occur during execution (after compilation/interpretation). For example, the following line causes a runtime error because here the syntax is correct, but at runtime, it is trying to call a function that does not exist. function errorTest2(){ var test=method(); Logger.log(t
Read more

Google Apps Script Regular Expressions

-
Image
RegEx A regular expression, also called a regex , is a method for matching text with patterns. For example, a regular expression can describe the pattern of email addresses, URLs, telephone numbers, employee identification numbers, social security numbers, or credit card numbers. What Is a Regular Expression? A sequence of symbols and characters expressing a string or pattern to be searched for within a longer piece of text. When you search for data in a text, you can use this search pattern to describe what you are searching for. A regular expression can be a single character or a more complicated pattern. Regular expressions can be used to perform all types of text search and text replace operations. Ref Google: For additional instructions and guidelines, see also Guidelines for using regular expressions and RE2 Syntax . Syntax /pattern/modifiers; var patt = /googleAppsScript/i; / googleAppsScript /i  is a regular expression. googleAppsScript   is
Read more