how to connect a navigation bar (
) with HTML files in google appscript?

Question

I am developing a code where I have different option levels and I want one of those options to display a nav bar with two tabs: one to search customers and the other to add customers, I already have the loadView, loadCustomersView and loadAddCustomerView function in my clients.html doc, but it does not display the content when I click on the tabs. How can I make the navigation bar with the search and add clients options show me what is in search.html and addcustomer.html? (see image 3)

step 1, click in opcion1

step 2, click in opcion 1.1

step3, have a nav bar with 2 options: search and add customers

here is a copy of all my files.

codigo.gs

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

function getOpcion1() {
  var html = HtmlService.createHtmlOutputFromFile('opcion1').getContent();
  return html
}

function getObtenerClientes() {
  var html = HtmlService.createHtmlOutputFromFile('clientes').getContent();
  return html
}



function loadPartialHTML_(partial) {
  const htmlServ = HtmlService.createTemplateFromFile(partial);
  return htmlServ.evaluate().getContent();
}


function loadSearchView() {

  return loadPartialHTML_("search");
}


function loadAddCustomersView() {

  return loadPartialHTML_("addcustomer");
}

Index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Gestor Virtual de Talento 1.0</title>


<style>
        .nav-link {
          cursor:pointer;
        }
        #loading {
          position:fixed;
          top:0;
          left:0;
          x-index:10000;
          width:100vw;
          height:100vh;
          background-color: rgba(255,255,255,0.9);
        }
    </style>
  </head>
  
  


<body>
<nav class="navbar navbar-expand-lg navbar-primary static-top mb-5" style="background-color: #072146;">
      <div class="container-fluid" style="height:67.33px; background-color: #072146">
          
             <div class="d-flex justify-content-end">
             <a  class="badge badge-info" href="javascript:ventanaSecundaria('https://docs.google.com')" style="text-align: center;">Guía de usuario</a>
             </div>
        </div>
      </nav>
    






<div class="container">
    <h3>Bienvenidos </h3>
    <h6>Selecciona una opción</h6>
    <P></P>
</div>





<div class="card-group">
  <div class="card">
    <div style="text-align: center;" >
    <img class="card-img-top" src="http://drive.google.com/uc?export=view&amp;id=1eBB_kiCc6FDkbDZwkKueZho-yDFeBOHU" alt="Card image cap" alt="" >
      <div class="card-body">
      <input type="button" value="Opcion 1" class="btn btn-primary" style="background-color: #004481;color: #ffffff" 
                onclick="google.script.run
                .withSuccessHandler(actualizarDiv)
                .withUserObject(this)
                .getOpcion1()" />
      <P></P> 
      <p class="card-text">Conoce opcion 1</p>      
      </div>
    </div>
  </div>

  <div class="card">
    <div style="text-align: center;">
    <img class="card-img-top" src="http://drive.google.com/uc?export=view&amp;id=1osgZRT_0ahKHXGyNbasbx_xaBr2_2orx" alt="Card image cap">
      <div class="card-body">
      <input type="button" value="Opcion 2" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
                onclick="google.script.run
                .withSuccessHandler(actualizarDiv)
                .withUserObject(this)
                .getOpcion2()" />
      <P></P>
      <p class="card-text">Conoce opcion 2</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div style="text-align: center;">
    <img class="card-img-top" src="http://drive.google.com/uc?export=view&amp;id=1Hmxvyc9gM9KEpdQUalaNCvsPFJV8VYfJ" alt="Card image cap" >
      <div class="card-body">
      <input type="button" value="Opcion 3" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
                onclick="google.script.run
                .withSuccessHandler(actualizarDiv)
                .withUserObject(this)
                .getPagina3()" />
      <P></P>
      <p class="card-text">conoce pagina 3</p>
      </div>
    </div>
  </div>
</div>






<p></p>
<p></p> 
<div id="resultado" class="container">
</div>





<P></P>








<script>
function ventanaSecundaria (URL){ 
               window.open(URL,"ventana1","width=1400,height=700,scrollbars=NO") 
              } 

function actualizarDiv(html, button) {
        var div = document.getElementById('resultado');
        div.innerHTML = html;
      }

</script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

opcion1.html

<P></P>


<br>
    <div class="container">
    <div class="d-flex justify-content-center">
    <div class="row row-cols-1 row-cols-md-3 g-4">



    <div class="col">
          <div class="card h-100" style="width: 18rem;">
        <img class="card-img-top" src="http://drive.google.com/uc?export=view&id=19CbMDqXEmgtPemrwiAlsaRyZmdMPrZqA" width="286px" height="180px">
        <div class="card-body">
          <h5 class="card-title">Opcion 1.1</h5>
          <p class="card-text">conoce opcion 1.1</p>
          <input type="button" value="Accede aquí" class="btn btn-info" 
                onclick="google.script.run
                .withSuccessHandler(actualizarDiv)
                .withUserObject(this)
                .getObtenerClientes()" />

        </div>
      </div>
  </div>




  <div class="col">
<div class="card h-100" style="width: 18rem;">
  <img class="card-img-top" src="http://drive.google.com/uc?export=view&id=14_9fglXHnJhb4U4Xyy6XApBJ8KEerDd_" width="286px" height="180px">
  <div class="card-body">
    <h5 class="card-title">Opcion 1.2</h5>
    <p class="card-text">conoce opcion 1.2</p>   
        <a  class="btn btn-info" href="javascript:ventanaSecundaria('https://google.com/')" style="text-align: center;">Accede aquí</a>
    
  </div>
</div>
</div>

</div>
</div>
</div>

clientes.html

<P></P>

<div class="d-flex justify-content-center">
<div class="card mb-5" style="width: 18rem;">
<img src="http://drive.google.com/uc?export=view&amp;id=13n5Nl3nZzL8GRJkG8EeNSPJi-vobrjw_" width="286px" height="180px" class="mx-auto">
<h5 class="text-center">Validación Clientes</h5>
</div>
</div>



<div class="container">
       <h6>Selecciona clientes y valídalos.</h6>
       <P></P>
</div>


<div class="container">
  <nav id="navigation" class="mb-3">
    <ul class="nav nav-tabs main-nav">
    <li class="nav-item">
      <div class="nav-link active" id="search-link">Encontrar cliente</div>
    </li>
    <li class="nav-item">
      <div class="nav-link" id="add-customer-link">Aniadir cliente</div>
    </li>
    </ul>
  </nav>
</div>
  <div id="app"></div>














    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<script>
  

function loadView(options){
  var id = typeof options.id === "undefined" ? "app" : options.id;
  var cb = typeof options.callback === "undefined" ? function(){} :  options.callback;  
  
  google.script.run.withSuccessHandler(function(html){
    document.getElementById(id).innerHTML = html;
    typeof options.params === "undefined" ? cb() : cb(options.params);
  })[options.func]();
}

function loadSearchView(){
  loadView({func:"loadSearchView"});
}

function loadAddCustomerView(){
  loadView({func:"loadAddCustomersView"});  
}





document.getElementById("search-link").addEventListener("click",loadSearchView);
document.getElementById("add-customer-link").addEventListener("click",loadAddCustomerView);






</script>

search.html

<h4>Search</h4>

<div class="mb-3">
    <input type="text" class="form-control" id="searchInput" placeholder="search...">
</div>

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col" class="text-right">#</th>
      <th scope="col">ID</th>
      <th scope="col">Nombre</th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
</table>

addcustomer.html

<h4>Add a Customer</h4>

<div class="add-customer-form">
  <div class="mb-3">
    <label for="first-name" class="form-label">Nombre</label>
    <input type="text" class="form-control" id="first-name">
  </div>
 <div class="mb-3">
    <label for="last-name" class="form-label">Apellido</label>
    <input type="text" class="form-control" id="last-name">
  </div>
  <button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
  New customer Added!
</div>

Create an [mcve] (don't forget to include the textual error messages from the web browser dev tools console / Google Apps Script executions page) — Rubén, Oct 24 '21 at 21:06

how to connect a navigation bar (
) with HTML files in google appscript?

0 Answers0

Linked

how to connect a navigation bar () with HTML files in google appscript?

0 Answers0

Linked

how to connect a navigation bar (
) with HTML files in google appscript?