Multiple Page Webapp Example

This script includes the foundations of a Multiple Page Webapp

Code.gs

function getScriptURL(qs) {

var url = ScriptApp.getService().getUrl();

//Logger.log(url + qs);

return url + qs ;

}

function doGet(e)

{

//Logger.log('query params: ' + Utilities.jsonStringify(e));

if(e.queryString !=='')

{

switch(e.parameter.mode)

{

case 'page4':

setPage('Page4')

return HtmlService

.createTemplateFromFile('Page4')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Page4");

break;

case 'page3':

setPage('Page3');

return HtmlService

.createTemplateFromFile('Page3')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Page3");

break;

case 'page2':

setPage('Page2');

return HtmlService

.createTemplateFromFile('Page2')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Page2");

break;

case 'page1':

setPage('Page1');

return HtmlService

.createTemplateFromFile('Page1')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Page1");

break;

default:

setPage('Page1');

return HtmlService

.createTemplateFromFile('Page1')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Page1");

break;

}

else

{

setPage('Page1');

return HtmlService

.createTemplateFromFile('Page1')

.evaluate()

.addMetaTag('viewport', 'width=device-width, initial-scale=1')

.setTitle("Page1");

}

function getPageData()

{

var s='';

s+='<input type="button" value="Page1" onClick="getUrl(\'?mode=page1\');" />';

s+='<br /><input type="button" value="Page2" onClick="getUrl(\'?mode=page2\');" />';

s+='<br /><input type="button" value="Page3" onClick="getUrl(\'?mode=page3\');" />';

s+='<br /><input type="button" value="Page4" onClick="getUrl(\'?mode=page4\');" />';

var rObj={menu:s,title:getPage()};

Logger.log(rObj);

return rObj;

}

function include(filename) {

return HtmlService.createHtmlOutputFromFile(filename).getContent();

}

Page1,2,3,4.html: (Note: this is just a template...They're all the same.

<!DOCTYPE html>

<html>

<head>

<?!= include('res') ?>

<?!= include('css') ?>

</head>

<body>

<?!= include('content') ?>

<?!= include('script') ?>

</body>

</html>

content.html

Most likely you will have 1 of these for each page depending upon what your needs are.

</div>

<div class="main"><p style="font-size=44px;">Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.Hello, world this is this main content div.</p></div>

css.html

<style>

input[type="button"],input[type="text"],label{margin:2px 2px 5px 5px;}

body {

background-color:#fbd393;

font-family: "Lato", sans-serif;

}

.sidenav {

height: 100%;

width: 75px;

position: fixed;

z-index: 1;

top: 0;

left: 0;

background-color: #EEE;

overflow-x: hidden;

padding-top: 5px;

}

.sidenav a {

padding: 6px 8px 6px 16px;

text-decoration: none;

font-size: 16px;

color: #818181;

display: block;

}

.sidenav a:hover,label:hover {

color: #770000;

}

.header{

margin-left: 75px; /* Same as the width of the sidenav */

font-size: 16px;

padding: 0px 5px;

background-color:#fbd393;

height:60px;

}

.main {

margin-left: 75px; /* Same as the width of the sidenav */

font-size: 16px; /* Increased text to enable scrolling */

padding: 0px 5px;

background-color:#e9e8de;

height:450px;

}

@media screen and (max-height: 450px) {

.sidenav {padding-top: 5px;}

.sidenav a {font-size: 16px;}

}

</style>

globals.html

function getGlobals(){

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('Globals');

var rg=sh.getRange(1,1,getGlobalHeight(),2);

var vA=rg.getValues();

var g={};

for(var i=0;i<vA.length;i++){

g[vA[i][0]]=vA[i][1];

}

return g;

}

function setGlobals(dfltObj){

if(dfltObj){

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('Globals');

var rg=sh.getRange(1,1,getGlobalHeight(),2);

var vA=rg.getValues();

for(var i=0;i<vA.length;i++){

vA[i][1]=dfltObj[vA[i][0]];

}

rg.setValues(vA);

}

function getGlobal(key) {

var rObj=getGlobals();

if(rObj.hasOwnProperty(key)){

return rObj[key];

}else{

throw(Utilities.formatString('JJE-SimpleUtilitiesScripts-Error: Globals does not contain a key named %s.',key));

}

function setGlobal(key,value){

var curObj=getGlobals();

curObj[key]=value;

setGlobals(curObj);

}

function getGlobalHeight(){

var ss=SpreadsheetApp.getActive();

var sh=ss.getSheetByName('Globals');

var rg=sh.getRange(1,1,sh.getMaxRows(),1);

var vA=rg.getValues();

for(var i=0;i<vA.length;i++){

if(!vA[i][0]){

break;

}

return i;

}

pages.gs

function setPage(page) {

var ps=PropertiesService.getUserProperties();

ps.setProperty('PageTitle', page);

return ps.getProperty('PageTitle');

}

function initPage() {

var ps=PropertiesService.getUserProperties();

ps.setProperty('PageTitle','');

return ps.getProperty('PageTitle');

}

function getPage() {

var ps=PropertiesService.getUserProperties();

var pt=ps.getProperty('PageTitle');

return pt;

}

res.html

script.html

Multiple Page Webapp Example

Code.gs

Page1,2,3,4.html: (Note: this is just a template...They're all the same.

content.html

css.html

globals.html

pages.gs

res.html

script.html

An image of the site