Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


The Horizontal Menu component enables you to build a menu structure by setting up multiple links to different page URLs from the component. Our example has a menu with links to three internal pages and one external page on the Internet.  

This example shows a Horizontal Menu with four items. Three items are linked to views within the Perspective project and the fourth is linked to a website.

The third item in the list, Field Offices, has four subitems. Each item links to a view for a different field office. Icons are taken from the Material Design icons that can be found here: https://material.io/tools/icons/.

On this page ...



To begin with we have created three viewsWestViewEastView, and Welcome. They are each coordinate type views. As we create each new view, we checked the Page URL property and added a page name. 

View NamePage URL
WestView/west_page
EastView/east_page
Welcome/


On Page Configuration, you'll note that each page is already set up with a Primary view. 


Now we're ready to start building the navigation.


The first thing we'll set up is a view that will hold the Horizontal Menu component. We'll use this view as a header for our pages within this project. 

  1. In the Project Browser, right click on Views and select the NewFolder option. Name the folder "Header".
  2. Right click on the Header folder and select the NewView option. 

    Name: Horizontal-Menu-Nav
    Layout: Coordinate
    Page URL: unchecked



  3. Click Create View
  4. In the Property Editor for the view, set the defaultSize property as follows:

    width: 800
    height: 50

  5. Drag a Horizontal Menu component onto the view.
  6. In the Property Editor, set the Position Properties as follows: 

    Property

    Value

    position.x15
    position.y10
    position.width550
    position.height30
  7. In the Property Editor, scroll down to style and click the ModifyStyle icon.

    1. Expand the Text section and set the style options as follows:

      Property

      Value

      props.style.fontWeightbolder
      props.style.fontFamilyVerdana
      props.style.fontSize14px
    2. Expand the Border section and set the style options as follows:

      Property

      Value

      props.style.borderStylesolid
      props.style.borderColor#555555
      props.style.borderRadius16px
      All Corners(selected)

        Your Designer will look like this at this point: 



  8. Open Page Configuration by clicking on the Settings  icon at the bottom left of the Designer window.

  9. Under Page Configuration, click on Shared Settings.
  10. In the header part of the page mockup, click on the Add  icon. 
  11. Select the Horizontal-Menu-Nav view from the dropdown.



  12.  Click OKThe Horizontal-Menu-Nav view will now appear at the top of all pages in the project. 


Now let's set the properties for each of the four tabs in the Horizontal Menu. Each tab will have a display a name and an icon and will have a target page or website to open when clicked.  

  1. In the Property Editor, expand the items property and set the following for item 0: 

    PropertyValue
    props.items.0.enabledtrue
    props.items.0.target/west_page
    props.items.0.icon.pathmaterial/explore
    props.items.0.icon.color

    #D97700

    props.items.0.labelWest Site

    The Property Editor will look like this:



  2. In the Property Editor, set the following for item 1: 

    PropertyValue
    props.items.1.enabledtrue
    props.items.1.target/east_page
    props.items.1.iconmaterial/store
    props.items.1.color

    #D97700

    props.items.1.labelEast Site


  3. In the Property Editor, set the following for item 2: 

    Do not set a props.items.2.target property value for this tab because we will set up dropdown tabs in the next section..

    PropertyValue
    props.items.2.enabledtrue
    props.items.2.icon.pathmaterial/landscape
    props.items.2.icon.color

    #D97700

    props.items.2.labelField Offices
  4. In the Property Editor, set the following for item 3: 

    This tab uses a website as its target, therefore it does not need to target a page within Perspective.


    PropertyValue
    props.items.3.enabledtrue
    props.items.3.targethttp://inductiveautomation.com/about/
    props.items.3.icon.pathmaterial/people
    props.items.3.icon.color

    #D97700

    props.items.3.labelAbout

The third tab in the Horizontal Menu is titled "Field Offices." Instead of navigating to one page, this tab has a dropdown menu with four options on it: Reservoir, Dock, Warehouse, and Surveillance.

  1. To start, we created a new folder in Views called Field



  2. Within the Field folder, we create four views: ReservoirDockWarehouse, and Surveillance. Make them Coordinate types and set up a page URL for each.  

    View NamePage URL
    Reservoir/reservoir_page
    Dock/dock_page
    Warehouse/warehouse_page
    Surveillance/surveillance_page
  3. Open the Horizontal-Menu-Nav view and select the Horizontal Menu component.

  4. In the Property Editor, expand the properties for Item 2. 



  5. Select the props.items.2.items property.

  6. Click the Add icon to add four items.
  7. Set the properties for Item 0 as follows:

    PropertyValue
    props.items.2.items.0.enabledtrue
    props.items.2.items.0.target/reservoir_page
    props.items.2.items.0.icon.pathmaterial/rowing
    props.items.2.items.0.icon.color#00ACAC
    props.items.2.items.0.labelReservoir

    The Property Editor will look like this: 



  8. Now we'll do the same for the other three items. Set the properties for Item 1 as follows:

    PropertyValue
    props.items.2.items.1.enabledtrue
    props.items.2.items.1.target/dock_page
    props.items.2.items.1.icon.pathmaterial/directions_boat
    props.items.2.items.1.icon.color#9E6635
    props.items.2.items.1.labelDock
  9. Set the properties for Item 2 as follows:

    PropertyValue
    props.items.2.items.2.enabledtrue
    props.items.2.items.2.target/warehouse_page
    props.items.2.items.2.icon.pathmaterial/local_shipping
    props.items.2.items.2.icon.color#0000AC
    props.items.2.items.2.labelWarehouse
  10. Set the properties for item 3 as follows: 

    PropertyValue
    props.items.2.items.3.enabledtrue
    props.items.2.items.3.target/surveillance_page
    props.items.2.items.3.icon.pathmaterial/videocam
    props.items.2.items.3.icon.color#AAAAAA
    props.items.2.items.3.labelSurveillance
  11. Save your project. 

  12. Click Tools > Launch Perspective > Launch Session
  13. Click on the tabs in the header to view different pages. For our example, we have put a few components on each view. Here is an example of what the Field Offices > Reservoir page might look like: 






  • No labels