Create a responsive user interface

Develop a
FactoryTalk Optix Application
 with multiple layouts adjusted for viewports of different sizes.
  1. Create screen types for different application layouts. See Screens.
    TIP: Start with developing three layouts for different viewports such as small, medium, and large. For more information, see Screen sizes and break points for responsive design - Windows apps | Microsoft Learn.
  2. Create a NetLogic that reads the window width (and height) and outputs a value based on the breakpoints.
    For example, create a NetLogic that reads the window width and returns a
    Small
    ,
    Medium
    , or
    Large
     enumeration value.
    At runtime, the NetLogic returns a value as you resize the window and exceed breakpoint values.
  3. Create a panel loader with a key-value converter that translates the values outputted by the NetLogic to dynamic links that target the screen types.
    At runtime, the panel loader displays a specific screen type based on the window width. As you resize the window and exceed breakpoint values, the application layout changes to adjust to different viewport sizes.
  4. (optional) To run a responsive application in supported web browsers:
    1. Add a Web Presentation Engine. See Create a Presentation Engine.
    2. Stretch the project in the web browser window. In
      Project view
      , select
      MainWindow (type)
       and:
      • In
        Properties
        , create a dynamic link between
        Full screen
         and
        Aliases
        {Session}
        Session
        UI Session
        Web session
        .
        For more information about dynamic links, see Create dynamic links.
        The
        {Session}/IsWeb
         alias resolves to
        True
         if the project runs in a web browser. For more information, see Profile objects for different Presentation Engines.
        At runtime, the Native Presentation Engine displays a windowed application, and the Web Presentation Engine displays a specific screen type based on the web browser window width.
      • In
        Properties
        , set
        Full screen
         to
        True
        .
        At runtime, the Native Presentation Engine displays a full-screen application, and the Web Presentation Engine displays a specific screen type based on the web browser window width.
    As you resize the web browser and exceed the breakpoint values, the application layout changes to adjust to different viewport sizes.
Provide Feedback
Have questions or feedback about this documentation? Please submit your feedback here.