Design a UI
We will create a UI to continue the development of our Travel Request app. You will use lists to display data to users. In this case, the list will show the data from the Travel Request form. Follow the steps on this page to create your first list.
- Step 1: Access the App Composer page.
- Step 2: Create a new list using the + button on the UI Builder column.
- Step 3: Now, you will enter the UI details, including:
| Field | Description | Value for this example |
|---|---|---|
| ID | A unique identifier. | travelRequestUi |
| Name | A unique descriptive name. | Travel Request UI |
| Description | Describes the list's purpose. | UI for the Travel Request app. |
- Step 4: Click Save to create the UI. As a result, the UI Builder will be launched.
- Step 5: Design the UI. Categories can be edited and reordered by dragging them. UI menu elements from the palette can be placed within categories. Clicking on categories or elements shows available options. Actions like reordering, removing, selecting parent, and editing properties can be performed in the right panel. Individual UI element properties can be modified by clicking on them. For this example, no UI modification is required.
- Step 6: Click Preview to check how the UI looks.
- Step 7: Click Save when you finish creating the UI.
UI availability
The app needs to be published for a normal user to access a UI.
- Step 8: Publish the UI. Go to the App Composer page and click on the Publish button on the top right. Click OK to confirm the creation.
If you access the App Center, you will find the Travel Request app on the homepage.
The video below provides a visual representation of the steps mentioned previously.
You've successfully created a new UI. Your next step is to create a new process.