The Composite Application Framework Toggle controls enable managing the client-side visibility of controls that you can hide and the server-side rendering property of controls that you cannot hide.

Only the selected control from the group listed in the value property of the toggle control is visible. Selection options are specified using javax.faces.SelectItem and javax.faces.SelectItems with each value specifying a control ID. Selecting an option whose value does not specify a control ID hides all controls in the group. For more information, see the Option Group and Option controls in webMethods CAF Tag Library Reference.

When using a toggle control, if the toggle control has three options, controlId-one,controlId-two, and controlId-three and the toggle control's value property is empty, then all of the controls are hidden. If the toggle's control value property is set to controlId-one, then controlId-one is visible and the remaining controls are hidden.

For hideable controls, the toggle control modifies the control's client-side visibility without requiring a page refresh or contact with the server. For more information, see Hideable Controls.

Toggle control options can reference external hideable controls using external portlet references, or raw HTML elements using literal HTML references. For more information on how to construct these references, see Control ID Reference.

You can use a toggle control to change a single control from visible to hidden. For example, if the toggle control has two options, controlId-one and no-specified value as the second option leaving the Toggle Button control's value property is empty, then controlId-one is hidden. If the toggle's control value property is set to controlId-one then controlId-one is visible.

For controls that are always visible and cannot toggle between visible and hidden. However, you can use a toggle control to change the control's server-side rendered property, and refresh the page to display the control’s updated state from visible to hidden. To use the toggle control to show or hide controls that are usually visible contain the toggle control in Form control. The toggle control updates the current state of any controls in the Form to refresh the page.

When a toggle control is positioned after, top-to-bottom, or left-to-right of any of the controls it toggles, you must add an Initiate Toggle control to the view before the first control, at the same level as the toggle control. For example, if the toggle control is in a table column, the Initiate Toggle control is the first control in the first column of the table. Set the Initiate Toggle control's for property to reference the toggle control.

You can also use an Initiate Toggle control, when a toggle control comes after one of the controls it toggles.

For controls that are always visible, the toggle control can change the control's server-side rendered property, refreshing the page to display the updated state to visible or hidden. To use the toggle control to show or hide controls that are usually visible, contain the toggle control within a Form control. The current state of all the controls within the form are transferred to the refreshed page.

The server-side component object model for toggle controls extend the com.webmethods.caf.faces.component.toggle.Toggle class. These controls include the following: