Using the Tab control in Dovetail web applications (such as fcClient and fcAdmin)

We use a client-side JavaScript object for creating tabs in our web applications. Unlike in the Clarify Classic Client, tabs in our web apps are the same page as the parent. When you click on a tab, you are actually displaying the HTML elements on that tab, and hiding the HTML elements on the other unselected tabs. It’s all a bunch of Dynamic HTML (DHTML) goodness.  It’s trivial to make tabs visible/invisible, reorder tabs, resize, etc.


The case page in fcClient is a good example of the use of tabs:





Here we will walk through the steps needed for creating and using tabs within a page.

In your ASP page, Include the javascript code for building a tab

<script language=”javascript” src=”../code/tab_builder.js”></script>


In your ASP page, Include the stylesheet

<link rel=”stylesheet” href=”../stylesheets/webagent.css” type=”text/css”>


Create an array of tabs

var ArrayOfTabs= new Array();


Add an new TabItem to the array, one for each tab.

The constructor for TabItem takes two parameters: the text for the tab header, and the id html element of the tab.


ArrayOfTabs[0] = new TabItem(‘Case’, ‘tab_case’);
ArrayOfTabs[1] = new TabItem(‘More Info’, ‘tab_more_info’);


Create a TabCollection object

The constructor for TabCollection takes two parameters: the x and y position of the top left corner of the tab, in pixels.


var TabCollection= new TabCollection(10,160);



Set the array of tabs on the TabCollection object

TabCollection.tabs = ArrayOfTabs;


Build the tabs

Create a new div element for each tab. The id of the div should equal the id you specified when creating the TabItem above. You should also specify the class of the div to be clsTab. This will set its CSS class so that its visual presentation is correct.


<div id=”tab_case”>



This is the contents of the case tab


<div id=”tab_more_info”>



This is the contents of the more info tab



Finally, build the tabs

The build method takes one parameter, which is the index of which tab should be displayed. A parameter of 0 indicates the first tab should be displayed.


<script language=”javascript”>;




Your page should now render with the tabs




TabCollection Properties


The following properties are available on the TabCollection object. These properties need to be set before calling the build method.


Property Description
tabHeight Sets the height of the tab, in pixels
tabWidth Sets the width of the tab, in pixels
hdrHeight Sets the height of the tab header, in pixels
hdrWidth Sets the width of the tab header, in pixels
showHeaders Indicates if the tabs should be generated with tab headers or not.
xPos the X position of the top left corner of the tab, in pixels.
yPos the Y position of the top left corner of the tab, in pixels.



TabCollection.hdrWidth = 79;
TabCollection.tabHeight = 330;
TabCollection.tabWidth  = 610;


Headerless Tabs


To be consistent with Clarify ClearSales style forms, you can render tabs without tab headers by setting TabCollection.showHeaders=false. Instead of tab headers, it will generate a vertical list of tab names.


Here is our example from above, but with TabCollection.showHeaders set to false




The account page is a good example of headerless tabs:



Tab Styles


In the webagent.css stylesheet, you can specify the style (such as the color) of the selected tab and its header, along with the style of the unselected tab.


/* Selected Tab and Header Color */
BACKGROUND-COLOR: lightsteelblue;


/* Unselected Tab Header Color */
border:0px solid white;

Sharing Data with tabs


In the Clarify Classic Client, you need to be careful to keep the contextual objects in sync between the tabs and the parent form so data is shared properly. This is not an issue here, because the tab and its data is all on the same page.

Further examples


The fcClient and fcAdmin code base are chock full of examples of using the tab control. Or if you want more details, just leave a comment.



Have fun!