The popup control

Usage

<popup
  id='id'
  label='label'
  title='title'>
  content
</popup>

Fields

Field	Description
id	Identifies the control when it is referenced in data-binding queries, reports, and workflow scripts.

Properties

Property	Type	Description
label (read-only)	string	Specifies the text that will be displayed as the label of the control.
title (required)	string	The text that is displayed as a link on the initial screen, and a breadcrumb on the popup content screen.

Traits

Trait	Description
validation	A collection of zero or more validation rules (validator elements) that evaluate user input in the control at runtime, and prevent the user from submitting the form if the `cond` of any of the validators evaluates to `false`.
declarations	A collection of zero or more variable declarations (let elements) that can be referenced in solution-wide query expressions.
content	A list of zero or more child controls.

Remarks

A popup control shows up on two screens in a form: as a link on the one where the control is defined, and with its content displayed in full on the popup content screen that opens when the user clicks the popup link.

popupSample.fls.xml

...
<chapter title="Just a regular popup">
  <popup title="Click here for a good time">
    <chapter title="And a good time was had by all">
      <textbox id="goodTimeBox" text="Goodies"/>
    </chapter>
  </popup>
</chapter>
...

Figure 241. A chapter control with a popup inside it

The required title property is displayed as the text of the link on the initial screen, and gets added to the breadcrumb on the popup content screen.

Figure 242. The content screen of the same popup

The properties of the child controls in the popup are accessible for data-binding even while the content screen isn't displayed.

popupSample.fls.xml

...
<chapter title="Just a regular popup">
  <popup title="Click here for a good time">
    <textbox id="goodTimeBox"
      text="Goodies"/>
  </popup>
</chapter>
<textview label="Wondering what's
                behind the popup link? It's this: "
  text='{goodTimeBox.text}'/>
...

Figure 243. The textview at the bottom can pull properties from the content of the popup even when it isn't displayed

When a popup is removed while the user is accessing its contents, the interface will transfer the user to the closest visible ancestor of the popup. In the example below, there is a popup inside a table control. If the recordset of the parent table is re-evaluated while the user is on the child popup's content screen, and this results in the given row being removed from the table, or if the row is removed with a removebutton, the browser will display the tablecontrol, the disappearing popup's closest visible parent.

removebuttonSample.fls.xml

...
<table id="tableFoo"
  recordset='{TABLE words
            ("borscht";
            "hoohah")}'
  record="word">
  <row>
    <cell>
      <popup title='{word.words}'>
        <textview text='{word.words}'/>
        <removebutton text='{"Remove " || word.words}'/>
      </popup>
    </cell>
  </row>
</table>
...

Figure 244. A table control with a popup in each row

A popup containing a removebutton control populates tableFoo. Clicking on any of the popup links takes the user to the popup's content screen.

Figure 245. The content screen of the hoohah popup

If the user clicks the removebutton inside the popup, the containing row control, complete with the popup itself, will be removed from the tableFoorecordset. The browser will switch to a view of tableFoo, which now only contains one popup.

Figure 246. After the user clicked the Remove hoohah removebutton in the popup

When it's an if element that hides the popup while the user is accessing its content screen, things work a bit differently. In this case, the popup and its child elements will stay visible until the user clicks the Back button in the popup content screen. The properties of the hidden popup control or its children will still stay available for data-binding.

Sample

popupSample.fls.xml

...
<chapter title="Just a regular popup">
  <popup title="Click here for a good time">
    <chapter title="And a good time was had by all">
      <textbox id="goodTimeBox" text="Goodies"/>
    </chapter>
  </popup>
</chapter>
...

Figure 247. A chapter control with a popup inside it

If the user clicks the popup link, the content of the control is displayed on a new screen.

Figure 248. The content screen of the same popup

A workflow script running in the Mobilengine Cloud would access the submission of the webform above in the format below:

{...
  goodTimeBox: {text: "Goodies"},
  hider: {invisible: {hide: {checked: true}}, cond: false},
...}

See the workflow script reference guide for more details on data type mapping.

Developer Documentation

Controls overview