The Button - Tabs Control links Pages together, allowing an agent to navigate through a Workflow.

 

It functions similarly to a normal Button, but can be styled in a more diverse manner such as changing its styling when hovered over or linking to the current Page. This makes it suited for being placed on multiple Pages as a Used Field, for example as part of a set of buttons at the top of each Page used to navigate to different branches of a Workflow while giving the agent visual feedback on the current branch.

 

 

 

This Control is part of the Basic Control pack, and will always be available.

 

 

Add a Button - Tabs to the Page. The options and style can be configured in the Options tab and Styling tab of the Field Properties.

 

Button - Tabs Fields can be styled in a Stylesheet by referencing the control-button-tabs class.

 

To link to another Page, use the Page Selector in the Advanced Options tab.

 

The three Styling tab sections relate to the three conditions for the button: the default appearance (Style - Button), the appearance when the mouse is placed over the button (Style - Hover), and the appearance when the current Page is the button's linked Page (Style - Selected).

 

 

 

In the above example, the first button is linking to the current page, so is using the "Style - Selected" appearance. The middle button is neither linking to the current page nor being hovered over, so is using the "Style - Button" appearance. The final button is being hovered over, and so is using the "Style - Hover" appearance.

 

 

As with other button-type Fields, it is possible to require that a Page passes Validation before the button will activate. This prevents the agent from leaving the Page before all requisite details have been collected.

 

As with other button-type Fields, upon activation the button will then be temporarily disabled until the action has completed.

 

As with other button-type Fields, it is possible to trigger this by JavaScript or Update Links. Please see the .click() article for more information and an example regarding using JavaScript.

 

Care should be taken to make sure the widths and heights of the different styling sections are all the same, or else Fields may visibly move on the Page when the different styles are triggered due to the change in Button - Tabs size.