TabbedUI Component - Good or Bad?

[iRadiate]

Charles Parker raised an interesting idea in another thread basically suggesting it might be time to move away from the TabbedUI interface. This is something I have long considered doing myself but don't quite know where/how to start. With a 'live' application there are so many things to consider without breaking it!

I selected the TabbedUI early on in my beginning days with Alpha and I'm wondering if this was such a wise move. It seems there are very few web sites that use this type of structure.

It would seem to me that:
- the TabbedUI has definitely not been kept up to date or improved in any meaningful way since I started using it
- it is very limited in terms of the properties available compared to standalone UX's
- pretty inflexible in terms of navigation options
- a lot of screen real estate is consumed when the navigation pane is open

Just wondering what others generally think about the TabbedUI vs Page driven applications? And where do you begin to redesign a large application built around a TabbedUI?

[Michael1954]

Re: TabbedUI Component - Good or Bad?

I think it is horses for courses. We moved away from the tabbed UI about 18 months ago.
We create a similar effect with panels. Recently we have used the Tabbed UI in projects and been impressed.

If the page you wish to display is simple and you have a large number then the tabbed UI is great.

[CharlesParker]

Re: TabbedUI Component - Good or Bad?

Stephen in the other thread you asked:

I've often thought about doing this myself Charles, it's just where does one begin?
With a large application, there are so many parts .. this means every component would have to move to its own a5w page right?

Ok, the first answer to that is NO - you can simply insert the component as an embedded object which is, in fact, the self-same component you would have called by a button click in the tabbedUI, in it's own tab - the only difference being is it will then show in a panel card instead and I would recommend checking delay render till visible in most cases.

The second answer to that would be YES and that is because you will then be able to easily insert google tracking code - super useful to then dive into google analytics and watch the bulk of the user flow, time on page, number on page, etc. Much good info for any developer of a web application.

You also asked where do you start. My starting point is in the aesthetics of it. What does it look like? In a tabbedUI you all know what we get - a menu panel that easily collapses and a stage to load multiple components, making switching between them super fast. All easily done in a UX.

To duplicate that, you just need to recreate THAT - afterall, that is probably why you chose to use that in the first place. You can also easily setup persistent login with the UX, and convert much of it to a PGB web-app quite nicely. SO to me it's all about the layout.

So, Like the tabbedUI setup - start with the persistent login sample UX, and put ONE embedded a5w page with your main component in the HOME panelcard. That's your TabbedUI setup. The embedded page will hold a component that has a collapse before panel that is opened and closed by a button in a panel header, the collapse panel will hold your button menu and you can use the same process to embed more pages that house your components. You can see this in action here
https://www.nwcopro.com/ipad.a5w
login: [email protected]
PW: qazwsx

The logged in as message is in the panel header of the HOME panel and the HOME panel is essentially the stage for the entire application this is where I put the main component.- I used the persistent login sample app as I said earlier.
The Main component then loads and has the menu - not unlike the tabbedui.
I hope this helps. You already have all the pieces, if you have a developed tabbedUI.

[CharlesParker]

Re: TabbedUI Component - Good or Bad?

If nothing else I would recommend you put your components on a5w pages in the tabbedUI just for the sake of the Google analytics code you can put in there.

[Peter.Greulich]

Re: TabbedUI Component - Good or Bad?

I've adopted the UX method recently, but there are stylistic differences between the tabbed_ui and the UX. The UX relies on panels - so you see only one panel at a time. The tabbed_ui uses tabs; once you open a tab it remains open until you close it. So if you open 5 tabs you can quickly switch between them. In a UX (depending on how you set your menu up - as per Charles example) you may have to reopen the menu and select another button or icon. The tabbed_ui may be more intuitive in many circumstances. In a tabbed_ui when you close the tab you have destroyed the displayed grid/page/whatever. In a UX the embedded object remains open even if not visible. This may or may not be desirable. So I'm not sure one is superior to the other, although the UX may be more flexible. Ultimately it is a choice of the effect or user experience that you need to provide, and that may vary.

[Pat Bremkamp]

Re: TabbedUI Component - Good or Bad?

You don't need to pick one or the other.

We had a big application built around a tabbedUI with lots of nested buttons. We found that a lot of time was being wasted searching up and down these menus and we had an issue with only one page at a time being visible. The tabbedUI had been wonderful with there were only about a dozen choices, but with hundreds, it was unwieldy. We realized that each employee was using only a small subset of all the buttons, but from time to time needed access to all of them. So, we created a number of smaller tabbedUI that had all the buttons one employee would need normally, then grouped them in a single component so employees could get to any button they needed.

We ended up with single UX with a single tabbed control, each tab serving a different area or a common component everyone needed. The tab can contain a grid, a UX or a tabbed UI, and the space above the tabbed control could be used for help or reference windows that everyone needed. Now, the employees can find what they need quickly.

The photo shows the UX with buttons and links at the top, the tab control with the Projects tab selected and the small tabbedUI with the Add New Project showing. The Standard Clauses is a floating non-modal help window.
Example.png

[iRadiate]

Re: TabbedUI Component - Good or Bad?

The photo shows the UX with buttons and links at the top, the tab control with the Projects tab selected and the small tabbedUI with the Add New Project showing. The Standard Clauses is a floating non-modal help window. [ATTACH=CONFIG]43918[/ATTACH]

That's cool Pat, but I'm missing something. How do you put a TabbedUI inside a Tab Control?

[lvasic]

Re: TabbedUI Component - Good or Bad?

Stephen, you gave me an idea. What if you could build a UX that acted like a tabbedUI control? Then we could have the best of both worlds. The power of the UX. The features that the users like in a tabbedui. Here is a quick video: https://www.screencast.com/t/LKadRDtw

[GGandhi]

Re: TabbedUI Component - Good or Bad?

Stephen, you gave me an idea. What if you could build a UX that acted like a tabbedUI control? Then we could have the best of both worlds. The power of the UX. The features that the users like in a tabbedui. Here is a quick video: https://www.screencast.com/t/LKadRDtw

if you want to do the same without losing screen real estate just keep the ux and put a div on the right side and open the component on the div. so the div will be reused for all the component. but the disadvantage is that you cannot keep two components open at the same time, but it can be displayed in a mobile environment better i think.

[Peter.Greulich]

Re: TabbedUI Component - Good or Bad?

I realized the other day that you can mimic a tabbed_ui in a UX with dynamic tabs. The tabs can contain a5w pages, grids, other UX's etc.

function addTabs () {
// <tabControl>.addTab(tabPaneLabel,html);
	
	var vHTML = '<div id = "Test">TEST</Div>';
	
	var tObj = {dialog.object}.getControl('TAB_1');
	tObj.addTab('Tabby',vHTML);
	{dialog.object}.selectTabPane('TAB_1','Tabby');
	{dialog.object}.runAction('Test');

}

function removeTabs () {
	var tObj = {dialog.object}.getControl('TAB_1');
	tObj.removeTab('Tabby');
	
}

[Pat Bremkamp]

Re: TabbedUI Component - Good or Bad?

Stephen,

Put the tabbedUI in its page, and put the page in the tab.

[Pat Bremkamp]

Re: TabbedUI Component - Good or Bad?

Peter,

Wow Thanks! That was one of the improvements I wanted to make; that is custom tabs per employee or different order of tabs for different employees. I can do this and have a standard set of tabs based on who is logged in, then have an "add tabs" capability for the rest which are only needed occasionally.

[iRadiate]

Re: TabbedUI Component - Good or Bad?

I realized the other day that you can mimic a tabbed_ui in a UX with dynamic tabs. The tabs can contain a5w pages, grids, other UX's etc.

function addTabs () {
// <tabControl>.addTab(tabPaneLabel,html);
	
	var vHTML = '<div id = "Test">TEST</Div>';
	
	var tObj = {dialog.object}.getControl('TAB_1');
	tObj.addTab('Tabby',vHTML);
	{dialog.object}.selectTabPane('TAB_1','Tabby');
	{dialog.object}.runAction('Test');

}

function removeTabs () {
	var tObj = {dialog.object}.getControl('TAB_1');
	tObj.removeTab('Tabby');
	
}

Peter, I just tried this out, very nice!

Thanks for all the interesting comments and ideas folks.

[lvasic]

Re: TabbedUI Component - Good or Bad?

Peter, is there some CSS that would put the "x" in the tab?

[Peter.Greulich]

Re: TabbedUI Component - Good or Bad?

I haven't looked at the CSS, Lee, so I don't know. Too bad they don't give us that option out of the box.