Compact form

Applies to version: 2020.1.x and above; author: Dawid Golonka

Introduction

When designing processes for business applications, in addition to ensuring that the created solution works correctly when it comes to functionality, it is also worth paying attention to the visual side of the form. The form view should be intuitive and understandable to the end user. Each workflow created as a part of the process has two global form templates – Main form and Compact form (which can be used e.g. in mobile devices).

The compact form is available via a dedicated mobile application for smartphones and tablets, and also from the browser level. After clicking a link, a panel with instance preview will appear on the right.

Fig. 1. The instance view in the compact form

Description

A simple invoice cost workflow was created. It consists of three steps – Registration, Waiting for scan and Archived. A document can be registered both with a scan or without a scan.

Fig. 2. Invoice workflow

The global form template is the default template used at every step. Below there is a global template for the main form in the invoice workflow:

Fig. 3. The global template of the main form

Below there is the main form at the Registration step.

Fig. 4. The main form

On the left, there is information about the contractor and invoice details. On the right – the attachments and comments section. Below them, there is a chart displaying the values of the unpaid invoices. At the bottom of the form on the item list, all invoices registered for this contractor are listed.

By default, the compact form inherits settings from the main form. On Fig. 5 there is a compact form with default settings at the invoice registration step.

Fig. 5. The compact form with default settings

The compact form has all elements that are also found on the main form. If the application designer decides that the compact version should differ to some extent, it is possible to do it in WEBCON BPS Designer Studio.

The change of the compact and basic form view

The individual view of the compact form (both globally and per step) can be configured by clicking the “Break settings inheritance” button on the “Global form template” tab.

Fig. 6. The global template of the compact form

After clicking this button in the compact form settings – the other configuration areas will become active.

Fig. 7. The global template of the compact view

Example: The users using the system from the mobile application want to reorganize the form. They want to move the attachments section to the top and the table with a list of contractor’s invoices directly under the “Contractor” field. The comments section should be removed. The visibility of debt chart will be disabled in the field matrix.

Fig. 8. The global form template after changes

After entering the changes, the compact form looks like this:

Fig. 9. The compact view after entered changes

The changes made to this form template do not affect the appearance of the main form, which has retained the current arrangements of elements.