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, store information in a database and test your first application.
2. Expand the basic application: teaches you how to add user interaction, how to model application flow and how to search stored data.
3. Publish the application: teaches you how to publish your application to the world.

Basic Application Creation

You will build a basic CRM application to manage customer data (company and employee data).

Start modelling – My WEM projects

Go to WEM.IO and login. Click on My project from the WEM dashboard to start the WEM modeler.

Flowcharts

This is the starting position for every project. The Flowcharts section is the heart of your application. They determine how your applications works and interacts with users and systems.

Create a new flowchart

Create a new flowchart by selecting New flowchart, then select Regular flowchart.

Enter a flowchart name e.g. Companies.

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

We start with a simple user interaction screen. Drag and drop a user interaction node onto 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.

Connect nodes – draw arrows

The next step is to connect the 2 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.

Delete connections – delete arrows

You can delete arrows (and so disconnect nodes) by double click on an arrow. This is the most common way to delete an arrow or connection.

Preview your work

You can preview your work at any time in the development process. Click on the Play / Preview 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.

Data – use data models

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

• Company name

• Company description

• Company website URL

• General company e-mail address

Create a list

WEM organizes data through lists. First click on the Home tab in the top menu bar of the modeler to return to the main menu.

Click on Data model from the main menu.

Then select Database list option from the top menu item New list

A popup window appears. Enter a database list name (e.g. Company) and a technical name (e.g. the same name as the list name Company) and click Ok.

The database list Company is now created.

Next we add 4 fields to complete the Company data list. For each of the 4 fields click New field from the top menu and then select Text.

Enter the field name Name and the technical name Company.Name. Press Ok.

Create a New field of type Text. Enter the field name Description and the technical name Company.Description. Next adjust Max. Length from 50 to 200 characters. Press Ok.

Create a New field of type Text. Enter the field name URL and the technical name Company.URL. Next click on Validation and select URL. Press Ok.

Create a New field of type Text. Enter the field name Email and the technical name Company.Email. Next click on Validation and select Email. Press Ok.

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

Use lists in your flowchart

In this section we use the Company list to view and store Company data.

View data – Company data

First go to the Companies flowchart and open the flowchart editor by double clicking it.

Then double click on the User interaction node Company overview to open the template editor.

Position the cursor on the next line just beneath the title Company overview. You can do this by clicking beneath the title.

We would like to display the data from the data model list Company. The data model list Company you created in the previous section is shown in the Data pane on the right side of the template editor.

First select the data model list Company by clicking it once. Then unfold the list by clicking on the [+].

Now you can place a List view on your screen. Select List view then Datagrid.

Now you have a user interaction screen with a datagrid for the Company list, but there are no fields defined in the datagrid. This is the next thing to do…

Now double click on the desired fields in the Data pane and the selected fields will appear in the datagrid. The result should be something like this:

Save the template by clicking the Save button in the top menu.

Click on the Companies flowchart tab and Preview your application.

The Company 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.

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 Company list.

Drag and drop a green list node () onto the canvas.

Next select the Company list.

The result should look something this:

Now connect the Company overview user interaction node with the green list node  ().

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

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

If desired, you can rearrange the 3 nodes. The result should look something like this.

Now we need to create a button on the Company overview form to trigger the exit we just created.

Open the Company overview user interaction node.

Place your cursor beneath the Company data grid. Then select Button from the top menu of the template editor. Notice that the New company exit is one of the options. Select New company.

Your template should look something like this:

Form – Fill in Company data

Now we need a form to fill in the Company data. Click on the Companies flowchart and place a new user interaction node on the canvas and give the Name Company details. Next connect the green list node to the new user interaction node Company details.

Open the Company details user interaction node and place your cursor beneath the title Company details.

Next click on Form in the top menu of the template editor. A blue rectangle appears. This is your form field editor. Click once on the blue rectangle, so the form field editor is selected.

Next unfold the Company list from the Data panel on the right by clicking on the [+]. Select the desired fields by double-clicking them one-by-one. Click on the Save button in the top menu. The result should look something like this:

Save your data

First we are going to create 2 Exits on the user interaction node Company details.

Return to the Companies flowchart and click on the Company details user interaction node.
Next click on the New button exit in the Exits panel on the right. Enter the Name Cancel.
Next click again on the New button exit and enter the Name Save.

Now we want to display the 2 Exits in the default button bar of the application menu. Click on the pencil of the Cancel Exit and select both of the check boxes.

After selecting the check boxes a properties screen appears. Just click on the Ok button.

Do the same with the Save Exit, but don’t check the Ignore user input.

Next drag and drop a green Save all database list changes node on the canvas and connect this with the Company details user interaction node. Select Save Exit.

Next drag and drop a green Discard all database list changes node on the canvas and connect this also with the Company details user interaction node. Select Cancel Exit.

The last step is to connect the 2 green Save all list changes and Discard all list changes nodes we just added to the user interaction node Company overview. Your workflow should look something like this:

You can now preview your work and add company data.

Use of subflowcharts

A sub-flowchart makes it possible to start a flowchart in a flowchart. When the sub-flowchart node in a flowchart is reached, the flowchart that is defined as sub-flowchart will start.

In this tutorial we will call the Companies flowchart from the Home flowchart, so the Companies flowchart will act as a subflowchart.

First return to Flowcharts folder on the Home tab of the modeler and select the Home flowchart.

Drag and drop a user interaction node on the canvas and name it Home. Connect the Start node with the user interaction node.

Open the user interaction node Home and place a Panel from the Block menu option in the top menu of the template editor.

You can give the panel a title e.g. Company overview. To do this you can click on the title bar of the panel and enter the title. You can optionally change the color of the title bar by selecting a different context in the properties pane.

Next we create an Button exit by placing a Button in the panel we just created. Name the Button exit Companies and click Ok.

The result look should look something like this:

You can optionally change the color of the button by selecting a different context in the properties pane. Or you can optionally add an icon to the button.

Now return to the Home flowchart and drag and drop a subflowchart node on the canvas.

A selection window appears. Select the Companies flowchart.

Connect the Home user interaction node with the subflowchart node Companies and select the button exit Companies.

You have just created a subflowchart call.

Finished

You now have created your first WEM application. You can preview and test your complete project by returning to the Home tab and click on the play/preview button.

Next

Next: expand the basic application

Click here to go back to the introduction page.