Creating ‘Inquiry-handling system’ for Free ; Advanced series 4

Let's make easy-to-use Operating screens using stripes and columns setting.

Hi, there!


In the series of “Creating ‘Inquiry-handling system’ for Free” so far, we became able to send answer emails automatically (without email clients), in the previous post.


In this article, I will show you how to make the screen of each Step easier to see.

Looking back created screen


In the App made up to the previous article (“Creating ‘Inquiry-handling system’ for Free ; Advanced series 3), We did not consider making the Operating screen of each Step easier to use. As a result, I suppose you have some discontent.

Let’s take a look at the current “Inquiry form” screen and the Operating screen of the “Answer” Step.

It looks awkward as the fields to input “Name of contact person” and “Contents of inquiry” are too wide. Particularly concerning “Contents of inquiries”, it is likely that there is a high possibility of getting dissatisfaction of being hard to write and to read if it is too long in the sideways.

On the Operating screen of the “Answer” Step, there are few fields to input data, but there are large empty spaces as you see in the figure, so the whole screen is vertically long. You don’t want to scroll wastefully, do you?


In the next section and beyond, I will show you how to create a tight screen that the data input field width is not too long, reducing wasted space.


Let’s use column setting to make it easy to see


Using the function (Columns) that allow you to arrange up to 4 data items horizontally, you can eliminate screens such as those mentioned in the previous section that would leave a lot of waste space.


For the column setting of the Data Items, we are going to make it to the App that we created in “Creating ‘Inquiry-handling system’ for Free ; Advanced series 3. Please log in to Questetra BPM Suite and prepare the App which we created in Creating ‘Inquiry-handling system’ for Free ; Advanced series 3, to be possible to edit.


Column setting of data items is so simple. Simply select the data item you want to make columns (to narrow the width) and change the selected button of “Column” to 2 or 4 on the detail setting screen on the right.

  • Columns = 1, Size of the full width
  • Columns = 2, a half the size of the entire width
  • Columns = 4, a quarter of the entire width


Now, let’s set the value of “Columns” for all data items to 2. So, the left side of the data item setting screen changes as follows.

With setting like this, the Inquiry form screen will become as follows.

The form becomes looking settled because the width is not wide unnecessarily.

By setting up “Columns” well, you can make it a well-balanced looking input screen.


Let’s make a partition on the screen for easy viewing


In the Step of “Answer”, the contents of the inquiry entered by the inquirer and the contents related to the inquiry are displayed together on the same screen. Since there is no partition between these two types of information on the screen at the current time, so It makes it hard to understand which part is the inquiry immediately.


So, let’s set up a “stripe” in between clusters of information, in order to make it easier to distinguish them.


To create a “stripe”, follow the procedure below.

  1. Place a Guide panel type Data Item to a place where you want to put a “stripe”
  2. In the “Description” field of the Data Item you placed at #1 above, describe the HTML code for creating the “stripe”
  3. In the Step in which you want to display “stripe”, set the Data editing permission setting of the Data Item arranged at #1 to “Display only”


You can set a “stripe” by the above procedure, but #2 might seem difficult. But please don’t worry. Since there is a tool that automatically generates HTML code to display a “stripe”, so it won’t be difficult at all using that tool.


First, let’s add a Guide panel type Data Item to where you want to place a “stripe”. Data Item name is not displayed anywhere on the Operating screen, so don’t be bothered giving it.



Next, set the HTML code for displaying the “stripe” in “Description” field of each Guide panel type Data Item. To make the HTML code, we use the “UI decorator“.


This time we will create two Stripes with label of “Inquiry content” and “Correspondence status” respectively. First, we will work on “Inquiry content”. Click on the UI decorator to open and type “Inquiry content” into “Title” field. Next, delete all the characters that have been entered in “Note” field.


An HTML code appears in the part below “Code”, so copy it. Then Go back to the Process Modeler and paste the copied HTML code into the “description” of Guide panel type Data Item.



In order to create HTML code to be set on the other Guide panel, simply you type “Correspondence status” into where you set as “Inquiry content” previously.


As you set the Data editing permission setting of the added Guide panel type Data Item to “Display only” for both Steps of “Answer” and “Advice / Review”, the stripes will be displayed.



I introduced a method to make the Operating screen of each Step easier to use. I suppose that now you understand that it has become easy to see and to use, by using the Columns setting and Guide panel type Data Item.


That’s it, for today!



About YAHAGI Hajime

幸せを生み出すITを追求するクエステトラの一味です。 国産の BPM ソフト Questetra BPM Suite で日本・世界を幸せにしたい。
View all posts by YAHAGI Hajime

Prev article - 55. Improvement Tips Creating ‘Inquiry-handling system’ for Free ; Advanced series 3
Next article - 55. Improvement Tips Struggling with Improvement on Quotation Approval Flow; Automatic determination on necessity of approval
Another article - YAHAGI Hajime Creating ‘Inquiry-handling system’ for Free ; Basic 6