!
Come indicato nella documentazione ufficiale, HTML Service: Create and Serve HTML, per creare una Web App con il ervizio HTML Service di Google Apps Script, il codice nel file .gs deve includere una funzione doGet() che, indicando allo script quale pagina fornire e come servirla, restituisce un oggetto HtmlOutput.
L'esempio base prevede, come anticipato, la funzione di inizializzazione doGet() (presente nel file .gs) ed un file .html contentne il template da visualizzare (per aprire un nuovo file HTML dall'editor di script di Apps Script è sufficiente selezionare la voce di menu 'File -> Nuovo -> File HTML').
Un esempio di quanto appena esposto è il seguente:
File .gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}File .html (chiamato Index.html)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Benvenuto in questo tutorial su appsscript.it
</body>
</html>Questa premessa è utile per andare a spiegare un metodo al fine di realizzare una Web App strutturata su pagine multiple. Durante i miei sviluppi ho provato diversi approcci per ottenere il risultato desiderato, quello mostrato di seguito è a mio avviso, al momento, il più funzionale.
Poniamo ad esempio di voler creare una Web App costituita da due pagine, una pagina di dettaglio (detail.html) ed una principale (index.html) ed indubbiamente il file .gs (che chiameremo main.gs).
Riporto adesso i codici dei 3 file che andrò successivamente a dettagliare per definire il funzionamento del sistema a pagine multiple:
File main.gs
function doGet(e) {
var page = e.parameter['page'];
if (!page) {
return HtmlService.createTemplateFromFile('index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
return HtmlService.createTemplateFromFile(page).evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function getScriptUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}File index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Ciao, questa è la pagina index.html
<?var url = getScriptUrl();?>
<br />
<a href='<?=url?>?page=detail'>Vai alla pagina di dettaglio</a>
</body>
</html>File detail.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Questa invece è la pagina detail.html
<?var url = getScriptUrl();?>
<br />
<a href='<?=url?>?page=index'>Torn alla pagina principale</a>
</body>
</html>
La funzione doGet(e) presente nel file main.gs riceve un evento quando viene chiamata, ovvero l'oggetto evento 'e', il quale (se valorizzato) contiene diverse informazioni tra le quali, come nell'esempio, il valore del parametro 'page' passato tramite querystring al click su un link della nostra Web App in base al quale la funzione doGet(), opportunamente modificata per venire incontro ala nostra necessità, mostra l'opportuno template HTML (al primo avvio della Web App, o se 'page' non è valorizzato, il template HTML richiamato sarà quello di 'index.html').
Nota bene: Questa serie di passaggi per poter mostrare una pagina piuttosto che un'altra è necessaria in quanto, nonostante possiamo avere nell'editor di script più di un file HTML, non c'è la possibilità di accedervi direttamente tramite URL, tant'è che la nostra Web App, una volta pubblicata, avrà uno e uno solo indirizzo univoco.
Il file main.gs contiene inoltre una funzione, che ho chiamato getScriptUrl(), che recupera l'URL presente nella barra degli indirizzi (ovvero l'URL della nostra Web App) e che sarà richiamata all'interno dei file HTML attraverso uno scriptlet (ossia appositi tag che permettono l'esecuzione di codice lato server in un file HTML per la creazione di pagine dinamiche; un esempio affine, anche in termini di sintassi, è il PHP).
Lo scriptlet di cui sopra, nel file HTML, valorizza una variabile di nome 'url' con il path della Web App:
<?var url = getScriptUrl();?>La variabile in questione viene poi utilizzata all'interno del file file HTML per popolare i link interni alla Web App ai quali andranno appesi gli opportuni parametri in querystring relativi alle rispettive pagine di destinazione (come ad esempio il link che punta alla pagina 'detail.html'):
<a href='<?=url?>?page=detail'>Vai alla pagina di dettaglio</a>E' importante assicurarsi che i template HTML contengono in head il seguente codice in modo che venga indicato di aprire il collegamento nel corpo della finestra:
<head>
<base target="_top">
</head>
Un approccio alternativo per la visualizzazione di diversi contenuti HTML è descritto nel tutorial 'Visualizzare in modo dinamico il contenuto di file HTML in una Web App con Google Apps Script'.
Buonasera,
complimenti per il lavoro. Ho una domanda: con un sito di questo tipo se si passa da una pagina all'altra non rimangono salvati i valori eventualmente inseriti, è corretto?
Saluti
Luca
Ciao Luca,
nel caso del tutorial, il passaggio da una pagina all'altra avviene con il caricamento della pagina. Per cui, se intendi "valori inseriti in un form" questi non rimarrebbero come in qualsiasi altra pagina web quando si passa alla pagina successiva cliccando su un link.