In this tutorial, you'll learn how to create a simple database CRUD tool using auto-generated database functions. Before you begin, be sure to connect your database and check that Internal has generated functions to create, update, delete, and list records from your database. To build a CRUD tool on top of another data source such as a Google Sheet or Salesforce, the steps are roughly the same. If you'd like to build on top of an API, you'll need to first create HTTP functions for creating, updating, deleting and listing records.
Operations • Customer Support • Product • Engineering
Build from a handful of drag-and-drop components
Displays a list of records in table format. Customize the layout with flexboxes, image components, buttons, and more.
A quick and easy way to add a button that opens up a form in a modal and executes a function upon submit.
How to build:
Simple database CRUD tool
Add a table component. Open up the component drawer and drag a table component on to the canvas.
Select your database and choose a function. In this example, we're building a CRUD tool for the Users table in our PostgreSQL database so we'll choose PostgreSQL as the database and "List user_accounts records" as the function. If you don't see functions in this dropdown, check to make sure your data source is configured correctly.
Add an in-line pop-up form to the table and configure your edit form.
For each form field in your pop-up form, pre-fill the input with the existing value (this creates the experience of editing existing values). Use the binding picker to reference the row -> data -> field.
Add a pop-up form to the top right corner and configure it to insert new records into your database.
Add an in-line pop-up form for deleting records. You can always use a regular button if you don't want a confirmation modal. However, if you want a confirmation modal, use the pop-up form, make the id field a hidden field, and use the Instructions to display confirmation text. When you're done, publish your tool!