Basis for the feasability of a process are the forms designed within your EPC models. Each form is assigned to a function. Now you have to design the forms for ACME's address book.

Designing a Form

You opened the form Contact Data.

If you create a new app project, the first form in the Reference model contains a predefined area including the following elements:

  • the responsive element Main Area
  • the division Enter your text here:
  • the input field Text Element
  • the preconfigured buttons Go to overview, Save and Next

At the right side of the workspace you will find the Sidebar New Elements. Use it to drag and drop additional form fields onto the workspace.

The elements are classified in four categories:

  • General
  • Complex
  • App-specific
  • Structuring

Click on the category name to display the associated elements.

Refer to BPaaS Guide > Creating Form Elements to learn more about the creation of form elements and how to use them.

You can define additional field properties for the active element (marked by a red border) using the Edit Sidebar.

Here you can for example change the name of the element, define whether it should be a mandatory field and much more.

Now use the already existing form fields:

  • Rename the existing responsive element Main area in Customer Datasheet.

  • Rename the existing input field Text element in Company and change its settings:
    • Mark the element as Mandatory.
    • Deactivate the option Show Label Inline.
    • Insert the Field Name in Container Company.

For details about the concept of the Field Name in Container refer to BPaaS Guide > The Container Principle.


Create additional form elements, for example:

  • Responsive Element: Contact Person
  • Input Field: First Name with Field Name in Container firstName
  • Input Field: Last Name with Field Name in Container lastName
  • Input Field: Position
  • Text Area: Notes


Use the Play button to execute your model.

If you use the preview function in the Forms Editor, only the current form is displayed.

The form view is displayed in a pop-up window.

By clicking on the corresponding icons, you can switch between different views:

  • View on a desktop computer
  • View on a tablet
  • View on a mobile phone

In test mode, you are also able to insert text in your form fields.

After testing close the pop-up window.

If you want to add more fields or rework the layout, you can now make further adjustments in the Forms Editor.

When your form is finished, navigate back to the EPC.

Reusing Forms

In the next process step, the user shall insert the address details of the customer, but the contact person's details should also be displayed again. Therefore you can reuse the first form Contact Data.

Right-click on the form element Contact Data to open the context menu. Select option Copy.

Then right-click on the empty workspace and choose the context menu option Paste > As Copy.

A copy of the first form is created on the workspace.

Rename the form element, for example to Address Details. and connect it to the function Entering address details.

Open the new form.

The copy contains the content of the first form.

Extend the content by creating further form fields for the address details.

In our example, we added the following fields:

  • Responsive Element: Address Details
  • Input Field: Street
  • Input Field: no
  • Input Field: ZIP Code with Field Name in Container zip
  • Input Field: City
  • Input Field: Country
  • Responsive Element: Contact Details
  • Input Field: Phone
  • Input Field: Mobile
  • Input Field: Email
  • URL Field: Internet Address with Field Name in Container internet

When your form is finished, navigate back to the EPC.

Designing a Summary Form

In the last process step, all entered customer data should be displayed in a summary. The creation of a summary form is very easy, as a preconfigured form element exists for this purpose.

Open the last form Customer Data Sheet.

A newly created Responsive Form element is empty.

It contains only three preconfigured default buttons:

  • Go to overview
  • Save
  • Next

Open the category App-specific in the Sidebar New Elements. Here you will find the necessary form element to create a summary: Instance View.

For further information about the usage of the Instance View refer to BPaaS Guide > Using the Instance View.


Drag the element to the workspace and rename it (for example Customer Data Sheet Summary).

In the element's settings in the Edit Sidebar you can find the option Configure Lines. Open the configuration editor by clicking on the gear wheel.

A wizard supports you during the configuration.

The wizard is divided into two parts:

  • Fields of Reference EPC: On the left side of the wizard you see all form fields that you have created in your forms.
  • View Lines: On the right side of the wizard you see the fields that are displayed in the instance view.

If you want to use all fields, click button >> to take the wohle content over.

Accordingly, a click on the button << removes all fields from the instance view.

Drag and drop the fields you want to display in the summary to the right side of the wizard.

You can also use the wizard's search function to find specific fields.

When you have finished the configuration, leave the editor with Save.

The element in the Forms Editor now shows the selected content.

You have finished designing your forms.

Before you can execute your app, you have to configure the overview. To do so, switch back to the content of the app project.

  • No labels