For the complete documentation index, see llms.txt. This page is also available as Markdown.

CRUD operations with the data grid

Connect a data grid widget to a table from a relational database (either an internal Postgres or external SQL database) to perform create, read, update, and delete (CRUD) operations directly from the UI. The provided template contains all necessary widget bindings, logic functions, and UI feedback configurations out of the box.

Reference videos: Part 1 | Part 2

Step-by-step guide

1

Download the example template

Download the data-grid-crud.hwt template file to your computer.

2

Import the template

  1. Open the App Builder.

  2. Click the tags menu (see Deploy and maintain).

  3. Select import and upload the data-grid-crud.hwt file.

  4. Select the imported template and confirm the switch in the popup dialog.

3

Configure the data source

The template handles the logic and data bindings automatically. You only need to define your target table (such as a maintenanceTasks table) and ensure your database is accessible.

  1. Select each function and update the table name parameter to match your specific table.

  2. Verify your database connection. If you use an external SQL database, ensure the connection is active.

  3. If you do not have an existing table, run the defineTable and addRows functions once to initialize the schema and write the initial records.

Template architecture

Understand the underlying wiring to adapt the template for more complex requirements.

  • Data population: The output of the getTableData function binds directly to the data property of the data grid widget to populate the UI.

  • Data grid interactions: Users interact directly with the data grid. The widget's native onInsert, onUpdate, and onDelete events bind directly to the inputs of the addRow, updateRow, and deleteRow functions.

  • User feedback: Modifiers trigger when CRUD functions execute, passing customizable strings to a toast widget to display immediate confirmation or error messages.

Reference videos

Part 1: data grid widget and CRUD operations

Part 2: toast widget configuration

Last updated

Was this helpful?