In the world of web development, you don’t always need a complex, full-stack application to get the job done. Sometimes, a simple web app powered by Google Apps Script can be a quick and efficient solution. This article will explore how you can create a multi-page Google Apps Script web app for such purposes. We’ll discuss why it’s useful, its limitations, and the pros and cons of this approach.
On our blog, we have created several types of web apps with Google Apps Script. You can convert those web apps to multi-page web apps using the method described in this post.
Table of Contents
Why use Google Apps Script for Web Apps?
Google Apps Script is a cloud-based scripting language that allows you to extend the capabilities of various Google services, including Google Sheets, Google Docs, and even Google Sites. While it might not be the first choice for building a full-fledged web application, it offers several advantages for smaller projects:
Quick Development: Google Apps Script is known for its rapid development capabilities. You can create web apps with just a few lines of code, making it an excellent choice for simple, task-specific applications.
No Hosting Hassles: Since Google Apps Script is a cloud-based service, you don’t need to worry about hosting. Google takes care of the infrastructure for you, so you can focus on your code.
Seamless Integration: It seamlessly integrates with Google Workspace (formerly G Suite) apps, making it a great choice for automating tasks within the Google ecosystem.
Advantages of Multi-Page Web Apps
Multi-page web apps are valuable because they offer:
- Improved User Experience: Users find it more intuitive to navigate between pages.
- Organized Content: Different pages can focus on specific tasks or aspects of your application, keeping content organized.
- Scalability: They are easier to expand and maintain as your app grows.
- Modular Development: Each page can be developed and maintained independently, facilitating collaboration.
- Clear Navigation: Users can easily switch between pages using traditional navigation elements.
- Accessibility: Multi-page apps are more accessible, bookmarkable, and screen reader-friendly.
- Separation of Concerns: They enable cleaner code separation, enhancing maintainability.
- Customization: Each page can have a unique layout tailored to its content.
Building a Multi-Page Google Apps Script Web App
Let’s delve into the process of creating a multi-page web app using Google Apps Script. We will walk through the code required to build a basic example.
If you’ve read our previous blog post on Google Apps Script web apps, you may have noticed that we discussed two types of Apps Script: Bound Script and Unbound Script. Essentially, the method by which you access the script editor determines the type of Apps Script it is. For instance, if you open the Script Editor through Google Sheets, Docs, etc., it is a bound script. If you access the script editor directly from https://script.google.com/home, it is an unbound script. The key distinction is that a bound script cannot be detached from the document.
In essence, web apps can be developed for most of the Google Workspace apps. In this explanation, we will be using an unbound script to illustrate the multi-page web app.
About the web app
The web app explained below is a basic template that you can use to start building your multi-page web app. The main feature of this web app is a navigation bar, where you can easily add and update links to navigate between your pages. To add style to the web app, I use the Bootstrap framework.
A live demo of the web app
Before we begin, try out the live demo at the following link to preview the final outcome.
Link to Google Apps Script project
You can make a copy of the Google Apps Script project to your Google Drive from the following link to explore it yourself.
Google Apps Script code for multi-page web apps
The following code snippets are the Google Apps Script code that we will be explaining in this blog post. This code will show you how to create multi-page web apps using Google Apps Script.
This is just a basic example of how to create multi-page web apps with Google Apps Script. You can customize the code to meet your specific needs.
Explaining the code
The code given above consists of the following files.
- Code.gs
- Index.html
- Page1.html
- Page2.html
- Page3.html
- CSS.html
- JavaScript.html
Code.gs
The Code.gs file contains three functions namely doGet(), getNavbar(), getScriptURL(), and include().
The doGet() function is the entry point for the web app. It receives an e object, which contains information about the request. The e.parameter.mode parameter is used to determine the requested page. If no mode parameter is specified, the default page (Index.html) is served.
For example, if you click the Page3 link of the above demo, you will get the following URL in the address bar. Where the highlighted part “mode=Page3” is the query parameter.
Accordingly, the variable “page” (line 2 of the Code.gs) would be assigned the value of “Page3”. If you click the “Home” link in the navigation bar, it will return the “Index” page since no “mode” parameter is defined in the URL.
https://script.google.com/macros/s/AKfycbxP22V3Qf_eJL_-KKLtU171YZ5shxm22e9AdWaKRtLn2byj-4T3ICWF8dAlrBvgMoabvw/exec?mode=Page3The HtmlService.createTemplateFromFile() function is used to create a template from the specified HTML file (in this case, the value of the page variable, which can be Index, Page1, Page2, or Page3). The evaluate() method is then called on the template to generate the HTML output.
The HtmlService.createHtmlOutput() function is used to create an HtmlOutput object from the specified HTML output. The addMetaTag() method is then called on the HtmlOutput object to add a viewport meta tag. This meta tag ensures that the web app is displayed correctly on all devices.
In the HTML pages of the code, we have used a template placeholder {{NAVBAR}}. Line 8 of the code is used to replace this {{NAVBAR}} with the navigation bar.
The getNavbar() function is used to generate the HTML for the navigation bar. The activePage parameter is used to determine the active page. This is used to highlight the active page in the navigation bar.
The getNavbar() is called inside the doGet() function explained above. The page variable is provided as the activePage parameter of the function. The template parameter {{NAVBAR}} is replaced by the HTML code generated from this function. The getNavbar() function utilizes the getScriptURL() function to generate URLs to each page linked in the navigation bar.
The getScriptURL() function is used to generate the URL of the web app, with the qs parameter used to specify any query string parameters. This function first obtains the original URL to the web app through ScriptApp.getService().getUrl(). Then, it appends the provided query string parameter to it and returns the resulting URL. This function is used within the getNavbar() function to generate the script URL for the navigation bar.
The include() function is used to include the contents of the specified file in the HTML output. This function is used to include the CSS and JavaScript files that are used by the web app. You can build your HTML components in separate HTML pages and include them in the relevant pages using this function. This will help you maintain your code easily.
Index.html, Page1.html, Page2.html, and Page3.html
Index.html, Page1.html, Page2.html, and Page3.html are the pages in this web app. Each HTML file contains the basic HTML code required to create web pages. Additionally, I have included a template placeholder {{NAVBAR}} at the beginning of each page. This placeholder is replaced by the content generated by the getNavbar() function in the Code.gs file.
You can include your web app contents, such as forms, charts, tables, etc., on these pages. Additionally, you can create separate HTML files for your HTML components and include them in these pages using the include() function mentioned earlier. This will keep your code clean and easy to maintain. However, if you need to include dynamic content that requires server-side evaluation, you should add those components directly on these pages (they won’t work with the include() function).
CSS.html and JavaScript.html
In addition to the main pages, separate CSS and JavaScript files have been created to store the code for styling and interactivity. This approach allows you to update the CSS and JavaScript codes in a single location, and then reuse them across all pages by utilizing the include() function. As a result, code maintainability is improved, and you can easily reuse code across different pages.
How to run the web app and how it works?
You need to deploy the Apps Script as a web app to get the URL for the web app.
To do this,
- Click the blue “Deploy” button located at the top left corner of the page.
- Select “New deployment” from the dropdown menu.
- Click the gear icon at the top left corner of the page and select “Web app“.
- In the Description field, enter a brief description to identify this deployment.
- For the “Execute as” field, select your email address.
- For the “Who has access” field, choose the appropriate option based on your target audience.
- Click the Deploy button.
- Copy the Web app URL from the subsequent window.
Now you can access the web app using the URL you generated above.
The original URL created earlier does not contain any query parameters. As a result, the value of the page variable in the doGet() function is assigned to “Index“. Consequently, the Index page is displayed to the user. The same page value is then passed as the activePage parameter of the getNavbar() function. Upon return, the navigation bar is displayed with the home page highlighted.
The navigation bar links are generated when the page is loaded. When you click on a link, the corresponding page name is passed to the doGet() function through the e object. The page variable is then assigned the page name (i.e. Page1, Page2, Page3), and that page is displayed to the user.
Pros and Cons of using Google Apps Script to build multi-page web apps
Pros:
- Quick Development: Google Apps Script allows for rapid development, ideal for small to medium projects.
- Seamless Integration: It seamlessly integrates with Google Workspace apps, enhancing their functionality.
- No Hosting Hassles: Hosting is managed by Google, reducing server-related concerns and costs.
Cons:
- Limited Customization: Customization options are limited, making it challenging to achieve specific designs.
- No Server-Side Database: Complex data storage may require alternative database solutions.
- Authentication Challenges: Implementing advanced user authentication and access control can be complex.
- Scalability Concerns: Large, complex apps may face performance and scalability issues.
- Limited External Integrations: Integrating with external services can be challenging, as it’s primarily designed for the Google ecosystem.
Wrapping Up
In the world of web development, not every project demands a complex full-stack application. Sometimes, a simple web app powered by Google Apps Script can provide a swift and efficient solution. This article has explored the creation of a multi-page web app using Google Apps Script. We’ve covered its utility, its constraints, and the advantages and disadvantages of this approach.
