First Application

Create a basic CRM application with WEM

With this tutorial, you will build a basic CRM application (Customer Relation Management) from scratch in 3 easy-to-follow steps, independently and at your own pace. Just follow this tutorial step by step and experience the creation of your first application.

1. Basic Application Creation: teaches you how to create your first application screens, and add navigation features between these screens.

2. Create a data model: teaches you how to create a data list and how to create data fields to store your customer data.

3. Apply your data model: teaches you how show your data in interaction nodes, and create multiple functionalities to edit the database in your application.

Basic Application Creation

You will build a basic CRM application to manage customer data.

Start modelling - My WEM projects

Go to my.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.

If you don't have a WEM account yet, you can create one here: Create your account.

Tip: You can also quick start the modeler by clicking Go to modeler

Thereafter, the project can be given a name and assigned to a workspace in your modeler. The regular workspace is sufficient for this tutorial. Then, you can configure the default language and time zone mode of the project. For this tutorial we select "English (United States)", and "From client IP address" for those options respectively. Next, the domain names and hosting zones can be set-up. We will use the default settings for the purpose of this tutorial. Lastly, a design must be selected for our application. Here, you can use the templates WEM has available. For this tutorial, we use the default template.

Create a new flowchart

On the left of your modeler window you will find a 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.

To start developing our CRM application, we will begin by creating a new flowchart through selecting New flowchart after a right-click on the flowcharts section.

Enter a flowchart name, for example "Companies". Furthermore, for this flowchart we select the Regular flowchart type.

The difference between a Regular and Action flowchart is short: user interaction (Regular) vs NO user interaction (Action). More detailed information? Check our online documentation.

Click on 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.

Create a user interaction screen

The first important step of creating a application is the use of interaction nodes. These are where you create the user interaction screen and apply, design and style these interaction modes of your application.

We start with a simple user interaction screen. Drag and drop a user interaction nodeonto the canvas to the right of the Start node.

Change node properties

Once you have placed a node on the canvas, you can change the properties of the selected node. The properties of a selected node are always shown on the right top side of the canvas.

Change the 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.

Connect nodes - draw arrows

The next step is to connect the two nodes on the canvas. The Flowcharts editor always starts in the 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.

How to connect 2 nodes in 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.

How to connect 2 nodes in 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.

Delete connections - delete arrows

You can delete arrows (and so disconnect nodes) by hovering over the connection name and clicking on the "x" that appears. This is the most common way to delete an arrow or connection.

An alternative way to delete a connection: first select a node with an outgoing arrow. Click on the Unlink icon in the Exits 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.

Before we can preview our work, we need to finish the flowcharts and navigation.

Firstly, we add a interaction node in the "Home" flowchart as before, to create a default user interface.

Next, we want to be able to go to our own "Companies" flowchart and "Company Overview" user interface in the preview. To do this, we create a navigation item that we connect to the Companies flowchart.

Go to Navigation in the left-menu, and unroll the "Main menu" navigation. We observe the Home navigation already present in this menu. Right-click on "Main menu" and select "add Navigation". Then, we can configure the new 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.

Now we can view our work and navigate between the two flowcharts/interfaces of the application.

Preview your work

You can preview your work at any time in the development process. Click on thePreview button in the top menu of the modeler.

At this point you will only see an empty user interaction screen with the title 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.

From this point we are going to store and view company data.

Create a data model

In our CRM application we want to manage our company and employee information. Therefore, we need to create a database.

Suppose you want to store, view and manage the following company data:

• Company name

• Company description

• Company website URL

• Company e-mail address

Create a list

WEM organizes data through lists. Lists can be generated in our data model. To go to the data model, we click on the icon next to the flowchart icon. Then, right-click on Data model from 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 Transient list and Database list is short: A Transient list does NOT store data permanently, a Database 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]);

Create data fields

The database list 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.

We add the four fields to complete the 'Company' data list. For each of the four fields click 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.

Create a New field.Enter the field name "Name", select the Field Type Text and pressSave.

Create a New field of type Text. Enter the field name "Email", click on Validation and select Email. Press Save.

Create a New field of type Text. Enter the field name "Website", click on Validation and select URL. Press Save.

Create a New field of type Rich Text. Enter the field name "Description". PressSave.

Now your data model list "Companies" is complete and should look something like this:

Apply your data model

In this section we want to create a user interaction space where we can view, store and edit our company data in our web application. To do this, we use the Company list we just made in our previously created Company flowchart.

View data - Company data

First go to the Companies flowchart and open the flowchart editor.

Then double click on the User interaction node that you added before (here renamed to "Company overview") to open the template editor.

Now we are in the 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.

We would like to display the data from the data model list "Company". The data model list "Company" you created in the previous section can be found in the 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.

Then, the editor will ask what type of list view you would like to use for your list. Select 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.

Now you have a user interaction screen with a 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.

Click on the "Companies" flowchart tab and Preview your application as we did before.

The "Company Overview" list is still empty, therefore an empty datagrid appears. In the next section we teach you how to store data.

Store data - Company data

First go back to the Companies flowchart and open the flowchart editor. To create a user interaction screen were user actions can be performed, generally two things are needed. These are: 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.

On the left side of the canvas you will find the toolbar with all the available flowchart nodes. The green nodes can be used for data model actions. Check our online documentation for detailed information.

We would like to add a new row to the "Companies" list.

Drag and drop a green list node ( ) onto the canvas, select the "Companies" list and connect the "Company overview" user interaction node with the green list node.

You can use the Draw arrows option from the top menu or the [Ctrl]+[Select] combination in Selection mode.

Click on 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.

Name the exit "New company" and click anywhere on the canvas.

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

The result should look something like this.

Note: the green list node is by default "Add row"

Now that we have added the action "Add company", we need to create a form to enable the user to add new data. This will be done via a new 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".

The result will look something like this:

We have created a form. However to save the form in our 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.

To finish our flowchart, we need to add exits to the newly added nodes. We want to either save or discard our "Company detail" form. Therefore, we create "Save" and "Discard" exits from the "Company details" node to the Save and Discard nodes. Important for the "Discard" exit is that we edit the exit via the pencil icon, and enable the "Ignore user input".

Lastly, we connect the Save and Discard nodes back to the "Company Overview" interaction node through. Note that this automatically generates "Changes saved" and "Changes discarded" exits.

We have so far created our 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.

Firstly, we open our "Company Overview" editor. Then we add a button to our interface as shown below.

We assign the button to "Follow button exit" and connect it to the "Add company" exit we created before on the flowchart.

Lastly, we can style the button to our own preferences. For this example we gave it a light blue color, added a plus-icon and aligned it to the right side of the interface.

Do not forget to save the interaction node!

No exit our interaction node, and continue in the "Company details" interaction node. As this is an overlay, the outlook of our editor is different.

In this interface, we wanted to create a form to enter company data into the database. We delete the header in the main window, and replace it with the list "Companies" from our database.

A pop-up appears where we choose to "Create form from all writable fields only", meaning it we use the fields we created in the database since these are writable and the others are automatically generated.

The result is a form which allows the user to fill in the company name, description, email and website.

Lastly, we add our save and discard buttons to follow our previously created exits in the 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.

Do not forget to save your interaction node editor again before closing!

Now we are ready to preview our application and add a company to the database.

If everything works correctly, you are able to navigate between the "Home" and "Companies" interfaces, and will be able to add a new company to the database through the buttons and form that we have created in our modeler.

Edit data - existing company data

The next step in adding features for our CRM application is an user inferface to edit the data in the database. This gives the ability change for instance a company email.

The edit feature is the most easy one to implement. You just have to create an exit from the 'Company overview' user interaction node and connect it with the existing "Company details" form. There are basically two ways to implement the edit feature:

1. With an edit button

2. On row click in the datagrid

Edit button

First return to the 'Companies' flowchart. We start again with changes to the flowchart and then add the corresponding features on the interaction node(s).

On the "Companies" 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.

Then, we go to the 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.

Next we add an edit button similar to our previous buttons. That is we assign it to follow button exit, namely the existing "Edit" exit. You can again style the button as you wish and thereafter save the changes made in this interaction node.

Now we are able to edit our company information through this button.

On row click

The other option of a data edit feature is to edit on row click of the datagrid. For this option we start again at our "Companies" flowchart. Note that we have added the "Edit" exit similarly to the previous option.

Now we again go to our "Company Overview"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.

Again, we are able to edit company data in our preview, but now we enter the company detail window through row click instead of the Edit button.

Delete company data

After we added the functionality to edit our data, we now will create a feature to delete data, or more specifically delete companies from our database. This allows us to clean up our database and get rid of unnecessary data.

To do this, we will use a new functionality of the WEM modeler, namely a 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.

The first step is to create this new 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.

After we open the new flowchart, we can start adding the action- and interaction nodes.

Firstly, we add a interaction node to create an "Are you sure?"-notification. We do this to prevent our users before accidentally deleting data. We will style this interaction node later on, after we finish the flowchart.

After the "Are you sure?"-notification, we want to create two options for our users, namely "Yes" and "Cancel". After "Yes", we want the application to delete the row that is selected on the "Company Overview" (the selection will be designed later on). Therefore, we create anaction node that deletes the selected row. Make sure you select the "Companies" list and the "Delete current row" action when adding this node.

For our "Cancel" exit we add a "Discard changes" action node. Then we connect the nodes and create the "Yes" and "Cancel" exits. The resulting flowchart will look like this:

Note: remember that the "Cancel" exit uses an "Ignore user input" function.

Now we need create a 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.

The resulting flowchart will look like this:

Now we edit the "Are you sure?" 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:

Lastly, we connect this sub-flowchart to 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 node between the new sub-flowchart node. Create a new exit called "Delete" for the connection from "Company Overview" towards the sub-flowchart.

The only thing that remains is to create a delete button in our "Company Overview" user interaction editor.

Open the editor and add a delete button, similarly to how we added the edit button before. Make sure you select the "Delete" exit when you assign an exit to the button. The resulting user interface and flowchart looks like this:

Preview your project and try to delete a record.

Finished

You now have created your first WEM application. In this application we have created an CRM system where we can view, add, edit and delete company information in a database application. Something similar can be done for your employees to store and manage their information. Other features that might be usefull in such an application are for example a search field, storing company correspondence and many other things.

In the next section, we will expand our CRM application with examples of these other features. Thereafter, we will finish our application and continue with publishing our application.