What is table element and how to use it in vDesigner 1.0?
2 Likes
This element is used to display the data in the grid format. While designing a mobile app, you can use this element in the report module or any other place where you want to display the data in tabular or grid format.
To display the data in the Table element, you can either use JSON type array object that captures the data value from the database repository and then displays them in the table, or you can use the database view.
In the property sheet of the Table element, you can configure the following properties:
- Label
In this box, enter the name (label name) of the table.
- Object Type
In this box, enter the name JSON type array object that will hold the values that are fetched from the database and then display data in tabular format on the mobile app.
- API Name
In this box, enter the name of API if you want to use an external API to fetch the data from the database source and then display it in the table grid.
- Vw Name
In this box, enter the name of database view if you choose to fetch the data from the database view.
- Lv Object Array Path
In this box, enter the path array object that accesses the database source and then fetches data values to display them in the table.
# Sample path of array type object
$.POD.HOLDER[*-C]
In the last table, the sample code is the hardcoded path of the Holder array type object. In the sample code, POD is parent JSON object that references to the Holder child array object. The Holder object encloses the subtractive syntax assembly, [ -C]*, which means that the array will display/populate the currently held value in the table grid. The array will execute in the iterative manner and then fetch the entire row as dataset and will display the data values row-wise.
- Primary Key
In this box, enter the name of the primary key that is applied on specific column of database. You can use this property at the time you want to use the clause based condition to fetch the data on the basis of primary key.
- Filter Business ID
In this property, click the Business Rule link to apply the business rule on the table element, though this property is optional.
- Table Source (Mandatory Property)
Configuring this property is mandatory activity. This property is used to build the table structure where the data is displayed. IF you do not define the table structure/table source, the mobile app will not display the fetched data.
To define the table source:
- On the property sheet of the Table element, click the Create Table link, the Configure Table dialog box opens.
- In the Configure Table dialog box, define the table source as follows:
Field/Box Description
Column Name In this box, enter the name of first column of the table (For example: - Employee ID.
Column Value In this box, enter the value of column. The column value should have the same name as of corresponding key (key name) that is defined in the JSON code of the array object.
If the value of column does not match to key, the array will fail to display the values in the table. (For instance: - If you defined the value of column as empid for the column: Employee ID*, the array object must have the name of corresponding key as* empid*. The array will pick the entire dataset, store the value of employee ID in the* empid key and then display the employee ID in the Employee ID column.
Column Width In this box, define the width of column in percentage unit such as 20%, 40%, etc, though using this option is optional.
Visibility Valid ID In this property, click the Business Rule link if you want to apply the business rule on the visibility of column. Using this property is again optional.
- After you enter the details of first column, repeat the function to add the detail of other columns as described in the last table.
- To add the details of next column, click the Add Row link.
- After you add all the columns, click Save.
- In the property sheet of the Table element, click Save, the table element is successfully configured.
3 Likes