Calling server-side script within a sidebar GAS

Question

I am trying to call another sidebar within a different sidebar to create a sort of tabbed interface in google docs. I cannot figure out how to call the server-side function that displays the new sidebar within the html file of the present sidebar.

Here is my html sidebar button layout...(doesn't work)

<div id='menu'>
    <button class="action" id="functions_nav">Functions</button>
    <button class="action" id="navbar">NavBar</button>
    <button class="action" id="settings" onClick="google.script.run.showSettings()">Settings</button>
  </div>

and my gs file...

function showSettings() {
  var html = HtmlService.createHtmlOutputFromFile('settings')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setTitle('DebateDocs')
      .setWidth(300);
  DocumentApp.getUi() // Or DocumentApp or FormApp.
      .showSidebar(html);
}

The documentation on google deals with calling the buttons via "input type="button"..." however that will screw with my styling. Additionally they always call the scripts within javascript "script" tags. Is there some way I can route the button to a javascript event within the html file that points to the server?

Thanks for your help! Any is appreciated.

Answer 1

your code is working fine for me.

The IFRAME Sandbox mode is new and has some bugs, try removing it or setting to NATIVE.

Also please share if you can find any error if you see the execution transcript.

Cheers.

PS: Sorry, I know this should be inserted as a comment, but don't yet have reputation to do so :(

Answer 2

You don't need to call the .gs script directly from a button. You can use this configuration.

Button

<div id='menu'>
  <button class="action" id="settings" onClick="fncShowSettings()">Settings</button>
</div>

HTML Script Tag

<script>
  window.fncShowSettings=function(){
    console.log("fncShowSettings ran");
    google.script.run
    .showSettings(); //Runs server side .gs function

</script>

Code.gs

function showSettings() {
  Code here . . . 
  return someValue;
};

I'm not clear as to what you are asking, so if this doesn't help, just leave a comment.