First application

First application

CRMHeader

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.

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

screenshot-1-1-1

Tip: You can also quickstart the modeler by clicking Go to modeler screenshot-1-1-2

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.

screenshot-1-2-1

Create a new flowchart

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

screenshot-1-2-2

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.

Enter a flowchart name e.g. Companies.

screenshot-1-2-3

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.

screenshot-1-2-4

Create a user interaction screen

We start with a simple user interaction screen. Drag and drop a user interaction nodescreenshot-1-2-6 onto the canvas to the right of the Start node.

screenshot-1-2-5

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.

screenshot-1-2-7

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

screenshot-1-2-8

How to connect 2 nodes in Selection mode: 1. Hold the Control [Ctrl]key. Your cursor will change into a plus sign [+] 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.

screenshot-1-2-9

How to connect 2 nodes in Drawing mode: 1. Click in the top menu bar on Draw arrows 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.

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.

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.

screenshot-1-2-10

Note: a connection will also be deleted when the referring node is deleted

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.

screenshot-1-2-11

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.

screenshot-1-2-12

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.

screenshot-1-3-1

Click on Data model from the main menu.

screenshot-1-3-2

Then select Database list from the top menu item New list

screenshot-1-3-3

The difference between a List and Database list is short: List does NOT store data permanently, Database list does. For more detailed information, check our online documentation.

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.

screenshot-1-3-4

Note: the technical name is optional, but it is advised to use a technical name. Check our online documentation.

The database list Company is now created.

screenshot-1-3-5

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

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.

screenshot-1-3-6

Text is one of the 10 list types. Check our online documentation for a detailed description of all list types.

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

screenshot-1-3-7

The technical name is optional, but it is advised to use a technical name. The convention we use: [Datamodel list name.field name], but you can define your own convention.

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.

screenshot-1-3-8

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.

screenshot-1-3-9

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.

screenshot-1-3-10

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

screenshot-1-3-11

You can reorder the data model list by clicking on one of the field columns Name, Type or Details.

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.

screenshot-1-3-2-1

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

screenshot-1-2-9

screenshot-1-3-2-2

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 [+].

screenshot-1-3-2-3

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

screenshot-1-3-2-4

When the List view button is grayed out, it means that there is no data model list selected in the Data pane on the right side. Click on a data model list to enable List view.

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

screenshot-1-3-2-5

First make sure that the datagrid on the screen is selected! If the datagird is not properly selected, the fields will be placed outside the grid.

Click on the blue title bar of the datagrid "Company". When a datagrid is selected it has a gray striped thickly rounded edge with eight small squares on the rim.

screenshot-1-3-2-6

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:

screenshot-1-3-2-7

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

screenshot-1-3-2-8

Template modifications always have to be saved manually! Flowcharts modifications are saved automatically.

Click on the Companies flowchart tab and Preview your application.

screenshot-1-3-2-9

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

screenshot-1-3-2-10

Store data - Company data

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

screenshot-1-3-3-1

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 (screenshot-1-3-3-3) onto the canvas.

Next select the "Company" list.

screenshot-1-3-3-2

The result should look something this:

screenshot-1-3-3-4

Now connect the 'Company overview' user interaction node with the green list node (screenshot-1-3-3-3).

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

screenshot-1-3-3-5

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.

screenshot-1-3-3-6

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

screenshot-1-3-3-8

Note: you don't have to save exit node adjustments. WEM automatically saves the adjustments. Just click anywhere on the canvas to proceed.

screenshot-1-3-3-9

Notice that the arrow is now titled 'New company'.

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

screenshot-1-3-3-10

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

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.

screenshot-1-3-3-11

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

Hint: don't forget to save the template!

Your template should look something like this:

screenshot-1-3-3-12

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

screenshot-1-3-3-13

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

screenshot-1-3-3-14

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.

Note: make sure that the form is selected before you select fields from a list in the data panel. If the form is not selected, the list fields a placed outside the form. A form is selected when 8 squares appear around the border.

screenshot-1-3-3-15

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:

screenshot-1-3-3-16

Note: don't forget to save the template!

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

screenshot-1-3-3-17

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.

screenshot-1-3-3-18

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

screenshot-1-3-3-19

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

screenshot-1-3-3-20

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.

screenshot-1-3-3-21

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.

screenshot-1-3-3-22

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:

screenshot-1-3-3-23

You can now preview your work and add company data.

screenshot-1-3-3-24

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.

screenshot-1-3-3-25

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

screenshot-1-3-3-26

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

screenshot-1-3-3-27

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.

screenshot-1-3-3-28

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

screenshot-1-3-3-30

Hint: when you click in the panel to place e.g. a button you will notice that there is already a blank space. You can delete this blank space by pressing the [Backspace] button once.

screenshot-1-3-3-29

The result look should look something like this:

screenshot-1-3-3-31

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.

screenshot-1-3-3-32

Note: don't forget to Save your template!

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

screenshot-1-3-3-33

A selection window appears. Select the 'Companies' flowchart.

screenshot-1-3-3-34

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

screenshot-1-3-3-35

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.

screenshot-1-3-3-36

Next

Next: expand the basic application

Back

Click here to go back to the introduction page.