The Flowcharts area of the WEM Modeler is where you model the way your application should work. Here you define the workflows, processes and all other functionality that make up your application. This also includes the use of user interaction screens (the screens or pages that are the application to its users).
When you look at the flowcharts of a new project, you will always find the default
Homeflowchart. This is the starting point for your project. When you create a new flowchart, you can choose between two types of flowcharts:
- 1.Regular flowchart: These are the flowcharts that can include user interaction (forms, pages, overlays, etc.). Most of the flowcharts are regular flowcharts.
- 2.Action flowchart: When a flowchart is needed that does not require any user interaction (e.g. a calculation, some background process that needs to run, etc.), you use an action flowchart. If your action flowchart contains sub-flowcharts there can not be any user interaction in one of the sub-flowcharts. In some situations, for example exposing webservice functionality, you can ONLY use action flowcharts. Action flowcharts can be distinguised from regular flowcharts by the lightning bolt in the icon.
Flowcharts can be organized in folders. When you have a small application with just a few flowcharts this is probably not necessary. But when you have an application that consists of hundreds (or even thousands) of flowcharts, it is important to have a structured list of folders to organize flowcharts. The way you want to organize flowcharts is up to you, there are no restrictions on the WEM Modeler side. Below is an example of flowcharts that have been organized in multiple folders.
When you select a flowchart or map you can see three dots appear. When you click the dots or right click a flowchart or folder the context menu appears.
When you open the context menu on a folder you will get the menu in the left picture. Here you can choose to make a new flowchart or a new folder to be placed in the selected folder.
On the right you see the menu when a flowchart is selected. From there you can open flowcharts, Open a preview of just one flowchart or copy a complete flowchart inside your project. It is not possible to copy flowcharts to other projects.
Both of them give you the option to rename your flowchart, delete it or find its usages. Renaming it will change the name in your whole project without breaking its functions.
The Find usages option is a useful tool to quickly see where a certain flowchart is used.
When you open a flowchart, you see the canvas on which you will draw the actual workflow. It contains a toolbar (top), the Nodes-toolbar (left) and the Properties and Exits pane on the right (when a node is selected).
Working in the editor mainly consists of drag-and-drop actions with nodes and exits or arrows. Nodes can be selected from the Nodes-toolbar and dragged onto the editor pane. Nodes are connected with exits or arrows by either dragging arrows from one node to the other when you press and hold the ctrl-key, or from the edge of a node to the other without the ctrl-key. What these nodes and exits represent will be addressed later in this section.
Moving on the flowchart editor pane can be done in several ways. Zooming in and out can be done via the buttons in the toolbar at the top of the editor, or through scrolling with your mouse or track-pad. Zooming focus is determined by the location of the mouse on the editor pane. Furthermore, you can move the pane with drag-and-drop when you click and hold the space bar. This allows you to move around your flowchart without zooming.
Flowcharts are the heart of your applications. With flowcharts you model the way your application works:
- Model your business process(es)
- Model the flow of your application
- Create the User Interaction (forms, pages, overlays)
- Integrate with external systems
Creating a flowchart is pretty straightforward: You select flowchart nodes from the toolbar on the left side of the canvas and drag them onto the canvas. WEM also allows you to add nodes by selecting various elements from the Project Resources pane on the left of the screen. By connecting the various nodes you create a certain flow: you basically tell the system what should happen in what order. Every node is used for a specific action, like showing a form or retrieving data from an external system. With a node exit, you tell the system what to do next. This way you can use the WEM Modeler to graphically model your application.
In the example above we are adding a new case type, as part of a case management system. The steps:
- 1.The flow always starts with the
- 2.The next step is to add a new row in the Case Type list, using the
List action node, where the selected action is "Add row";
- 3.After creation of the new row, the user is presented with a form to enter the specific Case Type information. This is done using an
- 4.In the form the user has two options: save all the information or cancel the addition of a new Case Type. Both options are visible in the flowchart.
- 5.When the user wants to save the new Case Type, the
Save database list changes nodeis executed, and when this node exits, the flowchart also exits by pointing to the
- 6.When the user decides to cancel the addition of a new Case Type, the
Discard all database list changes nodeis executed. When this node exits, the flowchart also exits by pointing to the
The example above is a very simple flowchart that shows how the different flowchart nodes can be combined to model a certain function. In this example the addition of a new Case Type.
An important concept in flowcharts are the ‘Exits’. An exit is one of the possible ways a node can exit and is depicted by the arrows on the flowchart that connect the nodes. For example, a ‘Save’ button on a form can be an exit of a User Interaction node; information is stored and the form is closed.
Nodes can have multiple exits, depending on what happens within that node. In the example above there are two exits for the ‘New Case Type’ Interaction Node: Save and Cancel, which both refer to buttons on the form. When no specific exits are defined, the ‘Default exit’ is available.
An exit not only specifies how you can exit a node, but is also used to create your workflow. Every exit can be connected to another node and thus creating a certain workflow. When you model your application, but forget to specify an exit for a certain node, the application will show an error message because it is not clear what should happen. The only exception is the ‘End’ node. When this node is entered, the flowchart has completed and the application returns to the spot where this flowchart started.
On the left-hand side of the flowchart editor canvas, you find all the available nodes that you can use to create the flowchart and functionality you need. Simple drag and drop nodes on the canvas, and draw lines between the nodes to create the flow that is needed. The following nodes are available: