edoras one Modeler Tutorial

By executing this tutorial step by step, you will learn how to create your own App, which includes the following steps and learning content.

In this tutorial you will create a new App, which will handle a travel request. A person in need of traveling will create a new travel request and a travel agent is organizing the necessary bookings for the traveling.

The request process is built step by step by adding approvers to the process, modeling a feedback-loop between travel agent and requestor and by adding mail tasks to send out information once the travel has been organized.

Everything around the travel request is modeled within a case, so we are able to attach any necessary information like reservation information, vouchers and the like directly to the case as well as having an overview of everything going on while managing the travel request.

In order to get started, go to the modeler dashboard and hit c or click the Create button in the menu and choose Create App.

Type Tutorial App as the name for the App.

Select English as the primary language for the App.

Select any other languages you want as secondary languages.

Let’s create a first form by typing again c (shortcut) or clicking the Create button in the menu. Now let’s choose Create Form Model and make sure the Tutorial App is selected as the parent App (meaning the new form model will be created inside that App).

Type Travel Request Form as the name for the new form model and click Create and design in order to create the model and directly go to the form designer.

Now switch back to the browser tap where you created the new form (not the form designer) and click the Create button once again and select Create case model.

Fill out the case model form:

Now click Create to create the new case model.

Done! We have our very first version of the Tutorial App, ready to be deployed and used.

Click the Tutorial App link from your previous, green success message or the link within the header of the current case model in order to navigate to the Tutorial App.

In the App, you should now see two models, the Travel Request case model and the Travel Request Form model.

On the right side menu you can select Deploy which opens the deploy dialog. Navigate to the end of the form and click OK to deploy the App and make it available within the user dashboard so we can now test it.

In order to test the newly deployed App, we switch back to the user dashboard. You can do so by manually selecting the User dashboard from the menu of dashboards or use the d shortcut. While modeling and testing, it is also a good practice to have two tabs open constantly, one with the user dashboard and one with the modeler dashboard.

Once in the user dashboard, click Create or type c to open the creation dialog. Select Create Case and choose Travel Request from the selection menu.

Fill out the request init form as we designed it. Please note the validations and within the date picker, specifically see that you will not be able to enter a date earlier than today.

Click Create to start the new case. You will see the newly created case with the same form as we used it for both, the init and the work form. So you will be able to change any data and click Save in order to change the data for that case.

On the right side you will find available actions for the current work item (a case currently). The top right area shows the available views of the work item.

Actions from top to bottom:

Views from left to right:

Switch back to the modeler dashboard (either through the dashboard switcher or by going to your second tab with the modeler dashboard still open).

Choose the Tutorial App if not yet opened and click Create or hit c. Now let’s choose Create Process Model and enter Travel Request Management Process as it’s name and click Create and Design in order to create the process model and directly open it in the process modeler.

The process modeler is quite similar in it’s basic functionality as the form designer. On the left hand side you find the shape repository with several sections where you can choose process elements from, the middle area is the main process canvas where you design the process and the right hand side is showing the attributes of the currently selected element in the process canvas.

You can add elements to the process by simply drag and drop them from the shape repository onto the canvas.

Hint: as you start modeling processes, there is a very handy feature to make more space in your current process model, the spacing tool:

Activating it will allow you to simply extend (enlarge) the process model or make it smaller. Give it a try once you have some elements on the canvas and make yourself familiar with that feature. Simply turn it off by clicking it once again and deselecting it.

Let’s start the process model with adding a pool and lanes to it, although this is optional in BPMN 2, but is a good practice in order to visualize the different roles and involved people and groups in the process.

Go to the Roles section in the shape repository, drag and drop a Pool onto the canvas and name it Travel Request Process. A single lane has been added automatically, double-click its label (called Lane) and rename it to Requestor.

Now let’s add a second lane for the travel agent managing the travel request. Select Lane from the Roles section of the shape repository and drag it to the bottom part of the pool, which will add it as a second lane below the existing one. Name it Travel Agent. Using the spacing tool mentioned before, it’s easy to make the lanes smaller or larger according to the needs.

Now we created two lanes representing two different types of involved people in the process, the requestor actually creating the travel request and the travel agent, responsible to manage the travel.

Let’s add a start event to the process by dragging the Start event element from the Execution section of the shape repository onto the Requestor lane. As long as that element is selected, you should see the fast-modeling menu right next to the element. Click the user symbol in order to add a user task right after the start event. Name it Manage Travel Request, click on the user symbol again and name the next task Review Travel Bookings and then click the thick rounded end event in the fast-modeling menu.

Done! We have our very first process with a start event, two user tasks and an end event.

Now let’s move the tasks into the right lane by simply moving them. Move the Manage Travel Request task into the second lane, as it should be done by the travel agent. Make use of the spacing tool in order to add or remove space between lanes, elements, etc.

Now save the process model by clicking on the save action in the menu bar (ignore the warnings for now, we will add task forms later) and go back to the browser tab with the process model within the Tutorial App (not the designer window).

Navigate to the Tutorial App and select the travel request case model. In the Autostart Processes selection choose the newly created process model and save the case model again.