Create a responsive user interface
Develop a FactoryTalk Optix Application with multiple layouts adjusted for viewports of different sizes.
-
Create screen types for different application layouts. See Screen.
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.
-
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.
-
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.
-
(optional) To run a responsive application in supported web browsers:
As you resize the web browser and exceed the breakpoint values, the application layout changes to adjust to different viewport sizes.