Google Sheet Custom dialogs With Dropdown Input

Question

I want to create a custom dialog box for the user to select the which tab they want to use. Once they have made their selection. The selected tab is changed from hidden to view. By default, all the tabs are hidden.

I managed to get the dialog box pop-up on open. My questions is how do I handle submit event in the html?

<select name="Tabs">
  <option value="1">Tab 1</option>
  <option value="2">Tab 2</option>
</select>

<hr/>

<button onmouseup="select()">Select</button>

<script>
  window.select = function() {
  //how do I get the selected element?
  //how do I enable a tab?
    google.script.host.close();
  };
</script>

Answer 1

You can retrieve the selected element with getElementsByName within the function select() as following:

<script>
function select() {
 var tab = document.getElementsByName("Tabs")[0].value;
google.script.run.unhide(tab);
google.script.host.close();
  };
</script> 

The corresponding Apps Script code would be:

function onOpen() {
  hideTabs();
  showDialog();
}

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setWidth(400)
      .setHeight(300);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Which tab do you want to see?');
}

function hideTabs(){
  var sheets=SpreadsheetApp.getActive().getSheets();
  for(var i=1;i<sheets.length;i++){
    sheets[i].hideSheet();
  }
}

function unhide(tab){
  SpreadsheetApp.getActive().getSheetByName(tab).showSheet();
}

Annotations

• Please mind the comments of TheMaster and Tanaike
• The provided code snippet hides all but the first sheet, since you cannot die all sheets
• This code works provided that sheets with the names '1' and '2' exist within the spreadsheet
• You need to use an installable onOpen trigger (see: Managing triggers manually) in order to display the dialog automatically when opening the spreadsheet