Form - Overriding and Styling Inline Tabs

Contents

1 Overview

The Inline tabs of a bxp form are a convenient way of getting a lot of fields on a form without taking up lots of space. Basic_-_Inline_Tabs

Sometimes you may wish an inline tab to be a different colour or perform a different action.

2 Different actions

Each tab has it's own unique Id. If we had form 1305 then we would be able to put in the following in JavaScript

document.getElementById('liTab_strCDA_1305_field_0_1_tableid_2').setAttribute("onclick", "fn_Tabs_strCDA_1305_field_0_1('tableid_2', 'strCDA_1305_field_0_2');document.getElementById('strCDA_1305_field_0_8').value='group1';");

• The first part identifies the tab, the getElementById.
• the liTab_ is the unique name of the tab which you can find by looking at the source code of the page.
• setAttribute allows you to change one of the features of the element
• onclick means we want to change what happens when the tab is clicked
• bxp creates the function to show and hide the tabs, this function is uniquely named for each inline tab block you have on the page and will start with fn_Tabs_
• This function takes two parameters both pertaining to the section group that the tabs are showing
  • the table_id of the section group
  • the CDA field name of the section group, so it can change the + icon of the section group
• in the example above we add an extra function that sets a field in the form to have the value group1

3 Different styles

Each tab is styled by .cssInlineTabs which is found in https://ww3.allnone.ie/library/style/style_master_modulespecific3.css

It consists of ul, li a and a:hover tags.

You can copy this code into your own style sheet and style as you require.

In the javascript of the form you can then change the class of the tabs to point to your custom tab styling.

document.getElementById('liTab_strCDA_1305_field_0_1_tableid_2').className = "mystyle";

4 Support

If you'd like a hand playing with any of the options above please don't hesitate to contact our support team on +353 1 429 4000 or email us at support@bxpsoftware.com