Custom Menubars

Custom menubars allow you to add you own drop-down menubar content to the default menubar in ASI WebLink.

This section covers five web pages. Links to navigate the pages will be at the bottom of each page, and at the top in the breadcrumb links.

Overview

ASI WebLink creates a default drop-down menubar, which provides the end user access to several options, while taking up very little space in the overall layout.

If you do not have any Trend Events set up, the default menubar will contain two header content items, View and Theme.

Fig. 1 Default menubar

If you do have at least one Trend Event set up, the default menubar will contain four header content items, View, Theme, Graph and Report.

Fig. 2 Default menubar with Trend Events

The default toolbar and menubar look like this at the top of the ASI WebLink layout.

Fig. 3 Default toolbar and menubar

With the addition of your own custom menubar content, you can provide navigation to multiple webviews, while maintaining a nice professional look and feel to your ASI WebLink project.

Fig. 4 Default toolbar and menubar with custom menubars

Menu Bar Size

The menubar in Fig. 1 is about 124 pixels long. If you are using a webview that is 800 pixels wide, that leaves you about 676 pixels of available real estate to fit in your custom menubars.

The menubar in Fig. 2 is about 255 pixels wide. If you are using a webview that is 800 pixels wide, that leaves you about 545 pixels of available real estate to fit in your custom menubars.

Why use Them?

Normal navigation is usually provided through the use of buttons and/or labels. The trouble with these items is that they take up space on your webview. You will also not be able to provide universal navigation that way, which means you won't be able to link to every other webview from any specific webview. This will leave the end user in situations where they "can't get there from here". Their only recourse is to hit the back button a lot, and remember a specific sequence of webviews to be able to navigate deep into the ASI WebLink project.

As a programmer, you will also find it hard to put your buttons and labels in the same place on each webview. This will leave the end user searching to see what buttons are available on each webview, which will possibly confuse them if they find the same button in various locations on different webviews.

By using custom menubars, you will be able to provide universal navigation, which gives the end user a consistency to the navigation. They are also easier to maintain as you build you project, since all of the JavaScript needed to build the custom menubars is held in the project.js file. This project.js file is what you see when you go to the Global Functions tab on any webview.

With custom menubars, it is easier to add to your navigation as you build your ASI WebLink project. Each individual webview only needs a single line of JavaScript code in the OnShow tab, which invokes the JavaScript function that builds the menubars. As you make changes to the menubar JS code in the Global Functions tab, there is nothing to go back and edit on each individual webview.