Add a Table Widget

About this task

Use the Table widget to load and display data from a private database. This widget uses Blockly scripts to create, read, update, and delete (CRUD) operations via REST API. The Table widget supports pagination and search of all the records within the table.

Procedure

  1. In the Canvas, open the Widgets tab.
  2. Drag and drop the Table widget onto the app canvas.
  3. In the Table Properties panel, enter an ID and Name for the widget, or keep the defaults.
  4. In the Manage Columns section, change the default Column 1 and Column 2 names by overtyping the default text. Click Edit beside one of the default columns if you need to edit both the Column Name and Unique ID or Column Type (for example, auto-detect, string, number, date/time, or time) fields. The Column Name value will appear at the top of the column in the widget. Click Save.
  5. Add more columns to the table by clicking Add. Use the handles to the left of the column field names to drag and drop the columns into your desired order in the table, from left to right.
  6. In the Data Import section, configure a Blockly script that will pull data into your table using a REST API by clicking Add. See Table Widget Data Population Examples for more information.
  7. In the Actions section, perform the following as required:
    1. Add a search field to the table by selecting the Search Records check box. This functionality will allow the user to search for terms from the entire data set in the table. You can customize the message in the widget's Search field by overtyping the default "Search" label.
    2. Select Sort Records to add sort ascending and sort descending arrow controls to each column header on the device.
    3. Select Delete Records to give the user the ability to remove row data. Click Add to configure a Blockly script that will activate when a record is deleted.
    4. Select Edit Records to allow the user to add or edit row data. Click Add to configure a Blockly script that will activate when a record is edited.
    5. Users can make changes to records from a different form page than the table's home page. Use the Select form page dropdown to select the page for editing. Use the Select widget dropdown to choose the widget on the target page that will receive the focus when opened.
  8. In the Pagination section, use the Records Per Page slider bar to define the maximum number of records that appear on one page of the table. You can make this setting configurable for the app user by clicking the Allow Device Users to Modify check box. Use the Styles radio buttons to present minimalist or verbose pagination controls. The Position radio buttons allow you to choose the placement of the pagination controls relative to the table.

    Example of a Table widget layout

  9. Optional: Add a visibility rule to the widget.
    Use visibility rules to control when a widget is visible to the app user. For example, you can create a condition that a widget should only appear after the app user fills in a field or submits a form.
    1. Select Visibility Rule to open the Set Visibility Rule dialog box.
    2. Select whether the visibility rule requires meeting all or any conditions.
    3. From the Field list, select an app field or variable and an operator. Enter the value required for the widget to be visible.
    4. Select Add Condition to add another condition.
    5. Select Save.
  10. Move to the Format tab to customize the widget's appearance.
  11. Select Save in the SOTI Snap banner to apply your changes.
    Save app button

Results

Tip: Select Preview to see how the widget appears in your app.