Quick Start - MySQL

This guide introduces building an internal management interface for a company, implementing the following functionalities:

• Display a list of users.
• Search by username.
• Change a user's email address.

Data Integration

We will be using [Onboarding DB] which is already connected, so no setup for connection is required.

If you need to connect your own data source, please see here.

Building the Management Interface

Placing Screen Labels

1. Drag & drop [Text] from the right [Components] onto the canvas.
2. Enter User List in [Text] on the right [Inspect].
3. Change the size to large in the right [Inspect] under [Size].

Displaying User List in a Table

1. Drag & drop [Table] from the right [Components] below the [Text] you placed.
2. Click [Create] in [Dataflows].
3. Change the name of the dataflow to listUsers in the text input under [Dataflow].
4. Select [Onboarding DB], a MySQL data source.
5. Write the following SQL in [SQL]:

SELECT * FROM users LIMIT 20;

6. Click [Run] next to listUsers.
7. Click the placed [Table] and change the [Data] in the right settings to {{ listUsers.data }} to map the data.

Search by Username

1. Drag & drop [Input] from the right [Components] between [Text] and [Table].
2. Enter Search by Email Address in [Label] on the right [Inspect].
3. Select the previously created listUsers dataflow and choose [action1].
4. Modify [SQL] to:

SELECT * FROM users WHERE email LIKE '%{{ input1.value }}%' LIMIT 20;

5. Turn on [Run automatically on inputs change].

Change User's Email Address

1. Drag & drop [Column] onto the canvas from the right [Components].
2. Move the already placed table to the left side of the [Column].
3. Place a new [Input] on the right side of the [Column].
4. Enter Update Email Address in [Label] in the [Inspect] for the input placed in step 3.
5. Enter {{ table1.selectedRow.data.email }} in [Default value] in the [Inspect] for the input.
6. Place a [Button] below the input placed in step 3.
7. Enter Update in [Label] in the [Inspect] for the button placed in step 6.
8. Adjust the width by moving the adjuster of [Column].
9. Return to [Dataflow] and click [Create].
10. Change the name of the dataflow to updateUserEmail in the text input under [Dataflow].
11. Select [Onboarding DB], a MySQL data source.
12. Write the following SQL in [SQL]:

UPDATE users
SET email = '{{ input2.value }}'
WHERE id = {{ table1.selectedRow.data.id }};

13. Select listUsers in [Success events]. This ensures that after updateUserEmail is executed, listUsers is run, keeping the table information up to date.
14. Click [Add Event] in the [Inspect] for the button placed in step 6.
15. Select updateUserEmail in [Dataflow]. This ensures that updateUserEmail is executed right after the button is pressed.