[Article] Accordion tab panels

by David Workman and Troy Elliott
Data Mosaic

Introduction

Accordion tabs can be the answer when you start running out of room to put secondary information. Compared to traditional tab panels, the "tabs" take up the y-axis of space instead of the x-axis making them great for long side columns.

While not as straight forward to code as traditional custom tab panels, the code in this sample solution will work in most situations with little to no modification.

Accordion tab panels are a cool addition to your UI bag of tricks that your users will like. Enjoy!

How it works

An accordion tab panel has three distinct objects: the tab panel, tab bars (the "tabs"), and arrow graphics. These are arranged with uniform width in a vertical space.

Each tab bar is linked to a specific tab panel tab. When clicked, that tab is selected in the tab panel. The tab panel is expanded to a default or specified height (see meta data) and moved to just below the selected tab bar. Subsequent tab bars are moved below the bottom of the tab panel. This little bit is where most of the coding complexity is involved.

You can click on a selected tab bar to "collapse" that tab. This will result in all tab bars in a "closed" or "unselected" state. No tab panel will show in this case.

Besides the positioning of the tab panel just below the selected tab bar, the "selected" state is further differentiated from the "unselected" state in three ways: the background color of the tab bar, the label color (foreground color) of the tab bar, and the direction the arrow graphic is pointing.

What you need: Objects

1) A tab panel named "tab_sidebar_a". You can have multiple accordion tabs on a form by using the naming convention "tab_sidebar_b", "tab_sidebar_c", etc.

2) A tab bar for each tab in the tab panel. Name "bar_a_1", "bar_a_2", etc. Specify a text property for each tab bar to give a label for the tab.

3) Arrow graphics for each tab bar. Name "bar_a_1_arrow", "bar_a_2_arrow", etc. Assign "arrow_right.png" to the imageMedia property.

What you need: Methods

1) An initialize method: "TAB_accordion_init". This should run on the onShow event of the form. You would think that the form onLoad event would be the appropriate place but this event triggers before the form objects are loaded. Which makes it a bit difficult to setup initial form object states

Even though the code is fired on the onShow event, it has logic to only fire once per form in memory.

2) The tab controller method: "TAB_change_accordion". Assign this to the onAction event of each tab bar.

Both methods are abstracted to work with an unlimited number of accordion tab panels throughout your solution using the naming conventions specified above.

/* * TITLE : TAB_accordion_init * * ABOUT : creates form level variable that stores information about selected accordion * * INPUT : * * OUTPUT : * * REQUIRES : tab panel named 'tab_sidebar_'+[a,b,...z] * text label named 'bar_'+[a,b,...z]+[1,2,...n] * expand/collapse arrow named 'bar_'+[a,b,...z]+[1,2,...n]+'_arrow' * * the same number of tabs as there are labeled bars and arrows * * MODIFIED : May 2008 -- Troy Elliott, Data Mosaic * */ var formName = application.getMethodTriggerFormName() //check to see that form is defined in solution if (forms[formName]) { //check that this form not already loaded if (!forms[formName].shown) { //set form as shown so that this method will not fire again forms[formName].shown = true //get foundset for configuration of sidebars var serverName = forms[formName].controller.getServerName() var tableName = 'sidebar_setup' var fsSidebar = databaseManager.getFoundSet(serverName, tableName) fsSidebar.clear() //hard coded for a maximum of 6 sidebars on one form (a-f) //a, b, c, d, e, f, false for (var numero = 'a' ; numero ; (numero == 'a') ? numero = 'b' : (numero == 'b') ? numero = 'c' : (numero == 'c') ? numero = 'd' : (numero == 'd') ? numero = 'e' : (numero == 'e') ? numero = 'f' : numero = false) { var tabPanelName = 'tab_sidebar_' + numero //if sidebar tab panel sidebar_x is defined, get information about its attributes if (forms[formName].elements[tabPanelName]) { //find sidebar_'numero' (a, b, etc.) specs for this form fsSidebar.find() fsSidebar.form_name = formName fsSidebar.sidebar = numero var results = fsSidebar.search() //array with info about this tab panel var sideBar = new Array() var maxY = forms[formName].elements[tabPanelName].getLocationY() + forms[formName].elements[tabPanelName].getHeight() //get number of tabs var tabTotal = forms[formName].elements[tabPanelName].getMaxTabIndex() //each sidebar can have an unlimited number of tabs //1,2,3,...false for (var numera = 1 ; numera, numera <= tabTotal ; numera++) { var tabBar = 'bar_' + numero + '_' + numera //try to find bar for tab in tab panel if (forms[formName].elements[tabBar]) { //info about this tab var tabInfo = new Object() //base y-location of tab var tabPosition = tabInfo.tabPosition = forms[formName].elements[tabBar].getLocationY() //default size is 0 which means maximum var tabSize = 0 //default back/fore is black and white tabInfo.selectedForeground = '#FFFFFF' tabInfo.selectedBackground = '#000000' tabInfo.unSelectedForeground = '#000000' tabInfo.unSelectedBackground = '#FFFFFF' //there are specs for this form's sidebar if (results) { var record = fsSidebar.getRecord(1) //if not set, black and white tabInfo.selectedForeground = (record.selected_foreground) ? record.selected_foreground : '#FFFFFF' tabInfo.selectedBackground = (record.selected_background) ? record.selected_background : '#000000' tabInfo.unSelectedForeground = (record.unselected_foreground) ? record.unselected_foreground : '#000000' tabInfo.unSelectedBackground = (record.unselected_background) ? record.unselected_background : '#FFFFFF' //there are specs for this tab of the sidebar if (utils.hasRecords(fsSidebar.sidebar_setup_to_sidebar_setup_item) && fsSidebar.sidebar_setup_to_sidebar_setup_item.getSize() >= numera) { var record = fsSidebar.sidebar_setup_to_sidebar_setup_item.getRecord(numera) //get size of form if explicitly defined //if not auto, specify manual height if (!record.height_auto) { tabSize = record.height_manual } } } //space required below tab panel for remaining bars ((20 + 5) * remaining) var bottomOffset = 25 * (tabTotal - numera) //size of tab panel (bottom pixel we can use - (see above) - first pixel available - distance for tab panel below bar) var maxSize = maxY - bottomOffset - tabPosition - 25 //form doesn't exist, isn't in record mode, or the set size is larger than what is available ==> set to max if (tabSize == 0 || tabSize > maxSize) { tabSize = maxSize } tabInfo.tabSize = tabSize sideBar[sideBar.length] = tabInfo } } //assign array to form with information about location and positioning of current accordion widget forms[formName]['sidebar_'+numero] = sideBar //flip to active tab globals.TAB_change_accordion(formName,'bar_'+numero+'_'+forms[formName].elements['tab_sidebar_'+numero].tabIndex) } //break out of loop because sidebar_x is not defined else { numero = false } } } }

 

/* * TITLE : TAB_change_accordion * * ABOUT : change tabIndex and all associated labels * -finds the colors from swatch and then goes to work * activates action buttons * * INPUT : ALL inputs are optional * 1) form name with tab panel * 2) tab to be activated eg. 'tab_d1' * * OUTPUT : * * REQUIRES : tab panel named 'tab_sidebar_a', labels named 'bar_a_'+[1,2,...n] * at least two tabs properly configured * * MODIFIED : May 2008 -- Troy Elliott, Data Mosaic * */ var formName = (arguments[0]) ? arguments[0] : application.getMethodTriggerFormName() var buttonName = (arguments[1]) ? arguments[1] : application.getMethodTriggerElementName() var expandSet = (arguments[1]) ? false : true var prefixBar = 'bar_' var suffixArrow = '_arrow' var tabLetter = buttonName.charAt(4) var tabPanelName = 'tab_sidebar_' + tabLetter tabLetter += '_' //get number of tabs var tabTotal = forms[formName].elements[tabPanelName].getMaxTabIndex() //get current tab var currentTab = forms[formName].elements[tabPanelName].tabIndex //get font string (font,normal/bold/italic/bolditalic,size) //on a mac if (application.getOSName().indexOf('Mac',0) >= 0) { var fontSelect = 'Verdana,1,11' var fontUnselect = 'Verdana,1,11' } //on windows, linux, etc. else { var fontSelect = 'Tahoma,1,12' var fontUnselect = 'Tahoma,0,12' } //the tab we are going to var tabNum = buttonName.match(/[0-9]/)[0] //x position of all elements to be moved around (tab panel, collapse/expand arrows, labels, and rounded rectangles) var xPos = forms[formName].elements[buttonName].getLocationX() var offsetArrow = 2 if (buttonName.indexOf(suffixArrow,0) >= 0) { xPos -= offsetArrow } //retrieve information about all tabs var sideBar = forms[formName][tabPanelName.substring(4)] //position elements (only works if there are tabs and sidebar has been defined previously for (var i = 1 ; i <= tabTotal && sideBar != undefined ; i++) { //get foreground/background color for banded bars var foreSelect = sideBar[i-1].selectedForeground var backSelect = sideBar[i-1].selectedBackground var foreUnselect = sideBar[i-1].unSelectedForeground var backUnselect = sideBar[i-1].unSelectedBackground //set selected if (tabNum == i) { //selected background color forms[formName].elements[prefixBar + tabLetter + i].bgcolor = backSelect forms[formName].elements[prefixBar + tabLetter + i].fgcolor = foreSelect //selected font forms[formName].elements[prefixBar + tabLetter + i].setFont(fontSelect) forms[formName].elements[prefixBar + tabLetter + i].text = forms[formName].elements[prefixBar + tabLetter + i].text.toUpperCase() //switch to tab if called from a method, if different than the one currently on, otherwise, collapse/expand toggle if (expandSet && forms[formName].elements[tabPanelName].tabIndex == tabNum && !(forms[formName][prefixBar + tabLetter] == (prefixBar + tabLetter + i))) { //selected graphic forms[formName].elements[prefixBar + tabLetter + i + suffixArrow].setImageURL("media:///arrow_right_rev.png") //hide tab panel forms[formName].elements[tabPanelName].visible = false //set form variable that this tab is hidden forms[formName][prefixBar + tabLetter] = prefixBar + tabLetter + i } else { //selected graphic forms[formName].elements[prefixBar + tabLetter + i + suffixArrow].setImageURL("media:///arrow_down_rev.png") //set tab, resize tab, and set tab location forms[formName].elements[tabPanelName].setLocation(xPos, eval(sideBar[i-1].tabPosition) + 25) forms[formName].elements[tabPanelName].setSize(forms[formName].elements[tabPanelName].getWidth(), eval(sideBar[i-1].tabSize)) forms[formName].elements[tabPanelName].tabIndex = i //show tab panel forms[formName].elements[tabPanelName].visible = true //clear form variable that a tab is hidden forms[formName][prefixBar + tabLetter] = null } } //set non-selected else { //default background color forms[formName].elements[prefixBar + tabLetter + i].bgcolor = backUnselect forms[formName].elements[prefixBar + tabLetter + i].fgcolor = foreUnselect //default font forms[formName].elements[prefixBar + tabLetter + i].setFont(fontUnselect) forms[formName].elements[prefixBar + tabLetter + i].text = globals.FX_initial_caps(forms[formName].elements[prefixBar + tabLetter + i].text) //default graphics forms[formName].elements[prefixBar + tabLetter + i + suffixArrow].setImageURL("media:///arrow_right.png") } //add additional shift if tab below tab panel and selected tab is not collapsed if (i > tabNum && !forms[formName][prefixBar + tabLetter]) { var tabBelow = utils.stringToNumber(sideBar[tabNum-1].tabSize) + 5 forms[formName].elements[prefixBar + tabLetter + i].setLocation(xPos, eval(sideBar[i-1].tabPosition) + tabBelow) forms[formName].elements[prefixBar + tabLetter + i + suffixArrow].setLocation(xPos + offsetArrow, eval(sideBar[i-1].tabPosition) + tabBelow) } //set tab to be at default location else { forms[formName].elements[prefixBar + tabLetter + i].setLocation(xPos, eval(sideBar[i-1].tabPosition)) forms[formName].elements[prefixBar + tabLetter + i + suffixArrow].setLocation(xPos + offsetArrow, eval(sideBar[i-1].tabPosition)) } }

Optional: Using meta data

There is default bar colors and a tab panel height specification in the methods. For each accordion tab panel in your solution, you can configure these properties by creating a meta data record. Our code will check to see if a meta data record exists before using the default properties.

Steps:

1) Create a meta data record. Specify the form name and the accordion tab panel name. Every accordion tab panel on a form will need it's own meta data record.

2) Specify the selected and unselected colors of the tab bars. Note that the foreground color is for the label of the tab bar.

3) You can specify the height of the tab panel for each individual tab bar (in pixels). The default will fill the vertical space of the accordion tab panel area.