Features, discussions, tips, tricks, questions, problems and feedback

Different navigation options in the SmartUI

One of the most common questions when using the SmartUI is how to implement navigation. This topic aims to provide examples on many different ways to implement navigation in a project.

There are basically 3 components involved in implementing navigation in general:

  1. Use TemplateGO controls on a form and switch the content displayed in these based on input from the user.
  2. Use the Execute Command behaviour to trigger the opening of new forms, popup forms or replacing an existing form.
  3. Make use of a menu-bar, buttons or other selection mechanism to provide the user with the navigation interface.

Example 1 - The quick way

By using the TemplateGONavBar you can get up and running quickly. The TemplateGONavBar already contains a menu bar for navigation, as well as a TemplateGO.

(A TemplateGO stands for Template Graphic Object and basically is a control which can host graphic forms)

Example 2 - Another quick way

The default installation of the product also offers many pre-created navigation templates under the projects section in the Enterprise Manager:

You can use these templates in your own projects by:

  1. Create a new project
  2. Right click on the project navigation which you would like to use in your new project and select “copy sub items”

  1. Right click on your own project and select “paste”

  2. You can then use the existing navigation structure as a baseline for your own

Example 3 - Using your own menu strip

In this example we will use a menu strip docked at the top of the form, and a TemplateGO docked fill:

When you put the menu strip on your form it will automatically be docked on top of the form.

Now place the TemplateGO on the form and select the “Fill” option in the docking property:

Now you have a form with a menu strip that will act as the navigation interface, and a TemplateGO that will host the actual graphic forms. Let us add two menu options, “Main” and “Alarms”

  1. We will add menu items to our menu strip by editing the “Items” property of the menu strip

  1. Add two (2) menu strip items. Change the “Text” property of the one to “Main” and the other to “Alarms”. Also change the “Name” property to “mnuMain” and “mnuAlarms” respectively.
  2. We want to load a graphic form showing our main overview when a user clicks on “Main”, and another graphic form showing alarms when a user clicks on “Alarms”. So create two new graphic forms, one called “Main” and the other called “Alarms”. Note: It does not really matter what you name them, we will be informing the execute command behaviour which one to load anyway
  3. After you have created your two new graphic forms, select the first menu item “mnuMain” in the properties window

  1. Now select the “Execute command” behaviour

In the execute command behaviour we can choose which form to load and also what type of command to action. In this case we want to open our main form and load it into our TemplateGO.

The “Main” form will now be loaded into the destination TemplateGO as configured. By following this process you can implement your complete menu system.


The above article explained the basic concepts behind navigation in the SmartUI. By using these principles you can create very flexible navigation structures.

1 Like

Combining this knowledge, and this topic: How to design a graphic form to cover multiple monitors (multiple screens)
In user case:
Consider a navigation scheme, where Operator spans over 2 monitors with such design:


We have 2 independent areas for 2 monitors, each consisting of TemplateGONavToolbar, Alarmviewer and some information on top of the screen. This is not most flexible way to create such navigation.
Here You haveto draw twice same stuff for both screens, and later remembering to manage it independently.
Remember, that TemplateGO can be multilayered, so there can be templatego inside templatego and these objects can have aliases which are actually dynamic, so this can be manipulated much more easily. Why not take advantage of that? So, design dynamic (with alias parameters) single menu screen:
obraz
And open it twice in 2 TemplateGO’s:

This way no need to manage scripts twice, no need to manage menubar twice and other stuff. Plus, You can dynamically switch stuff inside using aliases, if You will setup alarmviewer to use alias instead of static alarm agent and top part of the graphic form to do the same.

Now, going onwards it might happen that we actually can have inside TemplateGONavtoolbar a screen with aliases, but TemplateGONAvtoolbar does not have functionality of providing values for these using automated creation of menu bar. Because of that it is much more flexible and easy to use “Example 3” from first post of this topic.

1 Like

It is very important to understand the dangers of self-referencing while also using TemplateGO objects.

Consider project which looks like this:

This is correct. Now, after going into page it will look like this:

Notice that we are still in HOME_LP graphic form, the element that was changed was graphic form INSIDE TEMPLATEGO, not the graphic form itself!

Now, what happens is, the home button should have Execute Command with Replace to switch to LANDING_PAGE_KFN.viz, but instead, if it has Execute command with replace pointing at HOME_LP_KFN.VIZ. Which means We have opened HOME_LP_KFN and inside it we have templateGO which should be replaced now with HOME_LP_KFN, but that would mean, it would have inside another HOME_LP_KFN and so on… so eventually Operator runs out of possibilities and just refreshes the page.

obraz

So, in other words, it is self-referencing and trying to make dangerous infinite loop. So it goes into that loop and eventually, runs out of memory after number of tries.

That is why the HOME button on all pages should point at LANDING, instead HOME to make it work properly.

What is more to add, it would be actually much more efficient to use any of the mentioned before ways to navigate with navigation buttons on the actual HOME_LP_KFN opening different pages inside TemplateGO object:


This way navigation is done only once on one page and does not have to be copied over to every screen.

1 Like