Create a simple project in apps script.
Hi all, Let's see how can we create a simple project in apps script. In this project, I have used pages inside apps script. If you select a menu, page open and display the function/content of the page. But the fuction of the page run silently and response about it.
I have used:
- A google spreadsheet as data store.
- doPost function to reach out the menu pages.
- One dashboard to monitor the information at one place.
- Different pages for different work/ function.
STEP-1
In Code.gs file, paste the following code and save it.
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('db');
htmlOutput.title = 'Home';
return htmlOutput.evaluate();
}
function doPost(e) {
Logger.log(JSON.stringify(e));
if (e.parameter.Button1 == 'Dashboard') {
var htmlOutput = HtmlService.createTemplateFromFile('db');
htmlOutput.title = 'Dashboard';
return htmlOutput.evaluate();
}
if (e.parameter.Button2 == 'Users') {
var htmlOutput = HtmlService.createTemplateFromFile('MU');
htmlOutput.title = 'Users List';
return htmlOutput.evaluate();
}
if (e.parameter.Button3 == 'Complaint') {
var htmlOutput = HtmlService.createTemplateFromFile('Complaint');
htmlOutput.title = 'Complaint';
return htmlOutput.evaluate();
}
if (e.parameter.Button4 == 'Contact') {
var htmlOutput = HtmlService.createTemplateFromFile('Contact');
htmlOutput.title = 'Contact Us';
return htmlOutput.evaluate();
} else {
var htmlOutput = HtmlService.createTemplateFromFile('err');
htmlOutput.title = 'Error';
return htmlOutput.evaluate();
}
}
function getUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}
Step 2: Create HTML Files for Each Page
Next, create the HTML files for each page. These files will define the content and layout for each section of your project. In the left sidebar, click on the '+' icon next to Files, select 'HTML', and create the following files:
- db.html (for the Dashboard)
- MU.html (for the Users List)
- Complaint.html (for the Complaints page)
- Contact.html (for the Contact Us page)
- err.html (for the Error page)
Example content for db.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Dashboard</h1>
<p>Welcome to the Dashboard.</p>
<form method="post" action="<?= getUrl() ?>">
<button name="Button2" value="Users">Go to Users List</button>
<button name="Button3" value="Complaint">Go to Complaint</button>
<button name="Button4" value="Contact">Go to Contact Us</button>
</form>
</body>
</html>
Repeat similar content for other HTML files, changing the heading and content accordingly.
MU.html (Users List)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Users List</h1>
<p>This is the Users List page.</p>
<form method="post" action="<?= getUrl() ?>">
<button name="Button1" value="Dashboard">Go to Dashboard</button>
<button name="Button3" value="Complaint">Go to Complaint</button>
<button name="Button4" value="Contact">Go to Contact Us</button>
</form>
</body>
</html>
Complaint.html (Complaint)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Complaint</h1>
<p>This is the Complaint page.</p>
<form method="post" action="<?= getUrl() ?>">
<button name="Button1" value="Dashboard">Go to Dashboard</button>
<button name="Button2" value="Users">Go to Users List</button>
<button name="Button4" value="Contact">Go to Contact Us</button>
</form>
</body>
</html>
Contact.html (Contact Us)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Contact Us</h1>
<p>This is the Contact Us page.</p>
<form method="post" action="<?= getUrl() ?>">
<button name="Button1" value="Dashboard">Go to Dashboard</button>
<button name="Button2" value="Users">Go to Users List</button>
<button name="Button3" value="Complaint">Go to Complaint</button>
</form>
</body>
</html>
err.html (Error Page)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Error</h1>
<p>The page you requested does not exist.</p>
<form method="post" action="<?= getUrl() ?>">
<button name="Button1" value="Dashboard">Go to Dashboard</button>
<button name="Button2" value="Users">Go to Users List</button>
<button name="Button3" value="Complaint">Go to Complaint</button>
<button name="Button4" value="Contact">Go to Contact Us</button>
</form>
</body>
</html>
Step 3: Optional Script for Spreadsheet Interaction (Spreadsheet.gs)
If you want to interact with a Google Spreadsheet, create another script file and add functions like the one below:
function readData() {
var sheet = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID').getSheetByName('Sheet1');
var data = sheet.getDataRange().getValues();
return data;
}
function writeData(data) {
var sheet = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID').getSheetByName('Sheet1');
sheet.appendRow(data);
}
Replace 'YOUR_SPREADSHEET_ID' with the actual ID of your Google Spreadsheet.
Step 4: Deploy the Web App
- Click on the 'Deploy' button in the top-right corner of the Apps Script editor.
- Select 'New deployment'.
- Choose 'Web app' and configure the deployment as per your needs.
- Click 'Deploy' and copy the provided URL.
Step 5: Testing
Open the provided URL in your browser to see your app in action. You can navigate between the different pages using the buttons, and each page should display the appropriate content.
Conclusion
By following these steps, you've created a simple yet functional web application using Google Apps Script. This project demonstrates how to manage different pages and interact with a Google Spreadsheet to store and retrieve data. Explore further by adding more functionality and improving the user interface.
Happy coding!