Versions Compared

Key

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

Design display hierarchy and create navigation.

Displays Navigation →  Tutorial | Concept | How-to Guide | ISA-101 |  Reference


This Tutorial Teaches you to:

  • Design display hierarchy
  • Apply HMI standards
  • Create navigation
  • Build effective layouts

Prerequisites:

  • Add Tags to UNS (Tutorial)
  • Design Canvas Displays (Tutorial)
    • Create and configure new Layouts
    • Change layouts in runtime
    Design Dashboard Displays Tutorials


    Table of Contents
    maxLevel2
    minLevel2
    indent10px
    excludeTutorial
    stylenone


    1. Creating new Layout

    1. Go to Displays → Layouts
    2. Click on Insert New
      1. Layout Name: LayoutDemo
    3. Press OK button
    4. On the Panels, you will be able to see different formats, that can be edited by changing the "Edit" option.
    5. Change the Panel to Center
    6. In the table on the bottom, you can choose different displays to be under Page, Mobile, MobileLandscape (if needed, create different displays to use here)


    2. Changing Layouts in Runtime

    1. In the Displays → Draw, add two buttons
    2. Double-click the first button, and under Label Text add: Startup Layout
    3. Go to Dynamics, set Actions and choose OpenLayout
    4. In Layout, type Startup
    5. Repeat the procedure for the second button, but this time, the configuration is below:
      1. Label Text: Layout Demo
      2. Layout: LayoutDemo
    6. Run the solution
    7. Click the buttons to see the layout changing






    In this section...

    Page Tree
    root@parent
    spaces93DRAF