WEM.IO
and sign in. Start the WEM modeler and go to the newly opened tab. After you opened the modeler, a new project can be started through selecting the "+ New Project" button. Tip: You can also quick start the modeler by clickingGo to modeler
Flowcharts
section This is the starting position for every project. Flowcharts
determine how your applications works and interacts with users and systems. Therefore, they are important to Your project start with a Home flowchart, and you can create more flowchart along the way of developing your application. New flowchart
after a right-click on the flowcharts section.Regular flowchart
type.The difference between aRegular
andAction
flowchart is short: user interaction (Regular) vs NO user interaction (Action). More detailed information? Check our online documentation.
Create
and an empty flowchart modeler canvas with only a start node
will appear. A flowchart always consist of one start node
. On the left side of the canvas you will find the toolbar with all the available flowchart nodes.a user interaction node
Start node
.Name
of the node property into Company overview
, then click anywhere on the canvas to view the changes.An item (e.g. an interaction node) is selected when a blue border appears.
Selection mode
. In this Selection mode
, you can select one or more nodes, but you can also connect nodes. There are two simple ways to connect nodes, which are explained below. Selection mode
: 1. Hold the Control [Ctrl]
key. 2. Click on the Start
node and then drag to the Company overview
user interaction node and release when mouse-over. An arrow is drawn between the 2 nodes with the title Default exit.
Drawing mode
: 1. Hover over the side of theStart node
untill you see an extra layer. Then click and drag to the new interaction node
and release when mouse-over. An arrow is drawn between the 2 nodes with the title Default exit
.An alternative way to delete a connection: first select a node with an outgoing arrow. Click on theUnlink
icon in theExits
panel on the right side of the canvas to delete the connection/arrow.
Note: a connection will also be deleted when the referring node is deleted.
interaction node
in the "Home" flowchart
as before, to create a default user interface. navigation item
. Name the item "Companies, type "True" in the editor of the "Visible (in menu) and Allow access (via url) when" field, set action
to "Deeplink" and connect the item to the flowchart
"Companies". Press Create
.Preview
button in the top menu of the modeler.Company overview
. The look and feel is derived from a default WEM template. You will learn how to change the template in another tutorial later.Data model
from the menu, and select list to create a new Database list
. For this tutorial, we create a Database list
called Companies. Note that the Technical name is automatically generated from the Name.The difference between aTransient list
andDatabase list
is short: ATransient list
does NOT store data permanently, aDatabase list
does. For more detailed information, check our online documentation.
You can see that two fields are already created:ID
: a unique identifier for a row;Last modified
: this field contains the creation date of a new row. Both fields cannot be changed (![Lock][Lock]);
Companies
is now created. Next we add four fields to fill our data list. This is done through a right-click on the specific list and selecting new field. Thereafter, we can add a field name, select a field type, and put validation on this new field. Other input arguments are not important at this point in the tutorial.New field
after the right-click on the Companies
data list.Text
is one of the 10 list types. Check our online documentation for a detailed description of all list types.
New field.
Enter the field name "Name", select the Field Type Text
and pressSave
.New field
of type Text
. Enter the field name "Email", click on Validation
and select Email
. Press Save
.New field
of type Text
. Enter the field name "Website", click on Validation
and select URL
. Press Save
.New field
of type Rich Text
. Enter the field name "Description". PressSave
.User interaction node
that you added before (here renamed to "Company overview") to open the template editor.interaction node editor
. Here we create, edit and style the user interface of our application. The top of the editor shows the options to edit the interaction node.
This contains several standard used features, but also specified widgets. For this tutorial, we will focus on the simple usable features to help us in creating our CRM application.Data
pane on the left side of the template editor. To create a table of our data list in the interaction node, we first select the data model list "Company" and then drag this list on the interaction node. Release when you position the list on the main field of the interaction node.Datagrid
. Thereafter, we can select the items that we want to show in the datagrid.
Make sure you select the items in the order you want to show them in your datagrid
. You can change the order afterwards as well by dragging the columns to the desired order.datagrid
for the "Companies" list. This will look as shown below.Save
the template by clicking the Save
button in the top menu.Template modifications always have to be saved manually! Flowcharts modifications are saved automatically.
Preview
your application as we did before.datagrid
appears. In the next section we teach you how to store data.action nodes
in the flowchart
that perform the desired actions, and the corresponding adaptation of the interaction node
in the editor to enable actions in your user interface. Firstly, we will show the changes in the flowchart
, and thereafter the changes in the interaction node
.flowchart nodes
. The green nodes can be used for data model actions. Check our online documentation for detailed information.user interaction node
with the green list node.You can use theDraw arrows
option from the top menu or the [Ctrl]+[Select] combination inSelection
mode.
Create exit
. Now you create an exit for the user interaction node
. On the right side of the canvas a property screen for the exit appears.'Exits' are an important concept in flowcharts. An exit is one of the possible ways a node can exit and enter another node on a flowchart. Check our online documentation for detailed information.
Note: you don't have to save exit node adjustments. WEM automatically saves the adjustments. Just click anywhere on the canvas to proceed.
Notice that the arrow is now titled "New company".
Note: the green list node is by default "Add row"
interaction node
which we will call "Company details". Next, we connect our "Add row" action node
to this new interaction node
and generate a Default exit
. Lastly, we change the "Company details" interaction node
setting to "Show as overlay". database
, we need supplementerairy action nodes
. Therefore, we add a Save database list changes (
)
and Discard database list changes
(action node
are added to respectively save and discard the "Company details" form to our database. interaction node
through. Note that this automatically generates "Changes saved" and "Changes discarded" exits.flowchart
to execute the "Add company" function we desired to fill our database
. Now we will continue this through editing the interaction nodes
of this flowchart
to connect our exits and action to elements on the user interface.flowchart
.interaction node
! interaction node
, and continue in the "Company details" interaction node
. As this is an overlay, the outlook of our editor is different. database
. We delete the header in the main window, and replace it with the list "Companies" from our database
.database
since these are writable and the others are automatically generated.flowchart
. Now we drag a button to the bottom of the window, where it says: "Add buttons from the ribbon". This automatically gives the "Follow button exit" function to the button. Then we choose the "Save" and "Discard" exit for each button separately. Again, we can style the button as we like.interaction node
editor again before closing!user interaction node
and connect it with the existing "Company details" form. There are basically two ways to implement the edit feature:flowchart.
We start again with changes to the flowchart and then add the corresponding features on the interaction node(s). flowchart
, select the "Companies Overview" interaction node
and draw a new exit straight to the "Company details" interaction node
. Create a new exit and call it "Edit". This creates the possibility to go straight to the company details form from the overview, and edit the information in the same form.user interaction node
editor "Company Overview". Select the datagrid
by clicking once on the blue title bar. Navigate to the most right column, and hover over the right border. A blue plus (+) button appears which enables us to add a column. Click on that button. interaction node
.flowchart
. Note that we have added the "Edit" exit similarly to the previous option.user interaction node
editor. Here we select our datagrid
and navigate to the Behavior
feature in Datagrid Properties
. We change the "On row click" behavior to "Follow button exit", and use the existing "Edit" exit we created before.sub-flowchart
. A sub-flowchart
can used to clear up cluttered flowcharts
, but also prevent duplicate work if a specific set of actions on a flowchart
is repeated in a project.flowchart
, similarly to the previous flowchart
. Go to the flowchart
menu and right-click on the folder to add a new flowchart
. Create the name "Delete company data" and select the Regular flowchart
type. Press Create
.interaction node
later on, after we finish the flowchart
.action node
that deletes the selected row. Make sure you select the "Companies" list and the "Delete current row" action when adding this node.action node
. Then we connect the nodes and create the "Yes" and "Cancel" exits. The resulting flowchart
will look like this:save changes
action node to save our database
after deleting the current row, and an end node
to be able to return "Company Overview". The save changes
action node is similar to what we have used before. The end node
can be found in the top left corner of the canvas. After you added the nodes, connect the delete current row node to the save changes node, and both the save changes
and discard changes nodes
to the end node
. Furthermore, we will change the "Are you sure?" interaction node
to an overlay interface.flowchart
will look like this:interaction node
in the editor. Here we add text in the main text field to ask confirmation from the user, and we add a "Yes" and "Cancel" button on the bottom. The result should look something like this:sub-flowchart
to our "Companies" flowchart
. This is done through the Add sub-flowchart node
in the "Companies" flowchart
. Drag this node onto the canvas and select the "Delete company data" flowchart. Then create an exit from and towards the "Company Overview" interaction node
between the new sub-flowchart node
. Create a new exit called "Delete" for the connection from "Company Overview" towards the sub-flowchart
. flowchart
looks like this: