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 idea management.

The Form "Idea"

You opened the form Idea.

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 into 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 My Great Idea.

  • Delete the division Enter your text here.
  • Rename the existing input field Text element in Name and change its settings:
    • Mark the element as Mandatory.
    • Deactivate the option Show Label Inline.
    • Insert the Field Name in Container Name.

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

Create additional form elements:

  • Drop-down field Department (do not forget to add some values in field Possible Values)
    • Example:

The same values must be entered in the mobile form.

  • Date Picker Creation Date with Field Name in Container meta.createdAt
  • Text Area: Description


 

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.

The Form "Congratulations"

If the idea of an employee has been approved, a congratulation form should be displayed to him. You are going to model this form now.

Open the form Congratulations in your EPC model.

A newly created Responsive Form element is empty.

It contains only three preconfigured default buttons:

  • Go to overview
  • Save
  • Next

Use the context menu or the Sidebar New Elements to create a new responsive element.

  • Use the responsive element to display a header, for example Congratulations.
  • Create a Division element and enter some text in field Current Value.
  • Delete the Save button as the user has nothing to save in this form.
  • Rename the Next button so that it displays Show Summary.

Navigate back to the EPC and open the last form Summary.

The Summary Form

In the last process step, all entered 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 Summary.

Open the category App-specific in the Sidebar New Elements. Here you will find the necessary form element to create a summary: The 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 Idea 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.


  • Since the content of an instance view cannot be saved, delete the Save button.
  • Rename the Next button to reflect that the next process step is the end of the process.

You have finished designing your responsive forms.

Before you can execute your app, you have to design the mobile form for the approval step. Navigate back to the EPC.

  • No labels