How to show another page in google apps script?

Navigation
1

I have little experience using GAS HtmlService, I managed to run some js on the page that I started, but I want you to stop showing the first page and that when you consume a new page, show it to me with the parameters that you sent to a function.

The function is: 

function showPagina(iSession){
  var principal = HtmlService.createTemplateFromFile('pPrincipal')
  principal.data = iSession;
  return principal.evaluate()
    .setTitle('Sistemas | Control de Activos')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setFaviconUrl(sFavIcon);

}

But when I consume it, I get the following message in the chrome console:

    
asked by betoamaya 06.04.2017 в 16:30
source

3 answers

1

Short answer

Web applications created with Google Apps Script can create and serve HTML, for this they load a main structure and then on this you can update the initial content by taking static content from other files in HTML format, generate it dynamically using templates, directly by programming or combining the above.

Example using static files

The following code corresponds to a web application made with Google Apps Script and HtmlService. This application when loaded shows a predetermined content. It consists of two buttons, which update the content of a DIV .

Consists of four files, one in .gs format and three in .html format.

Code.gs

Includes the code that runs on the server side. The doGet () function is the main function which returns the content of the Index.html page. The getPagina1 and getPagina2 functions take the contents of the Pagina1.html and Pagina2.html files and return it as a content object. 

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function getPagina1() {
  var html = HtmlService.createHtmlOutputFromFile('Pagina1').getContent();
  return html
}

function getPagina2() {
  var html = HtmlService.createHtmlOutputFromFile('Pagina2').getContent();
  return html
}

Index.html

Main HTML content. Includes the main structure and two buttons which update the content of the DIV with resultado as id. 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function actualizarDiv(html, button) {
        var div = document.getElementById('resultado');
        div.innerHTML = html;
      }
    </script>
  </head>
  <body>
    <input type="button" value="Página 1"
      onclick="google.script.run
          .withSuccessHandler(actualizarDiv)
          .withUserObject(this)
          .getPagina1()" />
    <input type="button" value="Página 2"
      onclick="google.script.run
          .withSuccessHandler(actualizarDiv)
          .withUserObject(this)
          .getPagina2()" />
     <div id="resultado">
     Contenido predeterminado
     </div>
  </body>
</html>

Pagina1.html 

<font color="brown">Contenido de pagina 1</font>

Pagina2.html 

<font color="blue">Contenido de pagina 2</font>

References

answered by 06.04.2017 / 20:25
source
1

For this case I use a slightly more efficient method, (in my opinion), which consists of using a unique function to call any GAS page .html. 

function incluir(filename) {
   return HtmlService.createHtmlOutputFromFile(filename)
         .getContent();
}

Then in the Index.html you put something like this: 

  <button onclick="requestcodegs('registro')">
    Registrarse
  </button>

and inside the html script a function. in this case

  

requestcodegs ();

Call our include this way: 

function requestcodegs(entrada) {
  google.script.run.withSuccessHandler(cargacodegs).incluir(entrada);
}

function cargacodegs(entrada) {
   document.getElementById('general').innerHTML=entrada; 
}

By doing this, we can call as many times as we want the function:

  

requestcodegs ("pagename");

And then, we'll put the content with a

  

inner.HTML

in a div or container of preference.

Here you will find an example.

As you can see, my index.html is empty, since it depends on a validation if the start is shown, or the user's profile.

    
answered by 26.06.2017 в 03:05
0

I see that the question is from a few months ago but I think it is interesting.

The doGet function, how doPost, receives queries through the type URL:

  

direccion.es/page?parameter=value&otherParameter=otherValue ... you can add more ...

We will respond to a parameter to dynamically load a default page, the main one, and another one:

File Code.gs 

1- var rutaWeb = ScriptApp.getService().getUrl();
2- function doGet(e) {
3-   var page = e.parameter.p || "Web";
4-   return HtmlService.createTemplateFromFile(page).evaluate();
5- }
  • Route of the web page to be used later.
  • The doGet function receives parameters (e)
  • I used the letter 'p' (e.parameter. p ) to pass the value of the page I want to load to the 'page' variable. You will see how a little later in the html pages. I have used '||' to indicate that in the case of not existing parameter 'p' pass 'Web' to the variable (page). 'Web' is the name of the home page.
  • doGet returns the page passed through the 'p' parameter as an html template.

    • Web.html (default homepage) 

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Página principal</h1>
    <p>Dale: <a href="<?!= rutaWeb + '?p=Alumno' ?>">Página Alumno</a></p>
  </body>
</html>

    The HREF attribute of the link is a Scriptlet that concatenates the path of the web that we keep as a variable (Webpath) with the parameter 'p' and its value 'Student' which is the name of another page, to which it carries the link.

    Student.html (the other page) 

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Alumnos</h1>
    <p>Puedes volver a la página <a href="<?!= rutaWeb ?>">Principal</a></p>
  </body>
</html>

    Note that to return to the main page we do not include any parameters, remember in (Code.gs) the construction of the variable 'page'.

    You can test how it works.

    Sharing project.

        
    answered by 23.11.2017 в 23:07
    Problems using getKeyCode () Render multiple forms and validate them in a single template in DJANGO