Skip to main content

Popup

A popup is a page that displays content on top of the current page.

Each popup can be modal or simple.

A modal popup is shown in the center of the page, dimming the content behind it. It can be dragged from its initial position. A simple popup is shown next to the button that opened it.

Each popup can be locked. By default the popup can be closed by:

  • a back gesture

  • clicking on the close button (if it's visible)

  • clicking on the button that opened it (if it's a simple popup)

  • clicking on the background (if it's a modal popup)

A locked popup can't be closed by any of the above means.

Popups are not part of the navigation stack, so they are not included in the history.

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding: ="mybutton" + ui('button', 'address')

UISet: UISet('button', 'address', '1') switches the ID to mybutton1 UISet('button', 'address', '2') switches the ID to mybutton2

Title

Specifies the title of the popup.

Attribute Values
ValueDescription
<string>Title of the popup.

Type

Specifies the type of the popup.

The default value is: simple.

Attribute Values
ValueDescription
simpleDefault value. Simple popup.

Opens with an arrow next to the button.
modalModal popup.

Opens in the center of the page, dimming the content behind it.

It can be dragged from its initial position.
persistentPersistent popup.

Opens in the center of the page, doesn't dim the content behind it.

It can be dragged from its initial position.

It stays open across page changes.

Size

Width

Sets the object's width in pixels.

Minimum value is 1.

Height

Sets the object's height in pixels.

Minimum value is 1.

Layout

Locked

Specifies whether the popup is locked.

By default the popup can be closed by:

  • a back gesture
  • clicking on the close button (if it's visible)
  • clicking on the button that opened it (if it's a simple popup)
  • clicking on the background (if it's a modal popup)

A locked popup can't be closed by any of the above means.

The default value is: false.

Attribute Values
ValueDescription
falseDefault value. Popup can be closed by any of the default means.
truePopup can't be closed by any of the default means.

Dirs

Specifies the priority of the directions in which the popup is shown. If the popup doesn't fit in a specified direction, the next direction is tried.

The default value is: r,l,b,t.

Attribute Values
ValueDescription
<string>A comma-separated list of directions. Possible values: r (right), l (left), b (bottom), t (top).

Padding

Specifies the padding of the popup, the space between the popup's borders and its content.

The default value is: 10.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values
ValueDescriptionExample
<int>Padding in pixels.10
<integer list>A list of integer values, separated by comma or space, that specify the sides' pixel padding in the following order: top, right, bottom, left.10 20 10 20

Close Button

Specifies whether the popup has a close button.

The default value is: auto.

Attribute Values
ValueDescription
autoDefault value. Close button is visible only when needed (on modal popups and on simple popups that are shown at the center of the page).
trueClose button is visible.
falseClose button is not visible.

Minimize Button

Specifies whether the popup has a minimize button.

The default value is: false.

Attribute Values
ValueDescription
trueMinimize button is visible.
falseDefault value. Minimize button is not visible.

Style

Background Color

Specifies a background color that covers the area behind the popup.

Options

Focus

Specifies the ID of a field that gains autofocus if the page is open or whenever the page is opened.

Attribute Values
ValueDescription
<ID>Target ID of the field to focus.

Heartbeat

Specifies the frequency in seconds at which a heartbeat command is sent to the server. This command serves to indicate that the user is still active on the page, and is primarily used to monitor user activity on the server side.

When set to 0, no heartbeat command will be sent. When the user closes the page, the heartbeat command will cease.

The default command's name and parameters are:

  • name: <project id>
  • parameter: hearbeat/<page id> or, if the project is orientation-enabled:
  • parameter: hearbeat/<page id>#<orientation>

Command Name and parameters can be changed with the following attributes: Hearbeat name, hearbeat parameter.

The default value is: 0.

Attribute Values
ValueDescription
0Default value. No heartbeat.
<int>Hearbeat frequency in seconds.

Heartbeat Name

Specifies the name of the heartbeat command.

The default value is: =project:id.

Attribute Values
ValueDescription
<string>Hearbeat command's name.

Heartbeat Parameter

Specifies the parameter of the heartbeat command.

The default value is: =heartbeat/{id}.

Attribute Values
ValueDescription
<string>Hearbeat command's parameter.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Attribute Values
ValueDescription
falseDefault value. Object is included in the UI.
trueObject is excluded from the UI.