Grid

This widget is available only in Operations Hub Classic version.

A grid widget functions similar to a table widget. In addition, you can perform the following tasks:
  • Change the width of a grid dynamically.
  • Rearrange or remove the columns of a grid from an application.
  • Export the data displayed in a grid to a .csv file. In addition, you can export data from selected columns.
  • Sort the data displayed in a grid.
  • View the data in a tree structure.
  • Scroll till the end of the grid regardless of the number of rows the grid contains.

Grid Properties

When you use a grid widget, in addition to the default settings of a widget, the following settings are available.
Field Name Description
Allow Export Select this check box if you want to provide an option to application users to export the data in the grid to a .csv file.
Note: This option is not available on iOS.
Tooltips Select this check box if you want tooltips to appear in the application.
Flow Select the query that should be used to retrieve information in the grid.
Tree View Select this check box if you want to display data in a hierarchical view. When you select this check box, the Nested flow box appears, allowing you to select the query that fetches the data for the child level in the hierarchy.
Name Enter the name of the grid column.
Data Select this option if you want data in the column to be retrieved from an entity field using a column, and then select the field in the drop-down list box.
Formula Select this option if you want data in the column to be displayed based on a formula. For example, if an entity stores the marks scored by students for individual courses, you can create a formula to display the aggregate marks scored by each student.
Show <number> rows at a time Identifies the number of rows that should appear by default in the grid. By default, the value in this box is 10. After you enter a value, the following options are available:
  • Load all: If you select this option, the grid will contain all the rows on the same page. However, if you access the application on a mobile device, each page in the grid will contain the number of rows that you specify. You can navigate to the other pages to access the rest of the rows.
  • Infinite scroll: If you select this option, the grid will contain all the rows on the same page.
  • Paging: If you select this option, each page in the grid will contain the number of rows that you specify. You can navigate to the other pages to access the rest of the rows.

Using a Grid

Suppose you want to use a grid to display a list of managers in an organization and the employees reporting to each manager. To do so, perform the following steps:
  1. Create an entity named Wiki Manager, add the fields Manager ID and Manager Name, and add the IDs and names of managers.
  2. Create a Get query named Wiki Get All Managers to get all the records from the Wiki Manager entity.
  3. Create an entity named Wiki Employee, add the fields Manager ID, Employee ID, and Employee Name, and add the respective details.
  4. Create a Get query named Wiki Get Employee by Manager ID with settings as specified in the following image:
  5. Create an application, and add a grid using the page designer.
  6. In the PAGE DATA section, add the Wiki Get All Managers query, and connect all the fields to the grid.
  7. Select the Auto submit (as soon as data is available) check box.
  8. In the GRID PROPERTIES section, select the Tree View check box.
  9. In the Nested flow box, select the Wiki Get All Employee by Manager ID query. Two boxes named Row Limit and Manager ID appear.
  10. In the Manager ID box, select Wiki Get All Manager.Manager ID.
  11. In the Flow box, select Wiki Get All Managers.
  12. In the Name box, enter Manager Name.
  13. In the Data box, select the field that stores the names of managers.
  14. Select Add Field, and then provide values as specified in the following table.
    Field Name Description
    Name Enter Manager ID.
    Data Select this option, and then select Wiki Manager in the drop-down list box that appears.
    Mapping Select Wiki Employee.
  15. Save the application, and preview it. A grid appears, displaying two sections. The first section contains a list of IDs and names of managers. The second section contains a list of employees that report to each manager.