Versions Compared

Version Old Version 2 New Version 3
Changes made by

Markus Schimper

Markus Schimper

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

A custom navigation symbol allowing a horizontal navigation bar to be added to PI Vision displays. The menu itself is editable through html, and the html code supports adding multiple site menus - selectable through the settings blade of the instantiated symbol. The advantage is that you can quickly add is completely configurable in AF, having the advantage, that the same navigation bar can be quickly added on top of all PI Vision displays for a site, and have providing access to an advanced, multi-level menu structure. 

...

In order to create the menu structures you will need to use the included AF element templates. There are two XML files included, one of them contains an AF database called "weruNavigationMenu" and contains an example menu structure to get you started. The other XML file only contains the library objects (2x element templates, 2x custom reference types), which can be imported into any existing AF database in order to allow end-users to create site-specific menu structures themselvesThe WPVS Installation package contains a XML file, which is called “Navigation Menu Templates and References.xml”.

  1. Open PI System Explorer and navigate to the AF database you want to enable menu structures in.

  2. From the zip file "weruNavigationMenu AF Contents.zip" extracted in point above, we have the file "weruNavigationMenu Templates and References.xml". Import it into your database as described in step 7 above.

  3. Check in any changes, if necessary!

  4. Users can now create a menu structure anywhere in this database. Make sure you start by using the template "Main Menu Template", and then use the "Menu Item Template" for all menues below.

  1. Assuming your AF Database contains the necessary AF content, open PI System Explorer and go to your database.

  2. Create a new element anywhere, using the AF Element Template "Main Menu Template". Give the element a name describing what the menu contains.

  3. You will now create the actual menu items as child elements of your new element, using the AF Element Template "Menu Item Template". Any element directly under your "Main Menu Template" element will appear as root level menu items, and you can build sub-menu items below each of these using the same approach.

  4. The attributes in each Menu Item element look like this

    Image Removed

  5. For a menu item containing a sub-menu, only the "Display Text" is required, but for normal menu items the "URL" should be filled out. The icon attribute allows you to specify icons from the Font Awesome font set, and it will be displayed in front of the Display Text shown in the menu. Find icons by going to Font Awesome and select one. Copy the "fa-" text shown above the icon, before pasting the "fa-" into Icon field. The Order attribute is a 0-based integer allowing you to specify the order each menu item is displayed. If this is left blank, the menu items will be displayed sorted alpha-numerically by the element name.

...

  1. , or create a new one (recommended).

  2. Go to the Library tab and do a right click on the upper most element, which is the name of the database, and select “Import from File…”

  3. Choose the Navigation Menu Templates and References.xml file and the click “Ok” with the following configuration:

    Image Added

  4. Go to the Elements tab, do a right click on the upper most element, which is “Elements”, and select “New Element”. In the upcoming dialog, choose the “Main Menu Template” as the Element Template

    Image Added

  5. Rename it to the name you want to give the menu

  6. Image Added

    All Child elements need to be derived from the Menu Item Template. The correspond to the items in the navigation bar. Child elements of a child elements are sub-items in the menu structure.

  7. An exemplary navigation menu structure may look like this:

  8. Image Added

    Each Menu Item Template has the following attributes which can be configured:

  • Display Text: The text that the item shows in the navigation menu

  • Icon: Can be used to

  • Open In: Can be “New Window” or “Same Window” and defines whether the URL opens in the same or in a new window when the user clicks on the item

  • Order: Zero based position in the navigation menu

  • Tooltip Text: Specifies optionally a tooltip that is displayed to the user when hover over the item

  • URL: Specifies the URL that opens if the user clicks on the item

  1. Navigate to PI Vision, create a new display, go to the Navigation AF database and click the upper most element. Select the new symbol in the symbol library and drag the attribute "Site Menu" onto the display.

  2. Make sure that the Navigation Menu symbol is on top of all elements, to avoid drop-down menus from being obstructed by other content. This can be done by clicking on the Navigation Menu symbol whilst in edit mode and changing order to "Bring to front".

...

...