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>
<div id=”tab_more_info”>
This is the contents of the more info tab
</div>
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”>
TabCollection.build(0);
</script>
Test
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. |
Example:
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 */
.clsTab
{
VISIBILITY: hidden;
BACKGROUND-COLOR: lightsteelblue;
}
/* Unselected Tab Header Color */
.clsTabHeader
{
VISIBILITY: hidden;
border:0px solid white;
BACKGROUND-COLOR: plum;
}
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!
