1

I've been trying to create a navigation bar on Google Apps Script. When onclick, I want the navigation to show a certain page. I tried using a onclick() in anchor tag but it seems like the onclick() function doesn't work with anchor tag in Apps Script... Is there any other way for me to create navigation bar in Apps Script?

Edit

Sorry I think I've confused you for the question. I want to put a navigation bar in a standalone webapp, and I'm building the webapp using google appscript. But I have problem when I want to link pages (about, news) to the nav bar. for example, When I click the nav bar, it will shows this n-fde2z55pv56hs752i7fn5pz4auy44qtfz7bsfzi-0lu-script.googleuser… instead of the news page. I noticed that if I include onclick() in achor tag, it will redirect me to this link https://n-fde2z55pv56hs752i7fn5pz4auy44qtfz7bsfzi-0lu-script.googleusercontent.com/userCodeAppPanel#about.

I'll include my code below so that you can have a clear view on my problem:

Below is my code:

    ### HTML code ###

    <!-- language: lang-html -->
    
    <div class="topnav" id="myTopnav">
        <a  href=#news onclick="openNews()">News</a>
        <a  href=#about onclick="openAbout()">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction">
            <i class="fa fa-bars"></i>
        </a>
    </div>
    
    <div id="aboutDisplay" class="aboutDisplay">
        <div class="container">
            <p>about page</p>
        </div>
    </div>

      <div style="display:none" id="newsDisplay" class="newsDisplay">
        <div class="container">
            <p>news page</p>
        </div>
    </div>

    ### Javascript ###
    function openAbout() {
        document.getElementById("aboutDisplay").style.display = "block";
        document.getElementById("newsDisplay").style.display = "none"; 
    }  

     function openNews() {
        document.getElementById("aboutDisplay").style.display = "none";
        document.getElementById("newsDisplay").style.display = "block"; 
    }
Rubén
  • 34,714
  • 9
  • 70
  • 166
nic
  • 11
  • 2
  • 1
    If you're talking about a dialog or webapp then yes you could put a navigation bar. But it's not a google apps script question it's an html/css question. – Cooper May 21 '21 at 21:50
  • 1
    Please add a [mcve] including the console messages – Rubén May 21 '21 at 21:54
  • @Cooper Hi sorry for confusing you, yes I want to put a navigation bar in a standalone webapp, and I'm building the webapp using google appscript. But i have problem when I want to link pages (about, news) to the nav bar. for example, When I click the nav bar, it will shows this https://n-fde2z55pv56hs752i7fn5pz4auy44qtfz7bsfzi-0lu-script.googleusercontent.com/userCodeAppPanel#about instead of the news page. – nic May 22 '21 at 05:13
  • @Rubén HI I'm adding it to my post already ^^ – nic May 22 '21 at 05:48

1 Answers1

0

Admittedly it's simple but it looks like a navbar to me.

gs:

function launchmydialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'Test');
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .topnav{height: 50px; width:90%;border:2px solid black;padding:5px;}
      a{margin:2px 5px;font-family:calibri;font-size:24px;text-decoration:none;}
    </style>
  </head>
  <body>
    <div class="topnav" id="myTopnav">
    <a  href=#news onclick="openNews()">News</a>
    <a  href=#about onclick="openAbout()">About</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction">
        <i class="fa fa-bars"></i>
    </a>
</div>
  <script>
     function openNews() {
       window.alert('You clicked openNews')
     }
     function openAbout() {
       window.alert('You clicked openAbout')
     }
  </script>
  </body>
</html>

Image of Dialog:

enter image description here

Cooper
  • 59,616
  • 6
  • 23
  • 54