Getting Started

Features

Tips & tricks

Building a single page for adding, removing and editing

You can design a page on which you can create, edit and delete data items.

designer-page-overview

User flow

In this example we use the data item Month.

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

Details page

  1. Add the page Details. At the end of this article, it will look like below.
    designer-details-page
  2. Change the layout to Two (50 x 50).
    layout-block
  3. On the left side: insert a whole block with a table in it.
    content-block-dialog
  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:
    filter-month
  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.
    prefill-field-month
  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.
    add-form-fields-month

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

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’.
    decision-month-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.