The table control

Usage

<table
  id='id'
  label='label'
  recordset='recordset'
  record='record'>
  <declarations>
    declarations
  </declarations>
  <validation>
    validation
  </validation>
  <header>
    header
  </header>
  row-template
  <footer>
    footer
  </footer>
</table>

Fields

Field	Description
id	Identifies the control when it is referenced in data-binding queries, reports, and workflow scripts.
width	Specifies how wide a control will be displayed in the form.
record	Specifies the name of the iterator variable that you can use in the table control's row template to access the elements of the current record.

Properties

Property	Type	Description
label (read-only)	string	Specifies the text that will be displayed as the label of the control.
recordset (required)	recordset	A query expression that specifies the source of the tabular data that the table control displays. The recordset that the query expression returns will be rendered in the table control based on the table control's row template.
rows (submitted, read-only)	rowset	The list of all the rows that are rendered in the body of the table control.

Traits

Trait	Description
declarations	A collection of zero or more variable declarations (let elements) that can be referenced in solution-wide query expressions.
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`.
header	The header row of the rendered table. Exactly one row control child is allowed.
row-template (required)	The single row control used as the template to render the rows in the table control, based on the recordset that the query in the `recordset` property returns.
footer	The footer row of the rendered table. Exactly one row control child is allowed.

Remarks

The query expression in the required recordset property returns a recordset. For each row in the returned recordset, an instance of the row template is rendered inside the table control. There is a built-in iterator variable that you name with the record field of the table control, that you can use to reference the elements of the current record. The name that you give the iterator variable in the record field is an identifier and so must begin with an underscore or a letter.

rowsSample.fls.xml

...
<table id="someTable"
  recordset='{TABLE random1, random2
              ("axolotl", "borscht";
              "moxie", "hoohah")}'
  record='n'>
  <row>
    <cell>
      <textview id="textBoo"
        text='{n.random1}'/>
    </cell>
    <cell>
      <textview id="textFar"
        text='{n.random2}'/>
    </cell>
  </row>
</table>
...

Just like any other query expression, the recordset query is re-evaluated every time its input parameters change. If the re-evaluation modifies the query's return value, the complete table control, except for its header and footer rows, is re-rendered, and all changes that the user made in the previously rendered controls are discarded.

To reference the table control's rendered rows from outside the row template (either from inside the header or footer or from elsewhere in the solution), use the rows property in a FROM clause, the same way you would query a reference table. rows defines a tree structure for the rows, cells, and controls rendered inside the table control.

rowsSample.fls.xml

...
<table id="someTable"
  recordset='{TABLE random1, random2
              ("axolotl", borscht;
              "moxie", "hoohah")}'
  record='n' >
  <row>
    <cell>
      <textview id="textBoo"
        text='{n.random1}'/>
    </cell>
    <cell>
      <textview id="textFar"
        text='{n.random2}'/>
    </cell>
  </row>
</table>
<textview
  label="The values in the left column
                are bound into this textview"
  text='{SELECT GROUP_CONCAT(z.textBoo.text, ", ")
        FROM someTable.rows z}' />
...

You can traverse the tree structure that rows holds in query expressions from outside the table control scope to reference any control or its properties. In the example below, the unnamed bottom table displays the values of the text boxes inside the popup panels in the tableFoo table using the rows property to reference the values.

rowsSample.fls.xml

...
<table id="tableFoo"
  recordset='{TABLE random1,
              ("axolotl")}'
  record='r'>
  <header>
    <row>
      <cell>
        <textview
          text="Table Foo: a popup with a textbox inside"/>
      </cell>
    </row>
  </header>
  <row>
    <cell>
      <popup id="popupBar"
        title="There's a textbox behind this link">
        <textbox id="textboxBar"
          text='{r.random1}'/>
      </popup>
    </cell>
  </row>
</table>
<table recordset='{SELECT q.popupBar.textboxBar.text t
                  FROM tableFoo.rows q}'
  record='target'>
  <header>
    <row>
      <cell>
        <textview
        text="The text from behind the link in Table Foo"/>
      </cell>
    </row>
  </header>
  <row>
    <cell>
      <textview text='{target.t}'/>
    </cell>
  </row>
</table>

A header and footer trait is available in table controls as the first and last child element inside the control, respectively. You can use these to include a non-template header or footer table row. If you don't include a header or footer row, the rendered table control simply won't have one (some of the sample table controls don't). header and footer rows cannot contain references to the iterator variable that you name in record, but you can use the rows property to reference the controls in the rendered table rows.

The id field is optional for table controls, but without an identifier, the rows property can only be used to reference the rendered rows from within the table control's header and footer, and not from outside the table control (that is, only from within the control's own scope).

rowsSample.fls.xml

<table
  label='This table has no id'
  recordset='{TABLE columnGa, columnBa
              ("axolotl", "borscht";
              "moxie", "hoohah")}'
  record='bubble'>
  <header>
    <row>
      <cell>
        <textview
          text='You can reference the rendered rows in here'/>
      </cell>
      <cell>
        <textview
          text='{SELECT GROUP_CONCAT(l.textBar.text, ", ")
                FROM rows l}'/>
      </cell>
    </row>
  </header>
  <row>
    <cell>
      <textview id="textFoo"
        text='{bubble.columnGa}'/>
    </cell>
    <cell>
      <textview id="textBar"
        text='{bubble.columnBa}'/>
    </cell>
  </row>
  <footer>
    <row>
      <cell>
        <textview
          text='You can reference the rendered rows in here'/>
      </cell>
      <cell>
        <textview
          text='{SELECT UPPER(GROUP_CONCAT(s.textFoo.text, ", "))
                FROM rows s}'/>
      </cell>
    </row>
  </footer>
</table>
<!-- You can't use rows
    outside the scope of an unnamed table
<textview label="The id-less table
                can't be referenced from outside"
  text='{SELECT LENGTH(GROUP_CONCAT(c.textFoo.text, ""))
        FROM rows c}'/>
  -->
...

Use the addbutton and removebutton controls to let the user add rows to or remove rows from a table control, respectively.

width: When you declare a width for a control that is inside a row template, you set the width for the column that the control is in.

wideColumns.fls.xml

<form id='wideColumns'
  menuName='This table has really wide columns'
  platforms='web'
  xmlns='http://schemas.mobilengine.com/fls/v1'>
  <table id="wideTable"
    recordset='{SELECT r.word_series FROM randomWord r}'
    record='wide'>
    <header>
      <row>
        <cell>
          <textview
            text="Column with no width declared"/>
        </cell>
        <cell>
          <textview
            text="Column with 50 em width declared"/>
        </cell>
      </row>
    </header>
    <row>
      <cell>
        <textview text='{wide.word_series}'
          width='10 em'/>
      </cell>
      <cell>
        <textview text='{wide.word_series}'
          width='30 em'/>
      </cell>
      <cell>
        <textview text='{wide.word_series}'/>
      </cell>
    </row>
  </table>
</form>

Figure 258. The same data is bound into each row in the table, but the cells are of different widths

Sample

tableControl.fls.xml

<form id='tableControl'
  menuName='Table Control Sample'
  platforms='web'
  xmlns='http://schemas.mobilengine.com/fls/v1'>
  <table id="passengers"
    recordset='{SELECT p.passenger_id,
                p.first_name,
                p.last_name
                FROM passenger p}'
    record='p'>
    <header>
      <row>
        <cell>
          <textview text='Passenger ID' />
        </cell>
        <cell>
          <textview text='First Name' />
        </cell>
        <cell>
          <textview text='Last Name' />
        </cell>
      </row>
    </header>
      <row>
        <cell>
          <textbox id='number' text='{p.passenger_id}' />
        </cell>
        <cell>
          <textbox text='{p.first_name}' />
        </cell>
        <cell>
          <textbox text='{p.last_name}' />
        </cell>
      </row>
    <footer>
      <row>
        <cell>
          <textview text='Number of passengers:' />
        </cell>
        <cell>
          <textview text='{TOSTRING((SELECT COUNT(*)
                                    FROM passengers.rows p))}'/>
        </cell>
      </row>
    </footer>
  </table>
  <textview label='The sum of the passenger IDs:'
    text='{TOSTRING((SELECT SUM(TOINT(p.number.text))
          FROM passengers.rows p))}'/>
</form>

A table control with a header and a dynamic footer, plus a textview that references its rows.

Only the textbox controls in the Weight of passenger column have an identifier, so a workflow script running in the Mobilengine Cloud would access the submission of the webform above in the format below:

{...
  passengers:
  {
  rows:
    [
      {number: {text: "80"}},
      {number: {text: "60"}},
      {number: {text: "59"}}
    ]
  }

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

Developer Documentation

Controls overview