Let’s create a simple workflow app from scratch and run it.
In this chapter, we will create an app with the simplest configuration, with only a start and end point and one manual task in a single swimlane.
In actual work, it is rare to create a workflow that involves only one process or a task that only involves one person. However, here we will build this basic app to demonstrate the first step in app construction. In the process of creating the app, we will also learn how to place and connect elements, set the data to be handled, and release the app.
Launching the App Modeller
To create a Workflow App, let’s launch the Modeler, a tool for creating and editing apps.
- After logging in to your account, open the drop-down menu next to your username on the right side of the menu bar and select “App Settings”
- When you move to the app settings screen, a list of registered apps will be displayed. Since we are creating a new app, click the [Create new app] button under [App list]
- The screen for creating a new app will open, so enter an easy-to-understand name for the app
- Leave the Priority at 0
- Once you have finished entering the information, click the [Create New] button
This will launch the Workflow App Modeler.
If you look at the modeller, you can see that there are tabs labelled “Workflow Diagram” and “Data Items,” and a swimlane labelled “Operator”. In fact, the app is made up of the three elements I just mentioned.
- Workflow Diagram
- Shows the flow of work
- Data Items
- Defines what data is handled
- Operator
- Defines who should be in charge of the process
Let’s flesh out these three elements in order. We’ll start with the workflow diagram.
Create a Workflow Diagram
We will create a workflow diagram like this.
When you start creating a new app, there will be one swimlane labelled “Operator”, so first select a Start Event, End Event and task from the palettes at the top of the screen and place them in the swimlane.
 Swimlane |  |
 Human Task |  |
 Start Event |  |
 End Event |  |
Click on the icon to select it and place it as shown below.
Next, let’s change the names of each part. Name the Swimlane “Inputter” and the human task “Input”. Click the index finger icon on the far right of the palette to enter selection mode, select each object, and click the settings dialog mark to open the settings dialog.
※ Selection mode is used when selecting objects on the workflow diagram.
Change the name and close the dialog by clicking “Apply and Close” in the bottom right. A slightly different dialog will open for Human Tasks, but you can change the name in the same way.
Now it should look like this. Now all that’s left is to draw the flow (arrow). First, select [Flow] from the palette.
When you place the cursor over the edge of each object, the edge will be highlighted in orange. Try dragging and dropping it.
You can draw lines like this. Pay attention to the direction of the arrows and create a flow between each object.
Your workflow diagram is now complete!
What if you make a mistake when drawing?
If you place an object in the wrong place or draw a flow in the wrong place, delete the object/flow and place it again.
In selection mode, select the object you want to delete, click the trash can icon that appears, and follow the instructions to delete it.
Setting Data Items
Next, we will set up the data items. Switch the Modeller to the [Data Item] tab. In this tab, you can set the types of data items that will be handled by the app, as well as the form that will be displayed on the [Task Processing Screen].
“Title” is set by default. This time, let’s add a data item to which we can write text. Select “String (multiple lines)”.
In this state, an error will occur because there is no [Field Name]. Enter the [Item Name] and [Field Name] in the settings dialog.
The item name is the name that is displayed when defining the form or data visibility.
The field name is an identification name for processing within Questetra BPM Suite. Please enter a name starting with “q_” and using only letters, numbers, and underscores, with a maximum of 64 characters.
Here, the item name is “Contents” and the field name is “q_memo”.
Now, in addition to the original “Title”, you can handle text (multiple line) data in the process.
If you add a data item by mistake, delete it. When you hover the pointer over a data item, a delete button with a trash can mark will appear on the right. Use this to delete any data items you no longer need.
All that’s left to do is go to the task settings screen and define whether each data item can be viewed or edited, defining the visibility of the data.
| Input | |
| Title |  (Editable) |
| Contents | (Editable) |
Viewing and editing permissions for data items are set as shown above. Viewing and editing permissions for data items for each task can be set in the task’s settings dialog. Let’s return to the workflow diagram tab where you created the workflow diagram.
※ Viewing and editing permissions for data items can also be set using the [Bulk update data edit permission settings] function, but we will not explain how to do this in this tutorial.
Open the [Input] Human Task settings dialog. Edit the [Editable] radio buttons to match the contents of the table above. Once you’ve done this, the data item settings are complete!
Setting up Swimlanes
When setting up swimlanes, you can set who is in charge of each swimlane, which department, and which higher-ranking employee. In this chapter, we will only check who is in charge of processing, and we will explain the swimlane settings in more detail in the next chapter.
Now, open the settings dialog for the “Inputter” swimlane.
Please make sure that the account used to create the app is specified as the current processor.
Now that we’ve finished setting up the workflow diagram, data items, and processor, let’s release the work we’ve created and run it.
Releasing and Running the App
Click [Exit editing] in the upper right corner of the page to close the modeller. The figure above shows the workflow diagram tab, but you can also end editing from the data item tab.
When you close the modeller, the app details screen will open.
At this stage the app you created is in draft state. To make it usable you must [Release] it. Click [Release developing version 1]. You will be asked for a version note, but you can leave it blank.
Version 1 of the app you created has now been released and is ready to use!
Let’s try it out right away. Go to [Workflow] at the top of the page, then [Start] on the left menu, and try using the app you created. Remember that you start a new process from the [Start and process first step] button?
Are you being asked to enter the data items you set, “Title” and “Content”? These two data items were set as [Editable] in the “Input” task, so you can enter data on this screen. In this way, the data editing permission setting controls which task processing screen data can be entered on.
Now, enter the values you want in “Title” and “Content” and click [Complete “Input” processing].
This app only has one Human Task, so this marks the end of the process.
Let’s check that the task has been processed. Click [Processed Tasks] from the menu on the left to display a list. In that list, click the [Details] button for the task with the name of the app you created.
If you check the Status, you can see that the token has reached the end event and the process has ended.
chevron_forwardChapter 5: Create an App that Involve Multiple Users
chevron_backwardChapter 3: Running an App that Involves Multiple Users