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
Click on the top left hand corner “Start for Free”
Register for a WEM Account
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.
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
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.
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.
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 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.
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.
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.
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!
Now return to the Home flowchart and drag and drop a sub-flowchart node on the canvas.
A selection window appears. Select the Companies flowchart.
Connect the Home user interaction node with the sub-flowchart node Companies and create button exit 'Companies'.
You have just created a sub-flowchart call.
You have now created your first WEM application.
You can preview and test your complete project by returning to the Home tab and then click on the Preview button below the Home Flowchart.
Click on the Companies tab.
Click on ‘New Company’.
Complete the information for a company.
Finished WEM Basic Section 1 out of 2