Developers

Omnis Technical Note TNJC0016Feb 2022

Toolbar and Segmented Controls

for Omnis Studio 10.2 or above
By Omnis Engineering

The JavaScript Toolbar and Segmented controls allow a compact and convenient way to provide navigation in your web and mobile applications, and with added support for SVG icons in Studio 10.2 they become infinitely scalable and a great asset in any web or mobile UI. Both controls react to the button or item clicked so you can trap the event and branch your event code accordingly.

In our simple example (which you can download: SegmentedToolbar.zip) we have set it up to load a different JS form into a subform when the toolbar or segmented control is clicked, while the main JS form that opens on startup allows you to switch from the Toolbar form to the Segmented form for easy comparison.

You can use a Toolbar or Segmented control in Studio 10.0/1, but those versions do not support SVG icons, however you can use PNG icons from an older iconset in Omnis; there are example apps for both controls in the HUB that use these style of icons.

Toolbar Control

The number of buttons or items in a Toolbar is set in the $itemcount property under the ‘Item’ tab in the Property Manager; there you can set the $currentitem property to work on each item (or click on an item in the design form), such as specifying the $itemtext and $itemiconid which can be an SVG icon; in our example, we have used icons from the ‘material’ icon set, which you can choose via the Select Icon dialog.

If true, the $itemoverflow property forces a toolbar item onto the overflow menu which appears as 3 vertical dots on the right-hand end of the toolbar; when the form is displayed on a small screen or device, or the browser window is resized, toolbar items are ‘pushed’ onto the overflow menu automatically, but you may want 1 or 2 items to always appear in this menu, such as a 'Settings' option (see the fifth item on the Toolbar in our example).

Under the 'Appearance' tab in the Property Manager, you can setup many color options (see above) for a toolbar, but if you accept the default color settings, you will get a nice looking Toolbar that is displayed using the current JS theme; when you have the jsToolbar form open, try changing the Theme using the Ctrl-J option (or you can create your own theme for the your app).

You can also set the $edgefloat property of the Toolbar, setting it to kEFposnTopToolbar to ‘stick’ it to the top of the form; this ensures the toolbar width will change as a browser window is resized or the form is displayed on different devices, which in turn will make the overflow menu work nicely.

Another feature of a Toolbar is the option to show a ‘Side menu’ at the left-hand edge of the toolbar; this can provide yet further options for your app. To do this, set $sidemenu to true and add a list variable name to $dataname containing the menu items; this is setup in the $construct method in jsToolbar of our example.

Clicking or tapping on an item on the Toolbar is reported in pClickedItem of the evClick event, while selecting an item in the side menu is reported in evNavigationClick; see the $event method for the Toolbar control in the example.

On evClick   Switch pClickedItem     Case 1       Do $cinst.$objs.Subform.$classname.$assign("jsform1")     Case 2 ## etc

Segmented Control

The number of segments or buttons in a Segmented control is set in the $segmentcount property under the ‘Segment’ tab in the Property Manager; there you can set the $currentsegment property to work on each item, such as specifying the $itemtext and $itemiconid which, like the Toolbar, can be an SVG icon in Studio 10.2.

Like a toolbar, the Segmented control has many color and style properties that you can set under the Appearance tab in the Property Manager, but again like the toolbar, these use the default colors so will look good with the current JS Theme, or will adapt automatically as you change the theme.

You can hide or show a segment using the $segmentenabled property and setting the $hidedisabledsegments property to kTrue. You will need to set the $currentsegment in your code if you wish to hide or show a segment at runtime; see the code behind the ‘Show segment’ check box in the example.

Clicking or tapping on an item on the Segmented control is reported in pClickedSegment of the evClick event which can be trapped in the $event method for the control.

Testing the library on a mobile device

To test the form on a mobile or any other device, you need to keep the library open and enter the following URL in the browser on your device:
http://<your-ip-address>:<omnis-port-number>/jschtml/jsMain.htm

To find the port number of your Omnis Studio, test the remote using Ctrl/Cmnd-T and the port number will be displayed in the browser on your development computer, such as http://127.0.0.1:50600/jschtml/jsMain.htm. Enter this URL on your mobile device substituting the ip-address of your local host with the real ip-address of your development computer running Omnis (you can use the ipconfig command to find the IP address of your development computer, via the Command prompt on a PC or the Terminal on a Mac). For the app to work your Omnis library must be open and your mobile device must be on the same local network as your development computer running the library.

More information

You can find more information about the Toolbar and Segmented controls in the online docs in the JavaScript Components section.

You can find more information about SVG icons, including the ‘material’ iconset, in the JavaScript Component Icons section.