Create a responsive user interface
Develop a
FactoryTalk Optix Application
with multiple layouts adjusted for viewports of different sizes.- reate 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 aSmall,Medium, orLargeenumeration 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:
- Add a Web Presentation Engine. See Configure presentation engines.
- Stretch the project in the web browser window. InProject view, selectMainWindow (type)and:
- InProperties, create a dynamic link betweenFull screenand .For more information about dynamic links, see Create dynamic links.The{Session}/IsWebalias resolves toTrueif 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.
- InProperties, setFull screentoTrue.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.
ui
user interface
Provide Feedback