Design a List
It's time to create a list after creating the app and the form. 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 List Builder column.
- Step 3: Now, you will enter the List details, including:
| Field | Description | Value for this example |
|---|---|---|
| ID | A unique identifier. | requestList |
| Name | A unique descriptive name. | Travel Request List |
| Description | Describes the list's purpose. | List to present the data acquired by the Travel Request form. |
Step 4: Click Save to create the List. As a result, the List Builder will be launched.
Step 5: Select the data source. The options available are related to all data sources available on Joget. For this example, select the Form Data. Next, choose Select of Data (Form Data) option, which just appears above the selector.
Step 6: Choose a Form. For this example, select the Travel Request Form.
Step 7: Design your List. First, click on Design button at the top of the page. All available columns from the data source are listed on the left. Drag and drop the desired columns to design your List. For this example, drag and drop the following columns:
- Name
- Travel Date (From)
- Travel Date (To)
- Reason
- Create By
Selecting each column from the list allows you to access several configurations that will change the list's appearance and behavior.
- Step 7: Click Preview to check how the list looks.
- Step 8: Click Save when you finish creating the list.
The video below provides a visual representation of the steps mentioned previously.
Congratulations on designing a new app. Your next step is to design a new UI.