Free Employee Profile Web App Template with Google Sheets: GAS108

Introduction

If you are looking for a lightweight free web app to showcase your employees or product information with Google Sheets as your tiny database, you may find the right solution.

In this Google Apps Script project, I am sharing a web app template that you can easily deploy and update the data for the app to use in a Google Sheets as easily as possible.

Demo Apps

You can check my deployment here first if you want.

Native App with Apps Script or Embed as iFrame in my Blog

YouTube

Check this project introduction video on YouTube if you prefer to watch video instructions.

Instructions (4 Steps)

Follow the steps below to set up the project for yourself.

Step 1

Make a copy of my project to your Google Drive.

Step 2

Open the Apps Script editor by going to “Extensions > Apps Script” from the copied Google Sheets on your Google Drive, then deploy the project as a Web App. You will get a URL to the app after the deployment.

* follow this guide below if you are not familiar with the web app deployment process

A Complete Guide to Deploy GAS as Web App

Step 3

Update the App Settings for yours.

• app: the title you will see in the browser
• fluid: take the full width of the container when it’s checked
• title: the title on the home page
• subtitle: the subtitle on the home page
• sheetNameData: the name of the tab where the data should be stored
• headerProfileUrl: the column name in the data sheet where the cover image will be pulled from
• profileTitle: the title of the profile card, you can use placeholders to merge data from multiple columns
• profileSubtitle: the subtitle of the profile, you can use placeholders to merge data from multiple columns
• headers: the information should be shown in the detail card

Step 4

Replace the sample data with your own data, and finally, you can visit your own Web App URL to see the updates and you app is live now.

* The columns could be different and you should update the settings in Step 3 if you have new columns or changed the name of the columns.

Others

If you want to embed your app to your other websites, you can try the code below. Remember to update the WEB APP URL with yours.

<iframe

 src="WEB APP URL"

 style="display:block; border: none; width: 100%; height: 1400px;"

></iframe>

GoogleAppsScript Playlist (Follow My Channel for New Projects)

Links

Hire me on Upwork (work with me) 

Donate (PayPal)

YouTube (@ashtonfei) 

YouTube (@ashtontheroad) 

Github (@ashtonfei) 

Twitter (@ashton_fei) 

Instagram (@ashton.fei) 

OneScript (my website)