Chapitre 6 - Submit Data and Update the Database

Step 1 – Add Input, Select, and Submit Button Components

‍

In this step, we’ll set up the UI elements needed for the user to submit data into the internal database — such as a comment (via a text input) and a department selection (via a dropdown). We’ll also prepare a submit button to trigger the action.

‍

Add Layout and Components

‍

1. First, drag and drop the Layout component (from the Organization section) into the view.
   • Configure it with two columns so that we can display components side by side

‍

1. Then, drag and drop the following components into the layout:
   • An InputText component — this will be used for user feedback.
   • A Select (Dropdown) component — this will be used to choose the department.

‍

1. Finally, drag and drop a Button component (from the Interactions section) under the layout.
   • This will be used as the submit button for our form.

‍

Rename Components (Technical ID)

‍

Now let’s organize our components for clarity in the development logic.

1. Click on the Input component to open its configuration panel.

‍

1. On the right-hand side, click the “A” icon to switch to Advanced mode (the icon will become an “S”).

‍

1. Scroll down to the bottom of the configuration panel.
   • You’ll see the field to rename the component’s technical ID

1. Rename it to something meaningful like:
   • FeedbackInput for the input component.
   • DepartmentSelect for the dropdown component.
   • ‍

Note: This renaming only changes the technical identifier used internally — it helps you reference the component later in actions and flows.

It does not affect the visible label displayed to users.

To change the displayed label (e.g. “Your feedback”), you’ll need to edit the title or placeholder text in the component’s main configuration.

‍

‍

‍

Connect Select component to DB to get departments

‍

‍

‍

Submit Data, Update DB

‍

‍