Chapter 3: Creating a Travel Request App

Let’s try creating a more useful Travel Request App as a practical challenge in this tutorial. Since we are going to make it by remodelling the App you made in Chapter 2, open that within the Modeler. [App Setting] > Click on the target line > [Edit].

The version number in the figure may be different from yours but don’t worry about this.

Adding Data Items

First, we will create some additional Data Items. Let’s make an appropriate input form for a Travel Request App. Open the [Data Item] tab. There are already Numeric and Date Items. In addition to them, add three more of the types Date (a 2nd one), User, and String. Then name them respectively as follows. Edit the field name as well.

Data typeNameField name
NumericAmountq_numeric0
DateDate fromq_date1
Date (2nd)Date untilq_date2
UserApplicantq_user3
StringSummaryq_string4

You can edit the Item names and Field names in the settings window of each Data Item. Field names must begin with “q_” and be no longer than 64 characters. Only letters, numbers and underscores are available.

Your Data Items should look like the figure above. Data Items can also be added using the Bulk Add Data Items function, but the explanation for this is omitted here.

Next, set up the Data editing permissions. As explained in Chpt.2 each Data Item can be given a different editing permission for each Human Task. For example, data can be written to each Data Item in the Apply Task, but is only displayable in the Confirm Task. Open the workflow diagram tab, please edit them from the Apply and Confirm Human Task settings windows.

Set all Data Items to (Editable) in the Apply Task, and to (Only display) in the Confirm Task. When you are finished, finish editing using the [Apply and Close] button in the bottom right.

Input Form Layout Settings

To make it easier to read we will also change the appearance of the form and initial input values, etc. Try clicking on the [Form Preview] button in the upper right corner of the Data Item tab. The input form to be generated by the current settings is displayed. Although it operates correctly even as it is, if you change the order of the items or set up of the columns, it will become a more user-friendly App.

First, let’s change the order of the Items. In the Item list on the left side you can change the order of the Items by dragging and dropping. Please sort them into the following order.

  • Title
  • Amount
  • Date from
  • Date until
  • Applicant
  • Summary

Next, set up the Columns. There is a [Columns] setting button on the right side of the Data Item list.

Adjust the Column setting of [Date from] and [Date until] to 2.

[Date from] and [Date until] will now be displayed side by side in one row.

It should look like the figure above.

Settings related to input values

Now update the settings related to the values to be entered in the form. Please change the settings for each item as follows.

Amount

Since it is for a Travel Request, the amount of the expenses is a must. Open the [Amount] settings window and check the [Required] box.

Also, travel expenses cannot be a negative number and requests should not be too expensive. As there is a setting to restrict the input beneath the [Required] checkbox, enter 0 in [Minimum Value] and 20000 in [Maximum Value]. This will give a limitation of $0-$20000 to the travel expenses that can be requested.

In order to explain this fact to the user it is a good idea to include a remark such as “Maximum amount of money is $20,000” in the [Description] text box.

Applicant

Inputting the Applicant is also required, so let’s set it up like that.

In many cases the applicant themselves will make a business travel request. To make [Applicant] default to the applicant set the [Initial Value] to Process Start User. With this set, the User who started the Process = the person in charge of the [Applicant] Swimlane, so they will be input by default as the initial value.

Summary

Choose [Text Box multiple lines] as the [Form Type] to make it easier to write long sentences. This will make the text box bigger for displaying multiple lines.

Also, inputting Summary is Required.

Enter the appropriate Placeholder text. Placeholder text is a text string that is displayed in a light color when nothing is entered in the text box. Since it is often to used to display an input example etc., it would be good to enter “New York – L.A. 250 dollars” for example.

Since the text disappears when the User starts typing it is better not to use the placeholder for important information such as cautions.

Date from/until

Just set these two items to Required by checking the [Required] box.

When you check the [Form Preview], if it is displayed like the following then the form setting are complete.

Now click [Exit editing] to save and exit the Modeler, release version 3, and check its operation. Open the [Start] page from the [Workflow] menu and [Start and Operate First Step ] for the App we just edited. Try inputting various things and click the [Finish “Apply”] button. Are the settings properly reflected?

  • Are all fields other than Title required?
  • Is it possible to only enter an Amount from 0 to 20,000?
  • Is the initial value of the Applicant search select box the User who started the Process?
  • Is the placeholder text for Summary displayed?

If the [Finish] button is clicked while there are items that do not satisfy their condition, an error should be displayed in red in the corresponding section. If it works, the Data Item settings are complete!

Adding a Supervisor Swimlane

In the App created in Chapter 2, only the employees belonging to the Organization [10 Management Department] who are in charge of operating the Management Department Swimlane can review the business trip applications. Let’s broaden this by letting the applicant’s supervisor make the approval on the application. In this case, we must redesign the App so that the person in charge of the Approval Task can be determined according to who the applicant is. You can set it up so that the person in charge of the [Approval] Task can be designated automatically using Organization data. That is because the information such as which Organization the applicant belongs to, and who the leader of the Organization is, is already registered at the time of building the environment.

Change the Workflow diagram

Let’s edit the App again. Open the details page from the [App settings] page and start the Modeler with the [Edit] button.

First, we will modify the Workflow diagram. There are currently only two Swimlanes, [Applicant] and [Management Department], so we will add a Supervisor Swimlane. Select a Swimlane from the palette at the top of the screen, and place it in between the [Applicant] and [Management Department] Swimlanes. Object placement is adjusted automatically. After adding the new Swimlane, open the Settings window and change the name to “Boss”.

Then add a Human Task in the [Boss] Swimlane and rename it “Approve”. Once you have added the [Approve] Task, draw arrows to connect the Tasks in the following order; Apply -> [Approve] -> [Confirm].

By dragging & dropping the tip/end of the arrow and moving it, you can redraw the flow. If an unnecessary arrow exists, as described in Chapter 2, it can be deleted using the trash can icon which is displayed when a flow is selected.

It should look like the figure above.

Setting the Operator

Next, set the person in charge of handling the [Boss] Swimlane to [Swimlane] [Applicant] [Leaders who belong to the SAME organization with a user who operated the tasks in the swimlane]in the [Boss] Swimlane settings window.

By doing this, the person in charge of the [Approve] Task will be automatically decided according to the Organization to which the applicant belongs. For example, the supervisor of Canarias will be Sumatera, and the supervisor of Oahu will be Galapagos. But what about the leaders of each Organization, Sumatera or Galapagos? If they started the Process, the Task will be allocated to themselves.

This time we chose [Leaders who belong to the SAME organization with …], but as shown in the pull-down list, there are ten different relative selection options using Organization. Those will allow you to deal with various situations.

Now, save the App and release it. Since even if you make a request from your own account, you belong to the Organization [00 Whole company] where you should be the only member, so it would be good to check the operation with Canarias or Sumatra’s accounts as well.

For example, if you make a request from the Canarias’ account, the Approve Task will automatically go to Sumatra. There is no need to manually specify the approver. Sumatra is the supervisor of Canarias in the Organization [10 Management Department]. And when Sumatra makes a request, the Approve Task will be delivered to Sumatra. That is because Sumatra himself is the leader of [10 Management Department]. In this way, we could implement an App that automatically changes the destination of the [Approve] Task depending on the applicant.

To be continued in Chpt.4: Splitting by Condition

%d bloggers like this: