Allows the easy The FlowPanel allows configuration of multiple symbols and components in a repetitive and responsive waymanner. It offers a user-friendly provides an interface that automatically adjusts the layout of items adjusts item layouts based on panel characteristics and the datasourcedata source. This topic explains describes how to configure the FlowPanel, its select layout options (panel type), choose data source types, and understand how the control dynamically adapts to the runtime environment.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Requirements
This component is Portable. It runs both on Windows and on Web Pages hosted in any platform.
Configuration
To configure a FlowPanel:
Go to Displays / Draw.
On the Components Panel, select Viewer, then FlowPanel.
Click or drag-and-drop it on the Drawing area to use it.
Double-click the component to open the configuration window.
FlowPanel Settings | |
|---|---|
Field | Description |
Panel Type | Configures how items are arranged in the container. Options include WrapPanel for wrapping content, Canvas for manual positioning, DockPane for docked elements, Grid for a grid layout, StackPanelHorizontal and StackPanelVertical for stacking, and UniformGrid for uniform distribution. WrapPanel: Aligns items horizontally and wraps them |
Panel Types
The FlowPanel supports several panel types that control the layout of symbols or components. Each panel type has specific behavior, described below:
1. WrapPanel
Layout: Aligns items horizontally, breakingto the next line when the width |
is |
exceeded. |
Best suited for horizontal listings or galleries where the number of items can vary. |
It dynamically adjusts line breaks when the window is resized. Canvas: Positions items at fixed |
2. Canvas
Layout: Allows positioning of items at absolutecoordinates (x, y) within the panel. |
Suitable for cases that require precise control of |
item placement, such as maps. The panel does not adapt easily to resizing due to fixed positions. DockPanel: Anchors items to the panel's edges or fills |
3. DockPanel
Layout: Items are anchored to the edges (top, bottom, left, right) or fill theremaining space in the center. |
Ideal for |
layouts that distribute content around a central element |
. It adapts well to resizing by adjusting items to the available space. |
Grid |
: Organizes items |
into rows and columns |
with flexible cell sizing |
. |
Useful for structured layouts that require tabular or grid-based |
alignment. The grid layout adjusts proportionally as the panel resizes. StackPanelHorizontal |
5. StackPanelHorizontal
Layout: Aligns items horizontally |
in a single line without wrapping. This is ideal for simple horizontal lists like menus or toolbars. |
However, the layout may require scrolling if the content exceeds the panel width. StackPanelVertical: Stacks items vertically in a column. Suitable for simple vertical lists, such as |
6. StackPanelVertical
task lists or side menus. |
The panel may adjust its height to fit all items within the vertical alignment. |
UniformGrid |
: Distributes items evenly in a grid where all cells have the same size. |
It is ideal for layouts where uniformity is needed, such as image galleries. |
Data Sources
The FlowPanel supports four types of data sources: Text, StringTag, Array, and Object. The choice of data source determines how items are generated and displayed in the panel.
1. Text
#Element=<control or symbol name> #<property name1>=<property value1> #<property name2>=<property value2> etc- where, Element and Property Name are case sensitive.
#element=LampSymbol #Color=red #Size=medium
#element=PumpControl#State=on#FlowRate=Tag.Tag12. StringTag
The layout dynamically adjusts based on screen size changes. | |
Panel Settings | Sets specific configurations for the panel, allowing adjustments to layout parameters like width, height, and margin. An Apply button finalizes the changes, ensuring the panel reflects the new settings. |
Width | Specifies the width of items within the container. Users input a value, and the system automatically applies the specified width across all items. |
Height | Defines the height of items inside the panel. The height value applies uniformly across all components, ensuring consistency in vertical size. |
Margin | Adjusts the spacing around items within the container. The margin creates space between items and the container’s borders or other items, based on the value entered. |
Source | Determines the data source for the items displayed within the panel. Options include Text for static text input, StringTag for tagged text elements, Array for data lists, and Object for structured data types. Text: Allows manual configuration of items using static text. Items and their properties are defined with case-sensitive element and property names. Suitable for defining symbols or controls, with properties linked to static or dynamic values. StringTag: Similar to the Text source but links item properties to dynamic SCADA tags. This allows the configuration of items that respond to real-time data changes. Used for dynamically updating symbols based on tag values. Array: Uses a string array where each entry defines an item and its properties. This enables dynamic generation of multiple items at once, useful for scenarios with several items. Each item follows the same format as Text or StringTag. Object: Uses a DataTable or DataTemplate for advanced configurations. Each row in the table represents an item, and each column defines the item's properties. Ideal for configurations that source data from databases or templates. |
Max Items | Sets the maximum number of items displayed in the panel. The system enforces this limit, ensuring that no more than the defined number of items appear, regardless of the data source size. |
Reload | Reloads the data source, updating the items shown within the container. This action pulls the latest data, ensuring that the displayed items match the current state of the source. |
Preview | Displays a real-time preview of how items will appear within the panel. The system generates this preview based on the current data and configuration settings, allowing users to see changes before applying them. |
Count | Provides the total number of items available from the data source. The count helps users understand the number of items accessible, though not all may be displayed depending on the Max Items setting. |
Click on Image to Add | Allows users to click on an image to add it as an item to the panel. This interaction simplifies item selection by letting users visually select elements from a predefined set of images |
3. Array
- Format: String array, where each entry follows the same format as Text or StringTag.
- Use: Configures multiple items at once, offering flexibility for scenarios where several items need to be dynamically generated.
- Example:
StringTag1[0] = #Element=ValveSymbol#Status="Open"
StringTag1[1] = #Element=ConveyorBelt#Speed=100 #State=Tag.State["#element=ValveSymbol #status=open", "#element=ConveyorBelt #speed=fast"]
4. Object
- DataTable, where each row represents an item (element), and each column defines the properties of the item.
- Data Template, where each member represents a properties of the item. The tag of this template type can be an array.
Example DataTable:
| element | color | state |
|---|---|---|
| LampSymbol | red | on |
| MotorSymbol | green | off |
Example Template: Tag array of 2 position with datatype of a template
| member | index 0 | index 1 |
|---|---|---|
| LampSymbol | red | on |
| MotorSymbol | green | off |
Configuration
To configure a FlowPanel:
Go to Displays / Draw.
On the Components Panel, select Viewer, then FlowPanel.
Click or drag-and-drop it on the Drawing area to use it.
Double-click the component to open the configuration window.
FlowPanel Settings
Field
Description
Panel Type
Sets the Panel mode for the component. Options are:
WrapPanel: Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box.
Canvas:arrange the items using the standard Canvas container.DockPanel: arrange the items using the standard Dock container.
Grid: Defines a flexible grid area consisting of columns and rows.
StackPanelHorizontal: Arranges child elements into a single line oriented horizontally.
StackPanelVertical: Arranges child elements into a single line oriented vertically.
UniformGrid: Used to arrange children in a grid with all equal cell sizes.
Panel Settings
Allows configure panel setting properties following the same format of data source. Example: #Background=Green, where Background is a property of the panel.
Items Source
Determines the source of the items displayed in the FlowPanel. Can be bound to a list or collection, and users can specify the type of data, such as text or objects. Options are:
Text: Allows the FlowPanel to display a list of simple text items. Useful for representing straightforward string values such as machine states or operational modes.
StringTag: Enables the FlowPanel to display a list of items generated from a pre-existing Tag of the Text type. This feature is particularly useful when multiple FlowPanels across different displays need to present the same information consistently.
Array: Allows the FlowPanel to display items from an array. Suitable for predefined sets of options, such as lists of sensor IDs or operational steps, enabling efficient management of uniform data.
Object: Allows the FlowPanel to display items from a collection of objects. Ideal for complex data representation where each item has multiple attributes, such as equipment lists with properties like name, ID, and status.
The object can be Databases Queries, or any realtime Tag, AssetPath, or property from the system namespaces
Max Items
Specifies the maximum number of items that the FlowPanel can display or hold. Limits the number of items to prevent overload and improve performance.
Reload
Specifies a command or function that reloads the items in the FlowPanel. Ensures that the FlowPanel displays the most current data, useful for dynamic or real-time data sources.
Quantity
Defines how many items will be sourced in the design preview. (not applied to runtime)
Width
Defines the width of each panel, ensuring that each panel is properly sized according to the user's preferences and fits seamlessly within the FlowPanel.
Height
Defines the height of each panel, ensuring that each panel is properly sized according to the user's preferences and fits seamlessly within the FlowPanel.
Margin
. |
Runtime Execution
Responsive Behavior
The FlowPanel is a responsive control, meaning it adjusts the arrangement of items based on the screen size and the size and type of panel used. When the window or browser is resized, the FlowPanel automatically reorganizes items to optimize the available space. (if the display is configured as Responsive)
In panels like WrapPanel and UniformGrid, items may shift between rows/columns as the screen size changes.
In the Canvas panel, as positions are fixed, the layout does not dynamically adapt to resizing.
DockPanel and Grid panels offer great flexibility, dynamically distributing items to better utilize the available space.
Dynamic DataSource Updates
The FlowPanel’s data source can be updated dynamically. To do this, simply trigger a reload on the control, and it will refresh with the new data source. This feature is useful in systems where data or conditions change frequently.
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|