Identify a tab in a tabPanel after selection using GAS - google-apps-script

Question

I want to add tabs to a tabPanel dynamically depending on certain criteria.
Sometimes a user will have 3 tabs, another time he (or another user) might have up to 10 tabs. Also the order of tabs added might be different each time.
So I would like to be able to identify the tabs by id and not by index.
After adding several tabs to a tabPanel you can select a tab by
tabPanel.selectTab(2); // Will select third tab of the tabPanel
Using a selectionHandler I can identify the tabPanel and the index of the tab selected
var onSelectHandler = app.createServerHandler('onSelectHandler');
tabPanel.addSelectionHandler(onSelectHandler)
...
function onSelectHandler(e)
{
var source = e.parameter.source; // Id of the tabPanel
var indexTab = e.parameter[source]; // Index of the tab selected
}
But I can't findout how I can get the id of the tab selected nor select a tab by id.
Is there a way to identify a tab by Id apart from hidden fields and other tricks?

Answer 1

Individual tabs do not have Ids, only TabPanels have Ids. A TabPanel has multiple Tabs.
However, you can pass arbitrary information about the TabPanel around via setTag() and JSON.
Something like this for instance:
function doGet() {
var app = UiApp.createApplication();
var clickHandler = app.createServerHandler('myClickHandler');
var tab = app.createTabPanel().setId('asdf');
var fooLabel = app.createLabel('I am foo.').setId('fooId');
var barLabel = app.createLabel('I am bar.').setId('barId');
var tag = [];
tab.add(fooLabel, 'Foo');
tag.push(fooLabel.getId());
tab.add(barLabel, 'Bar');
tag.push(barLabel.getId());
tab.addSelectionHandler(clickHandler);
tab.setTag(JSON.stringify(tag));
app.add(tab);
return app;
}
function myClickHandler(e) {
var app = UiApp.getActiveApplication();
var tag = JSON.parse(e.parameter[e.parameter.source + '_tag']);
var id = tag[e.parameter[e.parameter.source]];
Logger.log(id);
return app;
}
Click on the resulting tabs named Foo and Bar and then check your log.
Note, however, that this happens every time you click on the header, even if it's already the one selected. Use with caution.
I am curious though: What do you plan on doing with this information in the callback?
Are you anticipating updating the content of the panel on the fly, with current data as the tab is exposed? Or populating the panel with widgets at that time?