Flowcharts

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).

The first flowcharts

When you look at the flowcharts of a new project, you will always find the default Home flowchart. 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.

Creating Flowcharts

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.

Flowchart Editor

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).

Toolbar button	Description
Preview	Starts this flowchart in preview.
Breakpoint	Puts a breakpoint on selected node (a condition can be added) - application will stop here in preview-mode.
Find usages	Find out where this flowchart is used.
Cut	When one or more nodes are selected, this will cut them out of current flowchart and you can paste them on another flowchart. After paste-action, nodes will be deleted from current flowchart.
Copy	When one or more nodes are selected, this will copy the selection and you can paste them on the same or on another flowchart.
Paste	When one or more nodes are selected and Cut or Copied, this will paste them on the current flowchart.
100%	This will reset the view of the flowchart to 100% and centered.
Zoom in	Zoom in on the flowchart (see less nodes but bigger).
Zoom out	Zoom out of the flowchart (see more nodes but smaller).

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.

How to use flowcharts

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

• Etc.

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 Start node;

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 Interaction node;

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 node is executed, and when this node exits, the flowchart also exits by pointing to the End node;

6. When the user decides to cancel the addition of a new Case Type, theDiscard all database list changes node is executed. When this node exits, the flowchart also exits by pointing to the End node;

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.

You can delete nodes by selecting them and using the delete key, this will immediately delete the node from the flowchart. When deleting an interaction node or when you have multiple nodes selected you are asked for confirmation. Make sure you have the right nodes selected, there is no way back.

Node Exits

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.

Ignore User Input

Exits on an Interaction Node can have the option activated. It is off by default.

The effect of this option, should be understood as follows:

It cancels any and all changes made within the context of the Interaction Node and those actions leading up to the Interaction Node, starting from the latest "commit-to-server" action, like a [Save All Database Changes] listnode or a [Confirm Session Changes] processnode. It ignores any input changes made by users and prevents any Validation to occur on those input changes.

This also includes actions like Add Row to a list just before the Interaction Node, and setting field values for that new row in the Interaction Node.

The feature to Ignore User Input is typically used with exits that provide the [Cancel] feature for users. But it does more than just "ignore user input" (the values a user has entered in form or input fields) and prevent validation on these fields.

If you are working on a multi-step process where records should be created and certain steps in the process should be able to be skipped by the user, you should NOT use the Ignore Option on exits within these steps, but rather you should move all necessary validations towards the end of the process and return user to the step to be remedied.

We will improve the visibility of this setting in future, because at this moment it is a bit obscure (in the past, there were more options available at this point, which have been replaced by options in the Template Editor).

Flowchart Nodes

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:

Icon	Description
	User Interaction The user interaction node is used wherever there is interaction with the user. These nodes translate into pages where a wide range of user interaction components can be used (forms, lists, buttons, images, charts, etc.).
	End Node When an end node is reached it means that this flowchart has ended. The system will go back to the place where the flowchart was started. If there is no point to go back to in the flowchart-stack, a page will be displayed with the message An end node has been reached.
	Flowchart Node This node specifies another flowchart to be started. Very often an application consists of reusable functionality or processes. By modeling these in separate flowcharts, you can refer to these reusable functions by specifying the sub-flowchart node. This will also help to keep your flowcharts tidy.
	Navigation node This node is used to jump to a specific navigation point.
	Clear session node The clear session node deletes the current session and all related states. By default it will redirect you to the home page where it will create a new session, but you can specify another navigation item.
	Decision Node This node is used to decide what should happen within a workflow, based on the condition specified in the node. This condition evaluates to a specific exit which can be customized depending on the condition. For example, a single select datafield can be in a decision where the concepts are the node exits.
	Assignment Node The assignment node is used to assign a value to an item in the project like a data field, or an input field of a webservice.
	List Node The list node makes it possible to define an action that should take place on a list. Actions include (but are not limited to) finding, adding or deleting a row in a list.
	Loop Node When it is necessary to loop through a list or a multi-select field, the loop node can be used. This makes it possible to apply certain functionality to every row in the list.
	Save Node When a save node is reached, all changes since the last save action will be saved to the database.
	Discard Node When a discard node is reached, all changes since the last save are discarded.
	Import Node The import node makes it possible to import data from a file (Excel, CSV) or from a JSON stream.
	Export Node Export data to a file (CSV, Excel).
	Invoke Webservice When a webservice is needed, the service request node is used to specify the webservice that needs to be called. When this node is reached, the designated webservice is actually called with the input parameters (that should be set in advance using assignment nodes). When the node exits, the output of the webservice is available for further use.
	HTTP Request The web request node can be used to execute HTTP requests. Rest/JSON services can be called using this node.
	Process Node A process node is used to use one of the pre-defined functionalities of the processes that are activated on the project level. These functionalities include e.g. sending email, printing a document, PDF document generation and many more.
	Ping Server
	Realtime Message Node These nodes are used to send real time messages between a sender and a listener.
	Authentication Node The authentication node is used if you want to authenticate a user through either SAML or OAuth2. It basically means that through this node, you realize single sign-on with your enterprise network, or you authenticate a user through e.g. Facebook, Twitter or LinkedIn
	Note Node A note is not an actionable node as the ones before, but can be used to place informative remarks on the flowchart. A note does not offer any functionality, nor does it affect anything in the flowchart.