# Building a single page for adding, removing and editing

**URL:** <https://community.triggre.com/t/building-a-single-page-for-adding-removing-and-editing/734>\
**Category:** User flows\
**Tags:** user-flows, designer, pages\
**Created:** [December 31, 2019, 11:00pm UTC](https://community.triggre.com/t/building-a-single-page-for-adding-removing-and-editing/734 "2019-12-31T23:00:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mar](https://yyz1.discourse-cdn.com/flex035/user_avatar/community.triggre.com/mar/32/395_2.png) [@Mar](https://community.triggre.com/u/Mar)\
**Post date:** [December 31, 2019, 11:00pm UTC](https://community.triggre.com/t/building-a-single-page-for-adding-removing-and-editing/734/1 "2019-12-31T23:00:00Z")

</div>

A **Page** on which you can **Create, edit and delete**  **Data items** is very handy and easy to create.

 ![Page overview](https://canada1.discourse-cdn.com/flex035/uploads/triggre/original/1X/d320ad67932cd75e125a37a97635b6f4dd266247.png)

## 1. 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**.

## 2. Add a Details Page

1. Add the **Page** _Details_. At the end of this article, it will look like below.  

2. Change the layout to **Two** (50 x 50).  

3. On the left side: insert a **Whole block** with a **Table** in it.  

4. The **Table** shows data from the **Data item** _Month_. Choose to show all data from _Month_, select all **Properties** and sort on number.

5. On the right side: insert the **Stacked layout**.

6. Add one **Form field** : a **Data item** that refers to _Month_. Show at least the **Properties** _Number_ and _Name_.

7. The _User_ is able to pick one _Month_.

8. Apply this **Filter** :  
 ![Month filter](https://canada1.discourse-cdn.com/flex035/uploads/triggre/original/1X/845ae190c2af328a7524471d505d26e3113971b1.png)

9. Name the label _Selected month_.

10. The **Form field** is not required.

11. Prefill the field with the _Month_ that is selected on the left side of the **Page**.  

12. 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**.  

## 3. 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.

 ![Complete User flow](https://canada1.discourse-cdn.com/flex035/uploads/triggre/original/1X/54c3973f64944f8b2a7016c7a5e7a0884a9e1281.png)

### **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_.  
 ![Month decision](https://canada1.discourse-cdn.com/flex035/uploads/triggre/original/1X/bdce4ce58986f6f3274900957c729a6247d971f2.png)

### 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**.