Follow

Data > Table

A table represents a collection of repeating elements or groups of elements on the web page. Typically, tables are comprised of columns and rows with column headers indicating the content of each column and help anchor the specific column.

 

In certain cases, a table can be more complex with several types of elements in a single cell, split rows or columns, nested table within a table, or even a repeating group that is not laid out as a table.

 

This article covers the basic of capturing a table within the Designer. For lists, which are similar to tables but less structured, please refer to the Lists article.

 

A demonstration of how to capture a table can be found in the below video.

 

 

 

Capturing a Table

 

To grab a table from the web application select Data: Table control in the Capriza Designer. Click "Data" in the Simplify Toolbar, then select "Table" from the dropdown menu.

 

Table.png 

Follow the tooltips to start adding your table. Use the ‘+/-’ buttons to narrow or broaden your region of capture (the green region).

 

Start by selecting the first column header.

 

Screen_Shot_2017-02-22_at_1.43.59_PM.png

 

Then, select the first item under the selected column header.

 

Screen_Shot_2017-02-22_at_1.44.05_PM.png

 

Select another item in the same column. The Designer learns the structure of the table and columns once it "sees" at least two items in a column. It is possible to grab a table with only one row but it may require strengthening.

 

Screen_Shot_2017-02-22_at_1.44.12_PM.png

 

The Capriza Designer can now identify the column and automatically highlight all items in that column. If the selection is correct, click on the column again to select it, and it will display in the mobile screen.

 

Screen_Shot_2017-02-22_at_2.46.32_PM.png

 

To select additional columns in the same table, select the header of the next column you would like to add and click again to add.

Screen_Shot_2017-02-22_at_1.44.44_PM.png

 

By default, the first three columns of the table you selected will show on the mobile page.. If you grabbed more than three columns, a drill page will automatically be created and all the columns will be displayed there.

 

The drill page can be accessed by tapping the row and the user can navigate the rows directly from the drill page by tapping the up/down icons in the zapp header.


Screen_Shot_2017-02-22_at_1.45.20_PM.pngDrilldown.png

 

Removing a Column

 

To remove a column from the table, go to the table Style tab and select the Items tab of the table. If you are using a template (see the Table Style Properties article) first remove the column from the template by clicking on the '-' icon to the right of the column name or dragging it out of the template to the Unassigned list.

 

Unassign.png

 

Then remove it from the Unassigned list by clicking on the '-' icon on the right.

 

Unassign_2.png

 

Activating a Non-Text Table Item

 

Tables may contain items that are not just text, such as buttons, links, dropdowns, etc. By default, each item is grabbed as text and to change the item to its correct type, you need to indicate the type of the item.

 

Once you grabbed the table as described above, select the type of control that represents the type of the item in the table from the Simplify toolbar, then click on the relevant item in the table on the web page.

 

For example, if the items in the table are links, select Link > Text Link from the toolbar then click on the link in the table to select it. All the items in that column will become links.

 

Screen_Shot_2017-02-22_at_1.46.54_PM.png

 

Data Enhancement

 

If you would like to incorporate interactive controls within your table, you can use the Data Enhancement control after adding your table.

 

Select Data > Data Enhancement from the Simplify toolbar and follow the instructions on the screen.


Screen_Shot_2017-02-22_at_1.47.19_PM.png

 

Available options are covered in further detail in the Data Enhancement article.

 

Strengthening a Table

 

A table rank is determined by the ability of the engine to locate the table on the web page but it is also impacted by the ranks of the individual columns.

 

Screen_Shot_2017-02-22_at_1.47.44_PM.png

 

You can answer Basic and Expert questions about the table itself or you can drill into each column and strengthen each data element separately.

 

To learn more about strengthening individual controls, please see Strengthening Basics and Strengthening: Best Practices.

 

Updating an Existing Table

 

You can update an existing table to add more columns and controls. To do so, select "Table" from the Data dropdown, and click inside of the already captured table. It will be highlighted in green. 

 Screen_Shot_2017-02-22_at_1.48.50_PM.png

 

The Designer will prompt you to select another header, and the additional columns will be added to the existing table.

 

Screen_Shot_2017-02-22_at_1.49.12_PM.png

 

Styling a Table

 

Please refer to Table Style Properties for an overview of available styling options.



Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.