MULTI TAB WEBPAGE IN APPS SCRIPT | WEBSITE MODEL WEB SCRIPT
We are going to create a project that has multiple pages that open on click. Every time when we click page button, respective page open after reload, and content of the page show up like following.
You can also put other function in page area. I have made it simple to only showing purpose,
To show how can you do it.
I have first added doPost(e) function to launch the home page and show up the
other page link and set the page title by this method.
htmlOutput.title = 'Home'; in apps script file code.gs
I have first added doPost(e) function to launch the home page and show up the
other page link and set the page title by this method.
htmlOutput.title = 'Home'; in apps script file code.gs
Let's move to the point and start to bulding the respective Project.
In this example page, First we need to go to project page. Click Here to go.
affter creating the project, paste the following code into code.gs file.
In this example page, First we need to go to project page. Click Here to go.
affter creating the project, paste the following code into code.gs file.
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('db');
htmlOutput.title = 'Dashbord';
return htmlOutput.evaluate();
}
function doPost(e){
Logger.log(JSON.stringify(e))
if(e.parameter.Button1 == 'Dashbord'){
var htmlOutput = HtmlService.createTemplateFromFile('db');
htmlOutput.title = 'Dashbord:';
return htmlOutput.evaluate();
}if(e.parameter.Button2 == 'Manage-Users'){
var htmlOutput = HtmlService.createTemplateFromFile('mu');
htmlOutput.title = 'Manage Users:';
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();
}if(e.parameter.Button5 == 'About-Us'){
var htmlOutput = HtmlService.createTemplateFromFile('about');
htmlOutput.title = 'About 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;
}
//include files
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();}
After pasting and completing the above code, Create new html file
like following examle.
Note: Create 7 html pages and name it like db.html, mu.html, complaint.html,
contact.html, about.html, css.html, err.html
like following examle.
Note: Create 7 html pages and name it like db.html, mu.html, complaint.html,
contact.html, about.html, css.html, err.html
In every page, paste the following html code and save it.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table width=700px cellspacing="0" style="border:1px dotted green;">
<tr>
<td width=20% valign=top style="border-right:1px dotted green;">
<?!= include('css'); ?>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<input type="submit" value="Dashbord"name="Button1">
<input type="submit" value="Manage-Users" name="Button2">
<input type="submit" value="Complaint" name="Button3">
<input type="submit" value="Contact" name="Button4">
<input type="submit" value="About-Us" name="Button5">
</form>
</td>
<td width=80% align=center height=400px valign=top>
<b><?= title ?></b>
<table width=100% >
<tr>
<th>111</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
in err.html paste following html code.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table width=700px cellspacing="0" style="border:1px dotted green;">
<tr>
<td width=20% valign=top style="border-right:1px dotted green;">
<?!= include('css'); ?>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<input type="submit" value="Dashbord"name="Button1">
<input type="submit" value="Manage Users" name="Button2">
<input type="submit" value="Complaint" name="Button3">
<input type="submit" value="Contact" name="Button4">
<input type="submit" value="About-Us" name="Button5">
</form>
</td>
<td width=80% align=center height=400px valign=top>
<b><?= title ?></b><br>
<span style="color:red;">Something went worng</span>
</td>
</tr>
</table>
</body>
</html>
In css.html file paste the following code and save it.
<style>
input{
width:100%;
margin:1px;
background:green;
color:white;}
input:hover{
background:red;}
</style>
I have included css.html file to all pages by this mathod.<?!= include('css'); ?>
You can also include other file that you wish to include in respective page.
To include, follow the bellow steps.
<?!= include('css'); ?> replace the red mark text with your file name.
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------