Dynamic ribbon tab creation

Suite and Optimus Suite 5
#1

Hi,
is there a way to dynamically create tabs on a Ribbon (and add blocks, buttons etc)?

So far I’ve found undocumented function that let me create new tab, but I can’t add blocks:

myRibbon._tabbar.addTab(“aa”, “Motorhead”);

(thanks to viewtopic.php?f=4&t=49289 )

My goal is to create a modular site (each Tab belongs to a module) but I can’t create all tabs at beginning (also because it depends on user rights).

Any suggestions?
Thank you.

#2

Hi

please provide more details, awaited result, etc.

#3

Hi,
as far as my (poor) knowledge I can make a Ribbon with several tabs as follows:

myRibbon = myLayout.attachRibbon({
tabs: [ {tab1…},{tab2…}] })

where tab1…etc is “statically defined”

What I need is something like:

for each (enabledModule in userRights ){
myRibbon.createNewTab({enabledModule.tabDefinition})
}

for example, if a user may view module1, module3 and module7 the ribbon
should have only this 3 tabs:
by pressing the tab the content of the layout (below the ribbon) is
re-populated with specific elements, and the ribbon tab contains buttons, edits, combo, calendars etc according to the new content.

To be more specific:
Tab3 contains two calendars (startDate, endDate), a combo (with sensor list) and button:
by pressing the button on (the tab) a chart (below) will be populated with
a new series that plots values of the selected sensor from startDate…to endDate.

Tab7 contains a combo with sensor kinds and a button that plots the sensor position on a map etc.

Is it possible?
Thank you.

#4

I’ve buid a workaround:
I store the whole Ribbon definition inside some MySQL fields,
then a call to a PHP page returns me a “some kind of” JSon (with functions
passed as plain string). Here’s the code:

$.ajax({url: 'php/buildJsonTabs.php', 
        success: function (jSonTab) {
            // let make a function out of the string by parsing the JSon
            var jsonTransformed = JSON.parse(jSonTab, function (key, value) {
                if (value && (typeof value === 'string') && value.indexOf("function") === 0) {
                    // we can only pass a function as string in JSON ==> doing a real function
                    eval("var jsFunc = " + value);  // ok, I know eval is  :smiling_imp: 
                    return jsFunc;
                }
                return value;
            });
            
            dynTabDefinition = jsonTransformed;
            myRibbonMain = myLayoutMain.attachRibbon(dynTabDefinition);
     })

Note that JSon should look like this:

{
“icons_path”: “icons/”,
“tabs”: [{
“id”: “tabMisure”,
“text”: “Misure”,
“active”: true,
“items”: [{
“type”: “block”,
“text”: “Sensori”,
“mode”: “cols”,
“list”: [{
“id”: “tipoDatoCombo”,
“text”: “Misure”,
“type”: “buttonCombo”,
“width”: 150,
“onclick”: [color=red]“function (id) {alert(‘Hello World’);}[color=red]”
}
]
}]
},
{ … }
]
}

Hope it helps.
(but if somebody finds a better solution any hint are welcome).