Certain properties can be set for a table's cells, columns, and rows, as well as for the entire table. The screenshot below left shows the properties of static tables and repeating tables; the screenshot below right shows the properties of dynamic tables. Dynamic tables have an additional set of Table Row Group properties. All these properties are described in the section Controls | Table.
The Repeating property is available for repeating and static tables, and defines whether the table is repeating or static; it is not available for dynamic tables. The property's values are true or false.
The value of this property is automatically assigned at the time a repeating or static table is created. A repeating table has a Repeating property of true, while a static table has a Repeating property of false. After a table has been created as a particular type (repeating or static), its type can be changed by changing the value of the table's Repeating property.
Property: Create for each item in
The Create for each item in property is available for tables (repeating tables) and for table row groups (dynamic tables). It specifies the number of times the repeating table or repeating table row group is re-created. This number is equal to the number of items in the sequence returned by the property's XPath expression. The expression can return two types of sequence:
•Nodes from a page source tree. This is an alternative to associating a repeating table (or table row group) with a page source node—an association made by dragging and dropping the node onto the table. An XPath expression of this kind also allows more flexibility in the node selection. For example, the XPath expression $XML1/Offices/Office[@location='US'] returns a sequence of Office nodes that have an attribute of @location='US'. The US filter cannot be applied by using the alternative method of dropping the Office node onto the table. However, this filter can be achieved with the Create for each item in property.
•Items unrelated to the page source tree. For example, in the month October 2014, the expression 1 to subsequence(age-details(xs:date("2014-01-01")), 2, 1) returns a nine-item sequence, namely, the integers from 1 to 9, which is the number of months that have elapsed between 01 January 2014 and a day in October 2014. This is because the basic XPath expression is 1 to X. And X (according to the subsequence function) is the second item of the three-item sequence returned by the age-details function. This latter function returns the "age" of the current day (in our month of October 2014) relative to the input date (01 January 2014) in terms of the three-item sequence years, months, days (which in this case will be 0 years, 9 months and XX days). The second item of the three-item sequence is the number of months in the age, which is 9. Since the returned sequence contains nine items (the range from 1 to 9), the table will be created nine times.
|Note:||If you wish to preview the results of XPath expressions, run MobileTogether Designer's built-in simulator (Project | Simulate Workflow), and, in the Simulator dialog that appears,click Evaluate XPath and then Evaluator.|
To join multiple rows or multiple columns, select, respectively, the row or column in the design that you want to span, and use the appropriate Join command from the context menu, the Table menu, or the application toolbar. The selected row/column will be joined with the adjacent row/column you selected. If the joined rows or columns are, respectively, within a row group or column group (which are created for dynamic rows or columns), then the join occurs within each instance of the group, and the joined row/column is displayed in each group.
In the case of dynamic columns, an additional type of column merging, called spanning, is available: The columns of all column groups are spanned to a single column, whether the column group in the design consists of one or more columns. To do this, set the Spans Column Groups property (available in the Styles & Properties Pane) to true. This property is available only in the first column of a column group. It takes a value of true or false. Default is false. If the property is set to true, then, in the output, all the columns of the column group are spanned, resulting in one column.
The table below shows a design consisting of a column group comprising two columns, which are not spanned. The column group is associated with the element Node.
Column Group in design, corresponds to the repeating element Node. Not spanned
In the output, the column group is repeated for each instance of Node. As a result, two columns are created for each Node element, as shown in the table below.
If the dynamic column group were spanned, by setting the Spans Column Groups property to true, then the effect in the design is as if both columns were joined (see table below). The properties and content of the resulting column will be that of the first column.
Column Group in design corresponding to repeating element Node: spanned
In the output, the column group is spanned across all instances of Node. As a result, there will be only one column for all the instances of Node, as shown in the table below. If the content of the column is dynamically selected via an XPath expression that locates Node elements, then an error will be returned.
Node[1 to n]
When dynamic columns are spanned, you can think of the transformation process as occurring in two steps: (i) In the design, all columns (of any type, including static) in the column group are joined together into one column, as if the Join command were used on them; (ii) in the output, all the instances of the repeating element are created as a single column. Any XPath expression that: (i) is located within a spanned dynamic column in the design, and (ii) tries to locate individual element instances corresponding to output columns will return an error.
The screenshot below shows a simple example of a dynamic column created in a column group. The column group in the design contains a single column group that is associated with the day element, and this column group is within a (repeating) table associated with the week element (which, in the page source, is the parent of the day element). Since the week element repeats, a new table will be created for each week element. If, in the page source, there are multiple day child elements of the week element, and if, in the design, the dynamic columns of the column group are not spanned, then the table (for each week) generated from this design will have as many columns as there are day child elements. If, however, you set the Spans Column Groups property to true, then the columns in the generated table will be spanned, and the table will have only one column.
For more information about column groups, see Dynamic Columns.
The visibility of a column or row is set by selecting the column or row, and setting its Visible property to true or false. The default value is true.
If columns or rows are spanned, the visibility of the spanned columns/rows can be specified individually if the visibility of the first column/row in the spanned set has been given a value of true. If the visibility of the first column/row in the spanned set of columns/rows has been given a value of false, then all the columns/rows in the spanned set are given a value of false.
Screenshot above: Spanned columns in the first row (colored green):
•The three spanned columns in Row-1 (green) are considered to be Column-1. The next column in Row-1 is Column-4. In Row-1, there is no Column-2 or Column-3.
•If you select any of the first three columns individually in Rows 2 to 5 and set the visibility to true/false, then the visibility of none of the other columns will be affected.
•If you select (the spanned) Column-1 in Row-1 and set the visibility to true/false, then the visibility of only Column-1 will be modified. Column-2 and Column-3 (in Rows 2 to 5) will not be affected.
Screenshot above: Spanned rows in the first column (colored blue):
•The spanned rows in Column-1 (blue) are considered to be Row 4. In Column-1, there is no Row-5.
•If you select either of the two rows (Row-4 or Row-5) individually in Columns 2 to 5 and set the visibility to true/false, then the other row will not be affected.
•If you select (the spanned) Row-4 in Column-1 and set the visibility to true/false, then the visibility of only Row-4 will be modified. Row-5 (in Columns 2 to 5) will not be affected
If a table is very long and/or very wide, you can set it to be vertically and/or horizontally scrollable. In this event, only a certain portion of the table will be displayed; the rest can be scrolled in and out of view.
The Maximal Table Height property specifies the table's height, in pixels or relative to the device's screen height. Select one of the values from the property's combo box. For example, if you select 50%, then the table will have a height of half of the device's screen height (see screen at first left in image below). If the table has a vertical extent that does not fit in the allotted screen space, then the table will have a scroll bar and the end user can scroll the rest of the table in and out of the allotted screen space (in this example, 50% of the screen height). If design components occur above the table, then all these components are displayed above the table; the table itself will have the absolute or relative height specified via this property.
|Note:||The table and the page have separate scroll bars (see screens in the image below). In the MobileTogether Designer Simulator, use the scroll wheel to scroll vertically, and click-and-drag to scroll horizontally.|
|Note:||On Android 4.x devices, if there are two or more (scrollable or non-scrollable) tables on a page, then, if any of these tables is scrollable, it cannot be scrolled vertically.|
|Note:||See the Scrollable Tables tutorial for an example.|
The Maximal Table Height property can take two other values (besides a pixel or percentage value):
•Rest of screen height (max): The table height is minimized as much as possible so that as much of the rest of the page can be displayed. In the image above, the screen at extreme right shows a table that has been given this property value: The table height has been reduced so that all the five components of the page are displayed. Notice, in this case, that the scroll bar of the page has been reduced to zero since the entire page is in view.
•Rest of screen height (always): This option enables you to use the entire screen height to display the page. If a table does not have enough vertical extent to fill the page, then additional space is added below the table so that the last component of the page is displayed just above the bottom of the screen. This setting allows you to constrain end-of-page content to a location at the bottom of the screen.
The Scroll Vertically property becomes available after a value has been set for the Maximal Table Height property and no Maximal Table Width value is set. The Scroll Vertically property can take one of two values:
•Whole table: The whole table scrolls in and out of the table height that is allotted to the table via the Maximal Table Height property. Whole table is the default value.
•Rows except header and footer: The table's header and footer stay fixed in the view. The table's body rows scroll within the remaining table height.
The Row Group Chunk Size property becomes available only if there is a repeating row-group in the table and after a value has been set for the Maximal Table Height property of scrollable tables. It enables you to specify the number of row groups that are loaded at a time. When the user scrolls down and the last row group of the last-loaded chunk is reached, then the next chunk is loaded. There is no default value for this property.
The Maximal Table Width property specifies the table's width: (i) in pixels, (ii) relative to the device's screen width, or (iii) optimized for columns (wrap_content). The default is wrap_content. Select the value you want from the dropdown list of the property's combo box. If the table width is larger than the screen width, then the table will be displayed with a horizontal scroll bar. Users can swipe left or right to scroll the table.
The Table menu offers a number of commands to edit table structure. Several table properties are set in the Styles & Properties Pane. Additionally, table borders can be conveniently set in the Border Settings dialog (Table | Border Settings).