2

Tengo poca experiencia usando HtmlService de GAS, logre correr algunos js en la pagina que cargo de inicio, pero deseo que deje de mostrar la primer pagina y que al consumir una nueva pagina me la muestre con los parámetros que le envió a una función.

El función es:

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);
    
}

Pero al consumirla me regresa el siguiente mensaje en la consola de chrome: Error

3
  • Ayuda!! mencionen si formule mal mi pregunta.. o necesitan mas información. Gracias de antemano.
    – betoamaya
    Commented el 6 abr. 2017 a las 15:04
  • El código no está completo. Deberías incluir la función doGet(e). Para más detalles, revisa ejemplo mínimo verificable.
    – Rubén
    Commented el 6 abr. 2017 a las 17:07
  • Si lo uso pero para mostrar una pantalla de Login... este vendría siendo un segundo html donde tengo algunas acciones del sitio.
    – betoamaya
    Commented el 6 abr. 2017 a las 17:25

3 respuestas 3

2

Respuesta corta

Las aplicaciones web creadas con Google Apps Script pueden crear y servir HTML, para ello cargan un estructura principal y luego sobre esta se puede actualizar el contenido inicial tomando contenido estático de otros archivos en formato HTML, generarlo de forma dinámica mediante plantillas, directamente mediante programación o la combinación de lo anterior.

Ejemplo usando archivos estáticos

El siguiente código corresponde a una aplicación web realizada con Google Apps Script y HtmlService. Esta aplicación al ser cargada muestra un contenido predeterminado. Consta de dos botones, los cuales actualizan el contenido de un DIV.

Consta de cuatro archivos, uno en formato .gs y tres en formato .html.

Código.gs

Incluye el código que corre del lado del servidor. La función doGet() es la función principal la cual devuelve el contenido de la página Index.html. Las funciones getPagina1 y getPagina2 toman el contenido de los archivos Pagina1.html y Pagina2.html y lo devuelven como un objeto de contenido.

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

Contenido HTML principal. Incluye la estructura principal y dos botones los cuales actualizan el contenido del DIV con resultado como 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>

Referencias

1
  • 1
    excelente explicación andaba un poco perdido, te agradezco el tiempo que invertiste en tu respuesta...
    – betoamaya
    Commented el 6 abr. 2017 a las 19:08
1

para este caso yo uso un metodo un poco mas eficiente, (a mi parecer), el cual consiste en usar una funcion unica para llamar cualquier página .html del GAS.

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

Luego en el Index.html pones algo asi:

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

y dentro del script del html una función. en este caso

requestcodegs();

que llame nuestro incluir de esta manera:

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

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

Al hacer esto, podremos llamar cuantas veces queramos la función:

requestcodegs("nombredelapagina");

Y luego, el contenido lo pondremos con un

inner.HTML

en un div o contenedor de preferencia.

Aqui encontraras un ejemplo.

Como ves mi index.html está vacío, ya que depende de una validación si se muestra inicio, o el perfil del usuario

Como ves mi index.html está vacío, ya que depende de una validación si se muestra inicio, o el perfil del usuario.

0

Veo que la pregunta es de hace unos meses pero creo que es interesante.

La función doGet, cómo doPost, recibe consultas a través de la URL del tipo:

direccion.es/page?parámetro=valor&otroParámetro=otroValor...puedes añadir más...

Vamos a responder a un parámetro para cargar dinámicamente una página por defecto, la principal, y otra más:

Archivo Código.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- }
  1. Ruta de la página web para utilizarla más adelante.
  2. La función doGet recibe parámetros (e)
  3. He utilizado la letra 'p' (e.parameter.p) para pasar el valor de la página que quiero cargar a la variable 'page'. Verás cómo un poco más adelante en las páginas html. He utilizado '||' para indicar que en el caso de no existir parámetro 'p' pase 'Web' a la variable (page). 'Web' es el nombre de la página principal.
  4. doGet devuelve la página pasada a través del parámetro 'p' como una plantilla html.

Web.html (página principal por defecto)

<!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>

El atributo HREF del enlace es un Scriptlet que concatena la ruta de la web que guardamos como variable (rutaWeb) con el parámetro 'p' y su valor 'Alumno' que es el nombre de otra página, a la que lleva el enlace.

Alumno.html (la otra página)

<!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>

Fíjate que para volver a la página principal no incluimos parámetro alguno, recuerda en (Código.gs) la construcción de la variable 'page'.

Puedes probar el funcionamiento.

Proyecto funcionando compartido.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.