Replicate tab Panel in GUI Builder google apps

Question

I think I've seen this answer, but I can't remember where for certain.

I'm trying to to create a tabbed panel interface using the GUI Builder, but don't see that option. The part I seem to recall is someone having an approach to replicate that in the GUI Builder. I just can't seem to find that information in my brain, the old google groups or here.

Can someone jog my memory?

Thank you...

Answer 1

The following code makes the tabs, based on the array you put in, dynamically:

function doGet() {
    // create application
    var app = UiApp.createApplication();

    // set array
    var aTabs = ['donald','katrijn','dagobert'];                                                         

    // create tab panel
    var pTab = app.createTabPanel();                                                

    // add tabs to panel
    for(var k=0; k<pTabs.length; k++) {
      pTab.add(app.createLabel("This tab is reserved for " +  aTabs[k]), aTabs[k]);
    } 

    // add panel to application 
    app.add(pTab); 

    // set focus to first tab                                                                                     
    pTab.selectTab(0);                                                                                   

    // return to application
    return app;
}

See link for tabPanel reference.

Publishing your script as a web-app, allows you to insert the script on a google sites.

Answer 2

Maybe the post you were referring to was this one ? Anyway, no matter how much panels you have, yo could design them in the GUI, one on top of the other or (more simply) one under each other in a 'parent' vertical panel and play with client handlers to show/hide the one you need. I have an example here with 2 panels in an UI, the UI is designed with script but that is not important, look at the client handlers to see how it works.

If I have some free time tonight I'll make a demo script for 4 panels in GUI ;-).

EDIT : here is a test example (standalone) or embedded in a Google site + link to the script (make a copy to edit)

Note that in the GUI builder you'l have to 'play' with visibility of each panel to work on it, I used a main panel large enough to hold 2 panels together so you can have a better vision of "harmony" between panels (which is not the case in my test;-))

and the code (very simple basic example 4 panels with each of them a textBox & a Label, just to test the handlers on the buttons):

function doGet() {
  var app = UiApp.createApplication();

  var UI=app.loadComponent('multiUi')

  var panel1 = app.getElementById('panel1')
  var panel2 = app.getElementById('panel2')
  var panel3 = app.getElementById('panel3')
  var panel4 = app.getElementById('panel4')

  var Button1 = app.getElementById('Button1')
  var Button2 = app.getElementById('Button2')
  var Button3 = app.getElementById('Button3')
  var Button4 = app.getElementById('Button4')

  var pHandler1 = app.createClientHandler()
  .forTargets(panel1).setVisible(true).forTargets(panel2,panel3,panel4).setVisible(false)
  Button1.addClickHandler(pHandler1)

  var pHandler2 = app.createClientHandler()
  .forTargets(panel2).setVisible(true).forTargets(panel1,panel3,panel4).setVisible(false)
  Button2.addClickHandler(pHandler2)

  var pHandler3 = app.createClientHandler()
  .forTargets(panel3).setVisible(true).forTargets(panel2,panel1,panel4).setVisible(false)
  Button3.addClickHandler(pHandler3)

  var pHandler4 = app.createClientHandler()
  .forTargets(panel4).setVisible(true).forTargets(panel2,panel3,panel1).setVisible(false)
  Button4.addClickHandler(pHandler4)

  app.add(UI)
  return app;
}