Modal window

About 3 min read

TwModalWindow · Category: Containers · Container (other widgets can be placed inside it)

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Modal

Setting	Type	Default	Description
Page Name pageName	Selection	—	Page shown inside the window. Options: the list is filled from the project at runtime
Modal Mode modal	Checkbox	Off	When on, the window has a header, buttons and a shadow, and at runtime it is hidden when the page loads unless Start Visible is on. When off, the page is embedded in place and always shown.
Tag Prefix tagPrefix	Text	—	Added in front of the Tag names of the inner page, so the same page can be used for different equipment.
Scale scale	Checkbox	On	Scales the inner page to fit the widget size. When off, the page keeps its own size and Fit Mode decides the widget size.
Fit Mode fitMode	Selection	content	Only used when Scale is off. Content resizes the widget to the inner page; Container keeps the widget size and cuts off what does not fit. Options: content Content, container Container
Maximizable maximizable	Checkbox	Off	Window mode only: shows a maximize button in the header at runtime. Esc restores the previous size.
Enable Dragging enableDragging	Checkbox	On	Window mode only: lets users move the window at runtime by dragging its header.

Startup State

Setting	Type	Default	Description
Start Collapsed collapsed	Checkbox	Off	At runtime the window starts with only its header shown; the editor always shows the content. In window mode it only applies together with Start Visible.
Start Visible runtimeVisibleOnLoad	Checkbox	Off	Window mode only: the window is open when the page loads. When off, it stays hidden until it is opened, for example by an event.

Buttons

Setting	Type	Default	Description
Close showCloseButton	Checkbox	On	Window mode only: shows the close button in the header; Esc also closes the window.
Collapse showCollapseButton	Checkbox	On	Window mode only: shows the button that collapses the window to its header and expands it again.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, pageName, tagPrefix, collapsed, scale, fitMode, maximizable, showCloseButton, showCollapseButton, enableDragging, runtimeVisibleOnLoad, modal

The style fields of the widget can also be bound as style.<field> (e.g. style.width, style.height, style.left, style.top).

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.