Table Grid control

The Table grid control is a Display control that is used to fetch the data from a Sheet and display the contents of the sheet to the user.

table grid control

Properties

UI Properties

  • Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the Table Grid Control.

  • Properties : These properties help you customize the Label by changing the text size, weight ( Light, Normal, Bold, Extra Bold, X Extra Bold), alignment (Left, Center, Right, Justified) and color of the label.

  • Type : The Type field is automatically generated depending upon the type of control used. In this case, it is a “list” type.

  • Unique Name : A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control.

  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property available below.

  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the Show Description toggle property available below.

  • Show Tooltip Icon: This allows you to toggle switch ON or OFF to show or hide the tooltip icon where the tooltip text would appear.

  • Show Description: This allows you to toggle switch ON or OFF to show or hide the Description text.

  • Hidden : The hidden option helps you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

  • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the state that the LOOKUP returns will be cached and the user will be able to see this state of the field even when user accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets always is not critical.

  • Hide Label : This option hides the label of the control from the view.

  • Trigger dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here .
    By default, Trigger dependents is enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.

Top bar

  • Searchbar: This is used to Toggle ON or OFF to Show the Searchbar.

  • Button: This is used to specify the buttons to be displayed. You can add the button for Add, update, delete, download, refresh, filters, quick filter, and row size. You would have to add the actions for the respective buttons under Actions.

  • If you are applying Filter to the data you will get the following view wherein you can choose the filter and click Apply. The data would be displayed according to your selection.

  • Download File Name: Allows you to specify the default file name for the CSV file downloaded from the table grid.

  • Quick Filter: Allows you to add a quick filter for the selected column. After you toggle to switch ON the Quick filter option you need to select the column here based on which the filter is to be applied. Quick filter would be applied on columns that are of type Single Select or Multi-select.

Properties

These are the table setting to configure the header and data with regard to the font and theme.

table grid properties

  • Table Header: Here you would be specifying the Font size and Font Weight for the Table header.

  • Table Data: Here you would be specifying the Font size and Font Weight for the Table data.

  • Theme: This allows you to specify the Theme for the table grid.

  • Column width: This allows you to specify the maximum and minimum width of the columns.

Display

Views

Under Views you can select the views as Map view and Detailed View and configure the related properties for the select view type.

  • Detailed view: This allows you to switch ON or OFF to show data in the Detailed view of your sheet data. Whenever you click any of the records it would display the row data as a detailed view.

  • Map : This lets you toggle on or off the Map view to display data like the co-ordinates on a Map. So if you select Map view it can be shown as List or Map view as well.

    map view

    • Default view: This allows you to select the default view as Map or List.

  • Checkox: This allows you to add a single select or multi-select check box in your table grid data. It has options as Yes (with single select), Yes (with multi-select), and No.

    • No: This would not show the checkbox type for the table grid rows.
    • Yes (With Single Select): This restricts you to select only a single row from the table grid with a checkbox style.
    • Yes (with Multiselect): This enables your to select multiple rows from the table grid with a checkbox style.
  • Group data: This allows you to group data based on a column.

    gropu data

    • Group by: Allows you to select the column to group by.

    • Accordion Style: Allows you to select the accordion-style to display the grouped data. You can set it to All open, All Close, First Open.

  • Pagination: This allows you to enable pagination for your data. When you allow pagination some more properties would be added to your list of properties.
    pagination

    • Default offset: Is the default index value of the record / row. If you set the offset as 0(zero) then the records are displayed from the first record as per your visible rows. However, if you set it to 10 then the record number 11 would be displayed first.

    • Rows per page: This allows you to set the rows to be displayed per page.

  • Default selected row: This allows you to set the index value of the default selected row.

  • Height: This allows you to set the height for the table grid control.

    height

    • Visible: By default you can set the visible rows and columns to specify the height of the control.
    • Fit to screen: You can set the table grid to fit the screen. It can be set as Auto or Manual.
      fit to screen

Actions

This allows you to select the actions for each of the action buttons added to the table grid.

  • On Row click: This is the default action on click of the Table grid row. You can Navigate to another page, Select Row, or Show details

    .

If you select the Navigate with Selection action you would be able to further define the navigation

  • Type as Navigate (With validation) or Navigate (Without validation).

  • To: Specify the page/ screen to navigate to.

  • Transition: You can specify the transition style for your page when navigating.

The remaining Actions (Action 1, Action 2…) allow you to set the actions that would be performed when the row/s are selected. To add a custom action, you can add a Action Text and select a color for the Action Text . Now to further define the action to be taken, click Actions button. The list of actions is opened where you can select your action number and define the steps. Steps could include Communication actions like call, email, sms, Navigation actions like OpenURL, navigate to screen, ExitApp, Submission actions like Call workflow, Delay, Reset pages, Validate pages, Confirm popup, and Call API. The Custom Actions can also be defined to initiate actions other than those mentioned earlier.

action item

  • Text: Is the text that appears when you hover over the action item.

  • Icon: Allows you to select the Icon for the action.

  • Color: Allows you to add the color of the icon

  • Show on: Allows you to set when the action should be shown. It can be Single-select, Multiselect, or Both.

  • Show on hover: Allows you to set whether the action or action icon would be shown when you hover over the selected row.

  • Add as column: This add the action as a column which can then be selected by you to trigger further action. It will appear as the action text in the last column next to each row.

How to Use a Table Grid Control?

Start with selecting the Table Grid Control from the Display section of the Controls Menu.

The Table Grid Control will then appear on the screen in the builder, you can then set all the above properties as per your requirements.

You can use the data option to bind data to Table Grid Control. You can learn more about validations here. There are four ways in which you can bind data.

  1. Sheet : This allows you to get value from a sheet and display it in the control.

  2. Logged In User: This allows you to select properties for the Logged In user like UserName, UserMail that would be the data for the table grid

  3. API: This allows you to fetch data using the Key values from the selected API.

  4. Custom Formula::This can be used to apply formulas and use the output of those formulas to set the control. You can learn more about formulas here.

Preview

Without Pagination

With pagination

To further understand how to use the Table grid control you can go through the article here and have a look at the following video.