Best practices for designing CONNECT visualization-ready graphics

Design for web environments

Graphics should use only elements that are compatible with browser-based runtimes. Test graphics in a web context as early as possible to identify issues before export.

For details about which elements are compatible with browser-based runtimes, see Considerations when creating a ViewApp for the OMI web client in the AVEVA Operations Management Interface documentation. Note that the on-premises OMI web client supports the following components, but CONNECT visualization does not:

• Desktop-oriented components

• Web widgets

• Unrestricted scripting

Exposing custom properties to visualization editors

Custom properties that are public can be configured in CONNECT visualization by visualization editors. Custom properties that are private are not exposed to visualization editors.

Avoid exposing custom properties beyond a single level of embedding. Exposing deeply nested custom properties increases complexity and makes the graphic harder to maintain.

CONNECT visualization can display approximately 40 characters for the property name. If a property name exceeds this limit, the full name is available in a tooltip. For custom properties that you make public, use clear and concise property names that are below this character limit to ensure optimal readability.

Options and Symbol Wizards

Symbol Wizards let you define preset variations of a graphic, such as alternative layouts, color themes, and behavior modes. When these graphics are used in CONNECT visualization, Symbol Wizard choices appear as options that the visualization editor can select. Use Symbol Wizards when a graphic is intended for multiple purposes or needs to support common variations without exposing many individual properties. This approach simplifies configuration, keeps the graphic easy to use, and ensures consistent behavior across different visualizations.

For more information, see Symbol Wizards in the Industrial Graphic Editor documentation.

History Summary properties

History Summary properties use the visualization’s time context.

Drive navigation in experiences

When a graphic is added to a canvas visualization, and the visualization is added to an experience, the graphic can interact with the experience and trigger navigation actions. This can allow the graphic to drive the context within the experience. For example:

MyViewApp.Navigation.CurrentPath = "//Home/NavItem1";

Script optimization

Keep scripts short and focused. Remove unnecessary complexity and reduce branching where possible. This improves validation success and runtime performance.

Reducing file size

To keep graphics lightweight and compliant with CONNECT visualization file size requirements:

• Use vector content whenever possible

• Limit the number of embedded images

• Reduce image resolution when appropriate