First Application Tutorial – A Basic CRM Application

Welcome to the First Application tutorial section of the WEM modeler.

This tutorial provide you with an introduction into how to use the drag and drop WEM modeler to create a basic CRM application.

With this tutorial, you can 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.

Basic Application Creation: teaches you how to create your first application screens, store information in a database and test your first application.
Expand the basic application: teaches you how to add user interaction, how to model application flow and how to search stored data.
Publish the application: teaches you how to publish your application to the world. (We won't be discussing it in this tutorial)

You will need a WEM account to work with this tutorial section. If you don’t have a WEM account yet, you can create one here: Create your account.

CREATE YOUR ACCOUNT

Go to

Click on the top left hand corner “Start for Free”

wem.io

After you submit, you should be re-directed to the following “Awaiting Confirmation” page.

Go to modeler

You will be re-directed to the below page. Click on “Go to modeler” on the top left hand corner.

Go to Modeler

Sign into the WEM Modeler

You have arrived at the WEM Modeler Start Page

Start the WEM modeler

To start the WEM modeler, simply click on My Project from the WEM dashboard.

You will arrive at the My project summary page.

At the top of the left hand column is a directory file called Flowcharts. Underneath this is the name Home. Click on Home to go to your first Flowchart page.

CREATE YOUR FIRST APPLICATION – A BASIC CRM

Flowcharts

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

Starting the 1st App

Create a new flowchart

To create a new flowchart, click on the Flowcharts folder, and then place the cursor at the end of that row in the panel on the left. Three dots will appear. Click on the three dots to show a new overlay panel – as shown below.

Create a new flowchart by selecting New flowchart. Another overlay panel appears titled New Flowchart in “Flowcharts”.

Enter a flowchart name e.g. Companies, then select Regular flowchart.

The difference between a Regular and Action flowchart is short: user interaction (Regular) vs NO user interaction (Action).

Click on Create and click on the new companies flowchart. 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.

How to connect two nodes in Selection mode:

Hold the Control [Ctrl] key sign. Click on the ‘Start node’ and holding down your left mouse button start to draw a line towards the ‘Company overview node”

Delete connections – delete arrows

You can delete arrows (and so disconnect nodes) by moving your curser above the connecting arrow where an ‘x’ appears. Clicking on this ‘x’ deletes the 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.

Preview your work

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

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.

WBT Preview Company Overview Empty UI.png

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 the Data model tab from the main menu. It is found at the top of the left panel.

Click on the 3 dots, a list appears as shown below.

Then select New list option from the menu.

The New List in Data Model 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), click Database list and then click Save.

The database list Company is now created.

Next we add 4 fields to complete the Company data list.

The 4 fields being:

· Company name

· Company description

· Company website URL

· General company e-mail address

To add a field, click on Company in the left panel, and then click on the three dots and then click on new field.

For each of the 4 fields click New field from the Company top menu.

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

Enter the field name Description and the technical name Company.

Description. Next adjust Max.Length from 50 to 200 characters, and then Press Save.

Enter the field name URL and the technical name Company. URL.

At the Validation field select URL and then Press Save.

Enter the field name Email and the technical name Company. Email.

At the Validation field select Email and then Press Save.

Now your data model list Company is complete and should look something like this (look at left hand side panel):

Use Data in the flowchart

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

Click on the flowchart icon at the top left hand corner of the left panel (to the left of the database icon). This will give you the list of flowcharts you currently have.

Then go to companies flowchart. You should see the following.

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 in this highlighted box.

The Data Grid icon is found in the top right of the screen – in the section named Miscellaneous.

Click and drop the Data grid icon in the rectangle field below the ‘Company overview’ title box.

The ‘Data Grid: Select a Source’ popup window appears.

Click on Company and press Ok.

Another popup window appears.

Select Name, Description, Email and url and then click Ok.

The result should be something like this:

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.

Go to the ‘Companies Flowchart’.

Connect Start icon to the Company Overview icon.

Then Preview your application.

WBT Preview Company Overview Empty Gatagrid.png

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

Store data - Company data

Go back to the 'Companies flowchart' editor.

We would like to add a new row to the Company list.

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.

Drag and drop a green ‘list action’ node onto the canvas. As shown below.

A ‘list action’ node popup window appears.

Next select the Company in the list and click OK.

The result should look something this:

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

Click on New button exit on the right side of the screen or click on 'create' exit option on the arrow. Now you create an exit for the user interaction node.

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.

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.

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

Place your cursor beneath the Company data grid and click on it. The space will be highlighted. Into this space we need to place the button.

The Button icon is found in the Interaction section of the ribbon above. Select the Button icon from the top menu of the template editor and drop it in the field below the datagrid.

Select Follow button exit in the popup list.

In the next popup window click New Company, and click Ok.

New Company button exit appears. Your template should look something like this. Remember to Save.

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.

Then click anywhere on the canvas. The screen should look as follows.

Open the Company details user interaction node.

Next click on Form in the top menu of the template editor and pull the icon into the green field below the Company details title text.

Next click on the Data Model icon at the top of the Left Panel.

Next unfold the Company list from the Data panel on the left.

Select the Name, Description, Url and Email fields.

Then pull these four selected fields into the empty form below the Company details title text created just now.

The result should look something like this:

Note: don’t forget to save the template!

First we are going to create two 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.

Next drag and drop a green Save 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 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 two green Save database list changes and Discard database list changes nodes we just added to the user interaction node Company overview. Your workflow should look something like this:

Go to ‘Company details user interaction node template’ Click and pull the Button icon into the field below the Company name, Description Email and URL field. Click follow button exit in the popup window and name the exit ‘Cancel’.

And then again click and pull the button icon into the field below the Company name, Description Email and URL field. Click follow button exit in the popup window and now name the exit ‘Save’.

You can change the appearance of the buttons by changing the color or displaying it as an icon. The end result should look like something this:

You can now preview your work and add company data.

When you Preview the Companies flowchart, you will get the UI with the New Company button.

WBT3 Preview Company Overview with New Company Button.png

Click on the New Company button, and you will arrive at the Company Details page.

Fill in some Company details and then press Save. You will arrive at the Company Overview page, with the new company information shown on the first row - example below.

WBT5 Preview Company Overview with First Row Complete.png

Use of sub-flowcharts

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 section we will call the Companies flowchart from the Home flowchart, so the Companies flowchart will act as a sub-flowchart.

First return to Flowcharts folder 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 top ribbon 'Layout' 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.

Next we create a Button exit by placing a Button in the panel we just created. In the popup window select ‘Execute flowchart’. Select the companies flowchart option and click Ok.

The result look should look something like this:

Note: don’t forget to `Save` your template!