Skip to main content


deprecated class %ZEN.Component.toolbar extends %ZEN.Component.component, %ZEN.Component.dataView

Implements a simple HTML5 toolbar component.
This is an HTML5 component; it will only correctly run on HTML5 compliant browsers. A toolbar can show drop down menu choice, tabs, messages, choice boxes and other items. It is controlled by a JSON data model.

Property Inventory

Method Inventory


parameter DEFAULTENCLOSINGCLASS = ztb-menu;
Inherited description: Subclasses can set this to change default enclosingClass used for this component.
parameter SYSMODULE;
Do not include in "form" module.


property imageStyle as;
Additional style to apply to images in the menu.
Use this to change the size of images.
Property methods: imageStyleDisplayToLogical(), imageStyleGet(), imageStyleIsValid(), imageStyleLogicalToDisplay(), imageStyleLogicalToOdbc(), imageStyleNormalize(), imageStyleSet()
property onchange as %ZEN.Datatype.eventHandler;
onchange event handler: Notification that a control within the toolbar (such as a "choice") has changed value. This event is passed 3 arguments: key, value, and final. final is true when a value is finished changing.
Property methods: onchangeDisplayToLogical(), onchangeGet(), onchangeIsValid(), onchangeLogicalToDisplay(), onchangeLogicalToOdbc(), onchangeNormalize(), onchangeSet()
property ongetdata as %ZEN.Datatype.eventHandler;
ongetdata event handler: If defined, this event is returns an array of items to be displayed within the menu.
Property methods: ongetdataDisplayToLogical(), ongetdataGet(), ongetdataIsValid(), ongetdataLogicalToDisplay(), ongetdataLogicalToOdbc(), ongetdataNormalize(), ongetdataSet()
property onpagechange as %ZEN.Datatype.eventHandler;
onpagechange event handler: If defined, this event is fired when the user selects a new page number from a "pages" item. This is passed: key and page (selected page, 1-based). from the data element associated with the menu choice.
Property methods: onpagechangeDisplayToLogical(), onpagechangeGet(), onpagechangeIsValid(), onpagechangeLogicalToDisplay(), onpagechangeLogicalToOdbc(), onpagechangeNormalize(), onpagechangeSet()
property onselect as %ZEN.Datatype.eventHandler;
onselect event handler: If defined, this event is fired when the user clicks on a item within the menu. This is passed: key, action, and targetId from the data element associated with the menu choice.
Property methods: onselectDisplayToLogical(), onselectGet(), onselectIsValid(), onselectLogicalToDisplay(), onselectLogicalToOdbc(), onselectNormalize(), onselectSet()
property scrollOffset as %ZEN.Datatype.integer [ InitialExpression = 0 ];
Index (0-based) first top-level item to display when scrolled.
Property methods: scrollOffsetDisplayToLogical(), scrollOffsetGet(), scrollOffsetIsValid(), scrollOffsetLogicalToDisplay(), scrollOffsetLogicalToOdbc(), scrollOffsetNormalize(), scrollOffsetSet()
property selectedIndex as %ZEN.Datatype.integer [ InitialExpression = -1 ];
Index (0-based) of selected item within the top-level menu.
Property methods: selectedIndexDisplayToLogical(), selectedIndexGet(), selectedIndexIsValid(), selectedIndexLogicalToDisplay(), selectedIndexLogicalToOdbc(), selectedIndexNormalize(), selectedIndexSet()
property style as;
Additional style to apply to items in the menu.
Property methods: styleDisplayToLogical(), styleGet(), styleIsValid(), styleLogicalToDisplay(), styleLogicalToOdbc(), styleNormalize(), styleSet()


clientmethod choiceClick(evt, index, choiceNo, newValue) [ Language = javascript ]
Mouse click handler for choice control.
clientmethod controlChange(id, index) [ Language = javascript ]
Change handler for text control.
clientmethod controlFocus(id) [ Language = javascript ]
Focus handler for text control.
clientmethod controlKeyPress(evt, id, index) [ Language = javascript ]
Key press handler for text control.
clientmethod getModel() [ Language = javascript ]
Get the model used to drive the menu.
clientmethod getPagingHTML(index, pageNo) [ Language = javascript ]
GetHTML for a "page" item.
clientmethod getTopItemHTML(info, index) [ Language = javascript ]
Get HTML for one top-level menu item.
clientmethod hideAll() [ Language = javascript ]
Hide all dropdowns
Action handler for menu item.
User click on a menu item.
clientmethod pageChangeHandler(evt, itemId, key, page) [ Language = javascript ]
Click handler for paging item.
clientmethod renderContents() [ Language = javascript ]
Client-side method to render this component.
clientmethod scrollClickHandler(evt, which) [ Language = javascript ]
User click on scroll button.
clientmethod selectTab(key) [ Language = javascript ]
Select a tab item given its key.
clientmethod setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.
clientmethod setWidth(width) [ Language = javascript ]
Set the width (in pixels) of this component.

Inherited Members

Inherited Properties

Inherited Methods

FeedbackOpens in a new tab