Functional explanation
A Container is a container with a fixed, user-settable size. Objects are placed inside it, and when the content is larger than the Container, the content scrolls instead of growing the box. This differs from a Group, whose size always follows its children.
By default a Container has a single tab and no visible tab strip, so it behaves as a plain scrollable panel. Adding tabs in the Tabs section splits the Container into several views and shows the tab strip automatically, for example an Overview, Setpoints and Alarms tab for one machine.
In the design environment, clicking a tab shows that tab and makes it the default tab of the saved page. Clicking an object inside the Container selects that object directly, and clicking an empty area or the tab strip selects the Container itself. In runtime, the operator switches tabs by clicking the tab strip; the chosen tab applies to that browser only and is not written back to the page.
Placing objects on tabs
There are three ways to put objects on a tab.
Drag an object over the Container and release it: a confirmation asks whether to move the object onto the tab that is shown, and the object keeps the position where it was dropped.
Select the Container and paste with Ctrl+V: the clipboard content is pasted onto the tab that is shown.
Select an object that is already on a tab and use the On Tab setting in the Position / Size section of its decorator to move it to another tab of the same Container; the object keeps its position.
Objects on a tab behave like objects on the page: they can be grouped with Ctrl+G, resized, animated, and used in group symbols. Use Move To Upper Group on an object to move it out of the Container again.
Tabs
The Tabs list in the Container decorator manages the tabs. Each row shows the tab name and buttons to move the tab up or down, show the tab, and delete the tab. The eye button shows a tab in the design view and makes it the default tab. Deleting a tab that contains objects asks for confirmation and removes the objects with it. A Container always keeps at least one tab.
| Setting | Description | Example | Units |
|---|---|---|---|
| Tab name | The label shown on the tab. | Overview | Text |
| Add Tab | Adds a new tab at the end of the list. | ||
| Show this tab | Shows the tab in the design view and makes it the default tab. | ||
| Delete tab | Removes the tab and, after confirmation, the objects on it. |
No rows match the filter.
Tab Layout
Each tab has a layout of its own, set with the Tab Layout setting while that tab is shown. Canvas is the normal free positioning: objects keep their pixel position and the tab scrolls when the content is larger than the container.
Left to Right and Top to Bottom turn the tab into a flex layout. With Left to Right the objects are placed one after another across the tab and wrap to the next line when the width is used up; with Top to Bottom they are stacked one per line. Dragging an object on such a tab reorders it: an insertion marker shows where the object will land. The Position / Size section of an object on a Left to Right or Top to Bottom tab carries a Responsive tag next to its title and shows a Width setting with three modes instead of the free position: a pixel value (a fixed block that wraps when it no longer fits), a percentage of the tab width, or Grow (the object shares the remaining space of its line with the other Grow objects, limited by Min Width and Max Width). Resizing an object with its handles writes the new pixel width back into this setting.
Switching a tab from Canvas to Left to Right or Top to Bottom stores each object's position and restores it when switching back. Use Left to Right or Top to Bottom for panels of labels, buttons and inputs that should rearrange with the container width; keep drawings and symbol graphics on Canvas tabs.
| Setting | Description | Example | Units |
|---|---|---|---|
| Tab Layout | Canvas, Left to Right, or Top to Bottom. Applies to the tab that is shown. | Left to Right | |
| Gap | Space between the objects of a Left to Right or Top to Bottom tab. | 8 | Pixels |
| Padding | Space between the tab edge and its objects. | 8 | Pixels |
| Wrap | Whether a Left to Right tab wraps its objects to the next line when the width is used up. | On | |
| Distribute | How the objects are spread along the layout direction: Start, Center, End, or Space Between. For a Left to Right tab this is the horizontal placement, for a Top to Bottom tab the vertical. | Space Between | |
| Align | How the objects are aligned across the layout direction: Start, Center, or End. For a Left to Right tab this is the vertical alignment within a line, for a Top to Bottom tab the horizontal. | Center | |
| Width | Pixel value, percentage of the tab width, or Grow. Shown in Position / Size for objects on a Left to Right or Top to Bottom tab. | Grow | |
| Min Width | Minimum width of the object; below it the object wraps to the next line. | 140 | Pixels |
| Max Width | Maximum width of a Grow object. | 280 | Pixels |
No rows match the filter.
Every object placed on a Left to Right or Top to Bottom tab takes the Width, Min Width and Max Width settings, the viewer objects, the Data Grid, the Document Viewer, the Web Frame, the Recipe Manager, the Scheduler, the Navigator and the Map included; their height stays the height drawn on the object.
Tab Strip
Appearance and visibility of the tab strip.
| Setting | Description | Example | Units |
|---|---|---|---|
| Tab Strip | Auto, Show, or Hide. Auto (the default) shows the tab strip only when the Container has more than one tab, so a single-tab Container is a plain fixed-size scrollable panel. Show keeps the strip visible with a single tab; Hide always hides it. | Auto | |
| Tab Height | Height of the tab strip. | 32px | Pixels |
| Tab Font Size | Font size of the tab labels. | 14px | Pixels |
| Active Tab Color | Background color of the tab that is shown. | #FFFFFF | Color |
| Inactive Tab Color | Background color of the other tabs and the strip. | #E3E8ED | Color |
| Tab Text Color | Text color of the tab labels. | #212529 | Color |
| Tab Alignment | Left, Center, or Stretch. Stretch divides the full strip width over the tabs. | Left |
No rows match the filter.
Layout
Position and size of the Container on the page. With Position set to Flow, the container is placed after the previous flow container and wraps to the next line at the parent's width; the order between flow containers is changed with the Order buttons. Width and Height also accept a percentage of the page or tab the container sits on, which together with the page Fit Mode Fluid makes a set of containers rearrange to the screen they are shown on. Docked keeps the container at the rectangle drawn in the designer, measured against the browser window at runtime: it stays in place while the operator zooms or pans the page and follows the page base scale, the same behaviour as a docked Navigator. The docked container overlays the page; no space is reserved for it. Only a container placed directly on the page can be docked, and the Position setting is ignored while it is docked. In the designer the container stays on the canvas and shows a Docked badge. A Flow container hidden by its Visibility expression also gives up its space, so the containers after it move up; a container placed with Absolute only becomes invisible.
| Setting | Description | Example | Units |
|---|---|---|---|
| Position | Absolute keeps the container at its top and left position. Flow places it after the previous flow container and wraps at the parent's width; switching back to Absolute restores the stored position. | Flow | |
| Docked | Checked: at runtime the container keeps the rectangle drawn here, measured against the browser window, outside page zoom and pan. Unchecked: an ordinary object on the page. Use it for a header bar with title and alarm banner, or a navigation panel along one side. | Checked | |
| Click Outside Actions | Actions that run when the operator clicks next to the panel while it is docked and shown. While actions are configured and the panel is visible, the rest of the window is covered by a transparent layer, so a click anywhere outside the panel runs the actions instead of reaching the page. Leave the list empty to keep the page clickable. The usual value is a Reset of the variable the Visibility expression watches: a toggle bound to that variable opens the panel and a click outside closes it. Edited in the Click Outside Actions section of the decorator, which is the same Actions editor a Button uses. Ignored while the object is not docked and in the designer. | Reset client.NavOpen | Actions |
| Margins | Margin around a flow-positioned container. | 8px | Pixels |
| Min Width | Minimum width of a flow-positioned container; below it the container wraps to the next line. 0 or empty means no minimum. | 300 | Pixels |
| Order | Moves a flow-positioned container earlier or later in the flow. |
No rows match the filter.
Content
Behavior of the tab content area.
| Setting | Description | Example | Units |
|---|---|---|---|
| Content | Scroll shows the tab content at its design size with scrollbars. Scale to Fit scales the content uniformly into the container box and centres it. Scale to Width scales the content to the container width and lets the container height follow the content's shape. The scale modes apply in runtime; the design environment always shows the design size. | Scroll | |
| Design Size | Width and height in pixels the tab content was authored at. Captured from the container when Content leaves Scroll; used by the scale modes. | 600 x 400 | Pixels |
| Scrollbars | Auto shows scrollbars when the content is larger than the container; Hide never shows them, while the content can still be scrolled. | Auto | |
| Scrollbar Color | Color of the scrollbar thumb of the tab panes. Empty uses the built-in grey. A Color Library name can be used. | Accent_Brand | Color |
| Scrollbar Track Color | Color of the scrollbar track of the tab panes. Empty uses a transparent track. | #FFFFFF00 | Color |
| Scrollbar Width | Thickness of the pane scrollbars. Empty uses 8 px. | 6 | px |
| Background Color | Background color of the container. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | #FFFFFF | Color |
| Active Tab Variable | Optional variable whose value selects the shown tab by name or by zero-based index. This is a read-only binding: switching tabs by hand does not write to the variable. | client.SelectedTab | Variable |
No rows match the filter.
Containers and group symbols
A Container can be part of a group symbol: select the Container, press Ctrl+G to wrap it in a Group, and give that Group a symbol name. Instances of the master then contain the whole Container, and the tab names can be replaced per instance through the symbol replacers.
A Container is not a symbol master by itself; the surrounding Group carries the symbol role.
A Container with a percent width needs a Group that keeps its own box: set the Group's Position to Relative and Float to Left (a flow group), give the Group its Width (for example 100%) and Height, and flow Containers with percent widths can be placed inside it. On a page with Fit Mode Fluid such a Group flows like a flow Container, which is how a responsive page header stays one symbol master that is pushed to every page.