Using TableFooter, AddTableRow, and TotalRow

Note: This procedure assumes inline data (as shown in the example at the end of this topic) has been inserted in the UIX file. The inline data named "demoTableData" provides the data for the rows and columns.

To insert addTableRow and TotalRow in tableFooter:

In the Design Structure Window, expand the table node to locate the footer named child node.
In the Component Palette, select Table Components from the dropdown list, and then drag and drop the tableFooter component to the footer node
The tableFooter node is inserted and highlighted under the expanded footer node.
To insert the addTableRow component, do the following:
1. Drag and drop the addTableRow component to the tableFooter node.
2. In the Property Inspector, set the following attributes for addTableRow:
  - rows - Enter the number of rows to be inserted. Default is 1. When you enter a number greater than 1, the text that displays in the addTableRow button changes to 'Add X Rows' where X is the number you entered.
  - text - Enter the text to display in the addTableRow button. By default, the text is either 'Add Another Row' or 'Add X Rows' where X is the number you entered for rows.
  - destination - Enter the URI the addTableRow button references.
To insert the totalRow component, do the following:
1. In the Design Structure Window, expand the tableFooter node to locate the total named child node.
2. Drag and drop the totalRow component to the total node under tableFooter.
3. In the Property Inspector, set the following attributes for totalRow:
  - readOnly - Select true or false to specify whether the Recalculate button should be rendered.
  - text - Enter the text to display in the Recalculate button.
  - destination - Enter the URI the Recalculate button references.
4. Set the footer child of a column component with a textInput field for the updated total. Note that the totalRow component does not perform calculations. You must calculate the total and display it in a textInput field.

Note: To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
  <table ...>

    <contents>
      <column>
        <columnHeader>Item</columnHeader>
        <contents>
          <styledText text="${uix.current.firstColumnText}"/>
        </contents>
      </column>

      <column>
        <columnHeader>Amount</columnHeader>
        <columnFormat columnDataFormat="numberFormat"/>
        <contents>
          <text text="${uix.current.secondColumnText}"/>
        </contents>
        <footer>
          <textInput columns="2"/>
        </footer>
      </column>
    </contents>

    <footer>               
      <tableFooter>
        <contents>
          <messageChoice prompt="Row Type">
            <contents>
              <option text="option 1"/>
              <option text="option 2"/>
            </contents>
            <end>
              <addTableRow/>
            </end>
          </messageChoice>
        </contents>
        <total>
          <totalRow readOnly="false"/>
        </total>
      </tableFooter>
    </footer>
    ...
  </table>
...