Tip: You can also quick start the modeler by clicking
Go to modeler
Flowchartssection This is the starting position for every project.
Flowchartsdetermine 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 flowchartafter a right-click on the flowcharts section.
Createand an empty flowchart modeler canvas with only a
start nodewill 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
Nameof 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
Startnode and then drag to the
Company overviewuser interaction node and release when mouse-over. An arrow is drawn between the 2 nodes with the title
Drawing mode: 1. Hover over the side of the
Start nodeuntill you see an extra layer. Then click and drag to the new
interaction nodeand release when mouse-over. An arrow is drawn between the 2 nodes with the title
An alternative way to delete a connection: first select a node with an outgoing arrow. Click on the
Unlinkicon in the
Exitspanel 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 nodein the "Home"
flowchartas 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
actionto "Deeplink" and connect the item to the
Previewbutton 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 modelfrom the menu, and select list to create a new
Database list. For this tutorial, we create a
Database listcalled Companies. Note that the Technical name is automatically generated from the Name.
The difference between a
Database listis short: A
Transient listdoes NOT store data permanently, a
Database listdoes. 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]);
Companiesis 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 fieldafter the right-click on the
New field.Enter the field name "Name", select the Field Type
New fieldof type
Text. Enter the field name "Email", click on
New fieldof type
Text. Enter the field name "Website", click on
New fieldof type
Rich Text. Enter the field name "Description". Press
User interaction nodethat 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.
Datapane 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.
datagridfor the "Companies" list. This will look as shown below.
Savethe template by clicking the
Savebutton in the top menu.
Template modifications always have to be saved manually! Flowcharts modifications are saved automatically.
Previewyour application as we did before.
datagridappears. In the next section we teach you how to store data.
action nodesin the
flowchartthat perform the desired actions, and the corresponding adaptation of the
interaction nodein the editor to enable actions in your user interface. Firstly, we will show the changes in the
flowchart, and thereafter the changes in the
flowchart nodes. The green nodes can be used for data model actions. Check our online documentation for detailed information.
user interaction nodewith the green list node.
You can use the
Draw arrowsoption from the top menu or the [Ctrl]+[Select] combination in
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.
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 nodewhich we will call "Company details". Next, we connect our "Add row"
action nodeto this new
interaction nodeand generate a
Default exit. Lastly, we change the "Company details"
interaction nodesetting to "Show as overlay".
database, we need supplementerairy
action nodes. Therefore, we add a
Save database list changes (
Discard database list changes(
action nodeare added to respectively save and discard the "Company details" form to our database.
interaction nodethrough. Note that this automatically generates "Changes saved" and "Changes discarded" exits.
flowchartto execute the "Add company" function we desired to fill our
database. Now we will continue this through editing the
interaction nodesof this
flowchartto connect our exits and action to elements on the user interface.
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
databasesince 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 nodeeditor again before closing!
user interaction nodeand 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 nodeand 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 nodeeditor "Company Overview". Select the
datagridby 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.
flowchart. Note that we have added the "Edit" exit similarly to the previous option.
user interaction nodeeditor. Here we select our
datagridand navigate to the
Datagrid Properties. We change the "On row click" behavior to "Follow button exit", and use the existing "Edit" exit we created before.
sub-flowchartcan used to clear up cluttered
flowcharts, but also prevent duplicate work if a specific set of actions on a
flowchartis repeated in a project.
flowchart, similarly to the previous
flowchart. Go to the
flowchartmenu and right-click on the folder to add a
new flowchart. Create the name "Delete company data" and select the
Regular flowcharttype. Press
interaction nodelater on, after we finish the
action nodethat 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
flowchartwill look like this:
save changesaction node to save our
databaseafter deleting the current row, and an
end nodeto be able to return "Company Overview". The
save changesaction node is similar to what we have used before. The
end nodecan 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
discard changes nodesto the
end node. Furthermore, we will change the "Are you sure?"
interaction nodeto an overlay interface.
flowchartwill look like this:
interaction nodein 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-flowchartto our "Companies"
flowchart. This is done through the
Add sub-flowchart nodein 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 nodebetween the new
sub-flowchart node. Create a new exit called "Delete" for the connection from "Company Overview" towards the
flowchartlooks like this: