2022-08-25 / Questetra Developers Blog

When you create a workflow application with Questetra BPM Suite, an input form is automatically generated for each Human Task. The input form is organized according to the Data Item settings and the edit permission settings for each Step.

In this article, I will explain how to set Data Items to make the generated input form easier to use.

Display by data type

For Data Items, each input field (input form) is displayed according to the data-type.

R2050: List of Data types

The individual input interfaces are usually displayed to fit the layout width. Numeric-type, Date/Datetime-type, and File-type are displayed with a fixed width.

Placement

To make the input form easier to use, first let’s consider the arrangement of the input fields (Data Items) displayed on the form. You should arrange the layout so that it is easy for the person in charge of work (also known as the Operator) to work. For example, when dealing with customer information, the Operator handles the task of entering information such as company name, department name, name, telephone number, email address, and company address in their respective Data Items. After this input Step, if the Data Items have been arranged so they are convenient for the Operator in charge of each Step such as mail shipping or emailing, it should lead to an improvement in efficiency.

Display order

The order of the Data Items on an input form reflects how they are arranged on the Data Item tab of the App edit function. If you wish to move the item and change the arrangement, drag the item you want to move on the list screen and drop it in the desired location.
This is useful when you want to organize Data Items, particularly new ones that will be added at the bottom.

Column setting

When a Data Item is added, the column setting is 1 by default. This means that one Data Item occupies the entire row. If you set up a large number of Data Items without changing the column settings, the form screen will become very long so the Operator may feel annoying to scroll up and down.

In the column settings, 2 and 4 can be selected instead of. 2 is half the width of one line, and 4 is a quarter of the width. When the Data Items for which the division size is set are adjacent, they will scoot over as far as possible. You can use this feature to place related Items on one line. For example, when you arrange three Data Items like Business trip destination (String-type), Business trip start date (Date-type), and Business trip end date (Date-type), and set 4 to the column setting of each them, it will fit on one line as shown in the figure below.

Since there are only three Data Items in a four-division row, there is a blank at the right end. So, if you set the Business trip destination (String-type) column to 2, it will fit perfectly on one line.

Thus, you can create a compact form screen that is easy to view and input to by grouping related Data Items using column settings in this way.

  • The Table-type has no column settings. It will always be a full-width display.
  • When setting columns for multiple Data Items, the batch selection is convenient. Select by Shift + click, then click the icon to select the number of columns.

Data-type specific settings

Some Data-types have their unique settings.

String-type (Multiple-lines)

The number of lines (i.e. the height of the input field) when the input form is displayed can be set. It is specified with a number in the [Row count] setting in the property window. (The default is empty and displays 15 lines) You should set it according to the length of text that is expected to be input.

Select-type (Radio-button, Check-box)

Specify a number (from 1 to 10) of options to be displayed in a line in a section where column display is set. The display area is divided by a specified number, similar to the columns. If the number of options is less than the number of divisions, the choice display will move to the left and the right side will be blank. On the other hand, if the number of choices exceeds the number of divisions, it will be displayed in multiple rows and sent to the next line. (If the setting is 1, the display will be arranged vertically.)

When the number of characters in the options’ display label is small it will be easier to enter if the distance between the buttons/check boxes is short.

Individual display of Data Items

Description

All Data-type properties have a settings field called [Description]. The characters entered in [Description] will be displayed below the input field for the relevant Data Item on the input form. By displaying example sentences, hints, notes, etc. when an Operator performs input work the input form will be easier for the worker to understand what to do.

In addition, you can use HTML tags* in the Description. By adding decorations such as line breaks (<be>), changing the text color (<span style>), and bullet points (<ul> <li>), the input form becomes even easier to understand.

(* Available tags)
R2131: HTML Tags Available for Operation Form

Placeholder

The String-type has a settings item called [Placeholder]. Placeholder is a function to display characters in the input field before inputting which disappear when you start typing. If you set an input example in [Placeholder], the operator can intuitively understand the format specification such as, for example, using hyphens when entering a phone number.

Guide Panel

In Questetra BPM Suite, you can define an item called [Guide Panel] that is specialized only for display on the input form. Data cannot be entered or saved in the [Guide Panel]. Only [Description] and [Column] can be set.
By making good use of this [Guide Panel] you will be able to quickly find the desired data group, even in an input form consisting of a huge number of Data Items.

The recommended usage of it is as follows.

First, classify Data Items according to their contents or work procedures. Place the [Guide Panel] at the dividing points, then set the following HTML code in the [Description] of the [Guide Panel].


<h4 style="font-size:26px;background-color:#198000;color:#ffffff;padding:11px;margin-bottom:3px;">Heading Words</h4>Here is a description
 

In the input form, it will be displayed as shown in the figure below.

By using the [Guide Panel] in this way, you can divide the input form into sections to make it easier to see.

In addition, we have prepared a [Guide Panel Decorator] that can automatically output the above HTML code as you like.
Please use it by all means.

Moreover, if you are using Professional Edition, you can write JavaScript in the [Description] to make it more advanced. It is also possible to add dynamic information or UI.
For example, it is possible to change the display contents by referring to the data being input, or to display buttons that assist input.

  • Setting display changes or data communications using JavaScript is done at your own risk
  • Questetra Form JavaScript API is also available

M213: Guidance Descriptions on the Operating Screen (HTML/JavaScript)
Using [Questetra Form JavaScript API] on the Form Screen

Non-display settings

Once you have set up the entire form, finally set the edit-display permission for each Step. Hiding information that is not necessary for some individual Tasks makes the form more compact and saves the Operator the hassle of scrolling and skipping unnecessary information.

M205: Business Data Items

In this way, Workflow App designers can improve the work efficiency of Operators by making input forms easier to use. Even after the App is completed, let’s improve the input form so that it is easier to use by listening to the opinions of the people in charge of processing, and aim to improve the productivity of the entire company.

%d bloggers like this: