Building a single page for adding, removing and editing

A page on which you can create, edit and delete data items is very handy and easy to create.

In this lesson:

1. Create an empty User Flow
2. Add a Details Page
3. Complete the User Flow

Create an empty User Flow

In this example we use the data item Month.

1. Create the empty user flow Months. Do not use the wizard.

Add a Details Page

1. Add the page Details. At the end of this article, it will look like below.

1. Change the layout to Two (50 x 50).

1. On the left side: insert a whole block with a table in it.

1. The table shows data from the data item Month. Choose to show all data from Month, select all properties and sort on number.
2. On the right side: insert the stacked layout.
3. Add one form field: a data item that refers to Month. Show at least the properties Number and Name.
4. The user is able to pick one Month.
5. Apply this filter:

1. Name the label Selected month.
2. The form field is not required.
3. Prefill the field with the month that is selected on the left side of the page.

1. Now add multiple form fields. Show all the fields of Month and pre-fill them with the values from the selected month. Where needed, make the fields required.
   

Complete the User Flow

Below are the steps to complete this user flow. At the end of this article the user flow will look like below.

Create or save

The save button has two functions:

- When the user did not select a month, it will create a month based on the content of the fields on the right side of the page.
- When the user did select a month, it will update the selected month.

Add the button

1. Add a button to submit the form.
2. There is no additional rule.
3. Add the decision ‘Selected month is empty’.
   

Create month

1. Add the flow part Create month where the decision is True.
2. Fill the properties with the values from the fields on the right side of the page.
3. You can insert a page that informs the user that the item was created.
   
4. Connect with the Details page.
   

Update the selected month

1. Add the flow part Update Month where the decision is False.
2. Fill the properties with the values from the fields on the right side of the page.
3. You can insert a page that informs the user that the item was updated.
   
4. Connect with the Details page.
   

Delete the selected month

1. Add the button Delete to the Details page.
2. Add the flow part Delete Month.
3. Connect with the Details page.

‍