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 for Create, Read, Update, and Delete (CRUD) operations via the REST API. The Table widget supports pagination and search of all the records within a table.

Procedure

  1. In the Canvas, open the Widgets tab.
  2. Drag 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, perform the following as required:
    1. For the Default Column Behavior, choose from one of the following:
      • Truncate: Excess text in a column displays as ....

        Columns with truncate

      • Word Wrap: Excess text in a column displays on a new line.

        Columns with truncate

      • Shrink to Fit: The column width automatically readjusts itself to display all text. Selecting this option disables the changing of column width.

        Columns with truncate

    2. Change the default Column 1 and Column 2 names by overtyping the default text.
    3. You can also change the column width (default: 50%) percentage of columns.
      Restriction: You can not change the column width if you selected Shrink to Fit earlier.
      Note: The default total column width is 100%. The total percentage of all columns can exceed 100%. A scrollbar may display.
    4. Select Edit beside one of the default columns if you need to edit both the Column Name and Unique ID or Column Type. For example, the autodetect, string, number, date/time, or time fields. The Column Name value appears at the top of the column in the widget. Select Save.
    5. Add more columns to the table by selecting Add. Use the handles to the left of the column field names to drag the columns from left to right into the desired order in the table..
  5. In the Get Data section, configure a Blockly script to pull data into your table using the REST API by selecting Add. See Table Widget Data Population Examples.
  6. In the Export section, you can export the table widget data to the SOTI Snap report database.
    • Permission for Data Storage: When checked, SOTI Snap report saves table widget data.
    • Save Only Changed Table Data: When checked, SOTI Snap only saves all newly added/edited data into the SOTI Snap report. When unchecked, SOTI Snap saves all table data.
  7. In the Actions section, you can perform the following:
    1. Add a search field to the table by selecting the Search Records checkbox. This functionality offer 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 descending arrow controls to each column header on the device.
    3. Select Delete Records to give the user the ability to remove row data. Select Add to configure a Blockly script that activates when deleting a record.
    4. Select Edit Records to add or edit row data. Select Add to configure a Blockly script that activates when editing a record.
    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 receives focus when opened.
  8. In the Pagination section, use the Records Per Page slide bar to define the maximum number of records that appear on one page of the table. You can make this setting configurable in the app by the user by selecting the Allow Device Users to Modify checkbox. Use the Styles radio buttons to present minimalist or verbose pagination controls. The Position radio buttons enables 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. Select an app field or variable and an operator from the Field list. 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.