Chapter 3: Creating Travel Request App
- Chpt.1: Using Preinstalled App as Workflow User
- Chpt.2: Creating Simple App
- Chpt.3: Creating Travel Request App
Let’s try creating a Travel Request App which is closer to a more practical, for the last challenge of this tutorial. Since we are going to make it by remodeling the App you made in Chapter 2, open it with the Modeler. [App Setting] > [Detail] button > [Edit].
Adding Data Items
First, we will give some addition of Data Items. Let’s make it an appropriate input form as a Travel Request App. Open the [Data Item] tab. There already are “Numeric” and “Date”. In addition to them, add three more Items that are types of “Date (the 2nd one)”, “User“, and “String“. Then name them respectively as follows.
|Date (the 2nd one)||Date until|
You can edit the Item names in the field the right half of the Data Item tab. Select the item you want to change its name from the list on the left side. Then type the new name in the text box on the right side.
It should be like the figure above.
Next, set up the Data editing permission. Let’ try using the editor that we didn’t use in Chapter 2. Find the [Data editing permission] button at the top right on the Data Item tab and click it.
In this editor, you set up Data editing permission by selecting a combination of Data Item and Human Task. You remember, that you can give different editing permissions to each Data Item to each Human Task, such as, you can write to the Data Item of “Title” at the Task of “Apply”, whereas at the Task of “Confirmation”, it is only displayed. With this editor, in a case, for example, where setting up editing permission for all Data Items at the Task of “Apply”, you select all Data Items on the list on left side, then select “Apply” Task in the workflow diagram on right-top. Then a list with Data editing permission buttons on it will be displayed.
Set all Data Items to “Editable” at “Apply” Task, and to “Only display” at “Confirmation” Task. When you finished, let’s go back by clicking the “Back” button in the upper right.
Setting up the layout of input form
For better viewability, 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. An input form to be generated by the current setting is displayed. Although it operates correctly even as it is, if you change the order of the items or set up 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 in the following order.
- Date from
- Date until
Next, set up Columns. There are radio buttons of “Columns” on the right side of the Data Item tab. Set the “Column”of “Date from” and “Date until” to 2. This will make “Date from” and “Date until” to be displayed side by side in one column.
It should be like the figure above.
Settings related to input values
Now, set up where related to the values to be entered in the form. Please change the setting for each item as follows.
Since it is for Travel Request, the amount of expense is a must. Select “Amount” from the Item list and check on “Required“.
Also, travel expenses will not be negative and should not be too expensive to request for. As there is a restriction setting of the input beneath the “Required” checkbox, so click on [Edit] to open the editing window. Enter 0 to “Min Value“, 20000 to “Max Value“. This will give the limitation of $0 to $20000 to the travel expense to 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 thousand dollar” in the text box of “Description“.
Change its subtype to Search select from select box. “Search select box” is a select box which can display the users in a list, which was used when selecting a request destination in the “Work request flow” of Chapter 1. This one is more suitable for selecting one user. If you want to compare behaviors, see”Form Preview” while changing the setting.
Also, inputting of “Applicant” is also required, so let’s set it up like that.
And it is considered that in many cases, the applicant him/herself will make a business travel request. In order to set the initial value of “applicant” as the applicant him/herself, click on the [Edit] button of Initial and set Process Start User to the initial value. With this, “User who Started the Process = person in charge of Applicant swimlane” will be input from the beginning as the initial value.
Change the subtype to multiple-lines from single-line in order to easily write even long sentences. This will make the text box bigger for displaying multiple lines.
Also, inputting “Summary” is “Required“.
And click on [Edit] beside “Initial”, then enter a Placeholder text appropriately. 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 set up an input example etc, it would be good to enter “New York – L.A. 250 dollar” for example.
Just set these two items to Required. Put check to”Required”.
When you “Form Preview” and if it is displayed like the following, the form setting is completed.
Now, you save the edited content, exit the Modeler, and “Release” version 3 and check its operation. Open the [Start] page from [Workflow] of the menu and Start a new Process of the edited App. Try various inputs and click [Finish “Apply”] button. Are the settings properly reflected?
- Are all fields other than “Title” required?
- Is it possible to enter “Amount” only from 0 to 20000?
- Is the initial value of the search text box of “Applicant” the applicant him/herself?
- Is the placeholder text of “Summary” displayed?
If the “Finish” button is clicked while there are items that do not satisfy the condition, an error should be displayed in red in the corresponding part. If it behaves like that, the setting related to the Data Items is completed!
Adding of “Boss” Swimlane
In the App created in Chapter 2, the person who looks over the business trip applications is only the employees belonging to the organization “10 Management Department” who is in charge of Operating “Swimlane” of the “Management department”. In addition to this, let the applicant’s boss make an approval on the application. In this case, we must design so that the person in charge of the “Approval” Task to be determined according to the applicant. You can set it so that the person in charge of “Approval” Task to be designated automatically by using Organization data. That is because the information such as “which organization the applicant belongs to” and “who is the leader of the organization”, is already registered at the time of building the environment.
Change on Workflow diagram
Well, let’s edit the App again. Open the details page of the App from the App setting page and start the Modeler with “Edit” button.
First, we will modify the Workflow diagram. There are only two Swimlanes of “Applicant” and “Management department” now, so we will add a “Boss” Swimlane newly there. Place a new Swimlane in between “Applicant” and “Management department” Swimlane by drag & drop. Object placement is adjusted automatically. After adding the Swimlane, open the properties window and change the name to “Boss”.
Then add a Human Task onto the “Boss” Swimlane, and rename it to “Approve”. Once you have added the “Approve” Task, draw arrows in the order of “Apply” -> “Approve” -> “Confirmation”.
It should be like the figure above.
Setting of 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 ‘Applicant'” on the Operator tab.
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 boss of “Canarias” will be “Sumatra”, the boss of “Oahu” will be “Galapagos”. Then, what about the leaders of the organization, “Sumatra” or “Galapagos”? It will be allocated to themselves.
Now, save the App and Release it. Since even if you make a request from “YOU”, “YOU” belongs to “00 all company” where should be only “YOU”, so “Canarias” or “Sumatra” would be good to check the operation.
For example, if you make a request from the account of “Canarias”, the “Approve” Task will automatically go to “Sumatra”. There is no need to manually specify the approver. “Sumatra” is the boss of “Canarias” in “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 to “Chpt.4: “Splitting” by Condition”