Now that we have created the basic CRM application, we are going to expand the application with the next additional features:

Finally we are going to use the Ontology feature in WEM to implement static pick lists.

Edit existing company data

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 and open the Company overview user interaction node.

Select the Company datagrid by clicking once on the blue title bar. The properties pane appears on the right side of the screen. Click on the green plus (+) button to add a column to the datagrid.

 

 

Notice that a new column (column 5) has been added to the datagrid.

Next place your cursor in the new column (column 5).

Note: here is also a blank space you can delete by clicking on the [Backspace] button.

Now place a new button by clicking on the Button option in the top menu of the template editor. Next click on (+) New button and name it Edit.

screenshot-1-3-1-1-2

The result should look something like this:

screenshot-1-3-1-1-3
Note: don’t forget to Save your template!

Now return to the Companies flowchart.

To complete the edit feature, connect the Company overview user interaction node with the Company details user interaction node and select the Edit exit.

screenshot-1-3-1-1-4
Note: perhaps the Edit arrow is not visible because it disappears behind the green Add row: Company list node. You can rearrange the green list node so that you can see the Edit arrow.
screenshot-1-3-1-1-5

Now you can preview the additional edit feature.

Tip: you can show the Company details user interaction node as an overlay. Just click on the Company details user interaction node and select the Show as overlay option in the Node properties pane on the right side of the screen.

screenshot-1-3-1-1-6

The result should look something like this:

screenshot-1-3-1-1-7

Notice that there are two titles in the overlay. You can delete one of the two titles. Delete the title in the template editor.

On row click

Another way to implement the edit function is On row click. This feature is part of the datagrid properties.

First return to the Companies flowchart and open the Company overview user interaction node to delete the just added column 5 (with Edit button).

Select column 5 of the Company datagrid by clicking once on the column title (5). The properties pane appears on the right side of the screen. Click on the red cross button (X) button to delete the selected column (column 5) of the datagrid.

screenshot-1-3-1-1-8

Next select the Company datagrid by clicking once on the blue title bar. The properties pane appears on the right side of the screen. Go to the On row click property en select Follow Edit.

screenshot-1-3-1-1-9
Tip: don’t forget to Save your template!

Note: when the On row click property Follow Edit does not appear, just close and reopen the Company overview user interaction node.

Preview your project. Notice that the records in the datagrid of the Company overview are highlighted when mouse over. When you click on a highlighted record the Company details overlay appears.

screenshot-1-3-1-1-10
screenshot-1-3-1-1-11

Delete company data

First return to the Companies flowchart and open the Company overview user interaction node.

Select the Company datagrid by clicking once on the blue title bar. The properties pane appears on the right side of the screen. Click on the green plus (+) button to add a column to the datagrid.

screenshot-1-3-1-1-1

Again a new column (column 5) has been added to the datagrid.

Next place your cursor in the new column (column 5).

Note: also here is a blank space you can delete by clicking on the [Backspace] button.

Now place a new button by clicking on the Button option in the top menu of the template editor. Next click on (+) New button and name it Delete.

screenshot-1-3-1-2-1

The result should look something like this:

screenshot-1-3-1-2-2
Note: don’t forget to Save your template!

Now return to the Companies flowchart.

To complete the delete feature, drag and drop a green list node onto the canvas and select the Company list. The default action of the green list node is Add row, but we need to Delete current row. To do this select the action Delete current row from the Node properties pane on the right side of the screen.

screenshot-1-3-1-2-3

Next connect the Company overview user interaction node with the green list node and select the Delete exit.

screenshot-1-3-1-2-4

Finally, connect the green Delete current row list node to the Save all database list changes.

The result should look something like this:

screenshot-1-3-1-2-5

Preview your project and delete some records.

Conditional elements

With WEM, you can easily create web applications that respond conditional to data or user input. You can create conditional elements in flowcharts, but also in user interaction screens.

In this section we are going to implement a feature that checks if there is company data in the database (Company list). If the list is empty (no company record at all) we want to present a clear notification on the screen. We are going to use a WEM function and the WEM Expression editor for the first time. For more details check our online documentation.

Conditional in user interaction screens

First return to the Companies flowchart and open the Company overview user interaction node.

Place your cursor behind the Company overview title and press [Enter] to create an extra line between the title and the Company datagrid.

screenshot-conditional-elements-1

Click on the Conditional button in the top menu of the template editor. The WEM Expression editor appears.

screenshot-conditional-elements-2
In short: the WEM Expression editor is a text editor where you can use simple functions and commands to extend your WEM logic. The WEM Expression editor looks and feels like the Visual Basic Editor in Excel.

Next click on the (fx) Functions tab and then unfold the Aggregation folder by clicking on the plus [+]. Select the Count function by double clicking it. The Count(values) function is now placed in the WEM Expression editor.

screenshot-conditional-elements-3
The Count(values) function returns the number of items in a list. With this function you can determine if there are records (and how many) in a list. In our expression we need to determine if there are 0 (zero) or more than 0 (zero) records in the Company list. When 0 (zero) records are determined a clear notification (e.g. “There are no companies found!”) is displayed.

Now we have to replace (values) by the list name Company. You can simply select ‘values’ by double clicking it and type Company between the brackets. Or select from the Data model tab and select the Company list by double clicking it. The result should look something like this:

screenshot-conditional-elements-4

Complete the expression in the WEM Expression editor as follow:

Count([Company])=0

screenshot-conditional-elements-5

Next click Ok.

You can optionally check the expression by clicking the button Validate code.

A green bordered conditional frame is shown in the template editor.

Next place your cursor inside the green bordered conditional frame.

screenshot-conditional-elements-6
Note: also here is a blank space you can delete by clicking on the [Backspace] button.

Now you can place the notification “There are no companies found!” inside the green bordered conditional frame. Everything placed within the green bordered conditional frame is shown when the condition is true.

screenshot-conditional-elements-7

Preview your project en test the conditional. Make sure to delete all Company records.

You can also use an Alert panel from the Block option in the top menu of the template editor to emphasize the notification.

screenshot-conditional-elements-8

You can also add an icon.

screenshot-conditional-elements-9

Note: don’t forget to Save your template!

Conditional in flowcharts

Next we are going to implement the same feature as described above, but now we are going to implement the feature in a flowchart with a yellow decision node.

First return to the Companies flowchart.

Drag and drop a yellow decision node onto the canvas.

screenshot-conditional-elements-10

Now the WEM Expression editor appears. Use the same expression as you used in previous feature (Count([Company])=0). Click Ok.

screenshot-conditional-elements-11
screenshot-conditional-elements-12

Next drag and drop a user interaction node and name this Notificaton. In the template editor, delete the title and place a Block>Alert with the text “There are no companies found!”.

screenshot-conditional-elements-13
Note: don’t forget to Save your template!

Next create 2 Exits for the Notification user interaction node. Name one Exit Back and one Add company.

screenshot-conditional-elements-15

Make sure to enable Show in button bar on both Exits.

screenshot-conditional-elements-16

Next connect the Start node with the yellow decision node. Connect the yellow decision node with the Notification user interaction node and select the Exit Yes.

screenshot-conditional-elements-14

Next connect the yellow decision node with the Company overview user interaction node and select the Exit No.

screenshot-conditional-elements-18

Next drag and drop subflowchart node  onto the canvas, select the flowchart Home and connect this with the Back Exit of the Notification node.

screenshot-conditional-elements-17

Finally, connect the Notification user interaction node with the green list node Add row: Company and select the Add company Exit.

screenshot-conditional-elements-19

Tip: rearrange the flowchart to avoid crossing arrows. The result should look something like this:

screenshot-conditional-elements-20

Tip: You can optionally display the Notification user interaction node as an overlay.

screenshot-conditional-elements-21

Preview the project and test your adjustments.

Search and filter company data

In the previous sections you have learned to create a basic CRM application to store and edit company data. Once the application contains data, there is a need to quickly retrieve stored data. With WEM, you can easily build filters and search features. In this section we will show you how to do that. There are basically 3 steps to create a search feature:

  1. Create a search field (or search fields)
  2. Create a filter on a data model list, based on that search field
  3. Use the search field(s) and the filter in a template (user interaction node)

Create a search field

The first step in creating the search feature is to create a search field (or search fields). Suppose we want to search company data by company name. Then we have to create this search field (e.g. Company Name) in the Data model.

Go to the Home tab in the modeler and click on Data model. We are going to arrange all the search fields in a separate folder (e.g. Search fields) so we can distinguish these search fields from the Company data model list.

Click on New folder and name the folder Search fields. Also use a technical name e.g. SearchFields (no space).

screenshot-search-filter-1

Next create a text field named Company name. Also use a technical name SearchFields.Company name.

screenshot-search-filter-2

Next we are going to use this search field in a filter.

Create a filter

You can create filters on a data model list. Then you can use these filters in user interaction screens.

First select the Company data model list by clicking it once. Then click on Edit this database list in the top menu.

screenshot-search-filter-3

The edit screen of the data model list Company appears. Next we are going to create a new filter by clicking on the (+) New button.

screenshot-search-filter-4

Enter a list filter name e.g. Search on company name and click on Ok.

screenshot-search-filter-5

The WEM Expression editor appears. Here we can define our filter expression. We are going to use the function contains. This function checks if a string (text) contains another string (text). This check is not case-sensitive and ignores diacritics. For more details about functions, check our online documentation.

In our case we need to check if the text in the Company name of the Company list corresponds to (a part of) the text in the search field Company name.

Technical name: now you can see the importance of the use of a technical name. With a technical name, you can distinguish between fields with the same display name (in this case Company name). One field belongs to the Company list and the other to the search fields.

First select the Name field from the Company list by double clicking the field on the right side of the WEM Expression editor.

screenshot-search-filter-6

Next type the function contains after the field name [Company.Name]. The function will be highlighted in blue.

screenshot-search-filter-7

Finally select the Company name from the Search fields folder.

screenshot-search-filter-8

The filter on the Company list is completed and now we can use it within the user interaction screen Company overview.

Use search field and filter

Return to the Company overview user interaction node in the Companies flowchart.

Next place the Company name search field in the template e.g. between the green conditional en the Company datagrid. Use a Form to place the search field.

Tip: to create a empty space to place a Form between the green conditional and the datagrid:

Step 1. Click once on the datagrid blue title bar. The datagrid is now selected (thick highlighted boarder appears).Step 2. Next click once on the highlighted border. The boarder of the datagrid appears thin now, but is still selected.Step 3. Next click once on your [left arrow key] and press [Enter].

The result in the template editor should look something like this:

screenshot-search-filter-9

Next change the properties Label and On change of the search field Company name. Change the Label into Search by name and On change into Refresh screen.

screenshot-search-filter-10

The last step is to use the previous defined filter on the Company list. To do so, first select the Company datagrid by clicking on the blue title bar. Then click on the filter button with the 3 dots in the properties panel.

screenshot-search-filter-11

Next select the datagrid filter Search on company name. The result should look something like this:

screenshot-search-filter-12
Tip: don’t forget to Save your template!

Now you can preview the project and search for company data by company name.

Reset search field

To make sure that the search field starts empty, you can flush the search field before entering the Company overview user interaction node. We are going to use a green assignment node () to do this.

Return to the Companies flowchart. Drag and drop a green assignment node () onto the canvas.

Next select the Company name search field from the Search fields folder.

screenshot-search-filter-13

The result should look something like this:

screenshot-search-filter-14

Note: the default Action of the green assignment node is New value. To flush the value of the Company name search field, change the Action into Clear value.

screenshot-search-filter-15

The last step is to connect the assignment node to the Start node and the yellow decision node. The result should look something like this:

screenshot-search-filter-16

Reset search field with an action flowchart

We not only want to perform a reset of the search field before entering the screen, but also on the screen itself (for example with a reset button). We will use the same assignment node for this, but now in an Action flowchart. Why? So we can reuse this reset feature.

Action flowchart

When a flowchart is needed that does not require any user interaction (e.g. a calculation, or in this case a clear value action(s)), you use an action flowchart. If your action flowchart references other flowcharts there can not be any user interaction in one of the referenced flowcharts. For exposing webservice functionality you can ONLY use action flowcharts. For more detailed information check our online documentation.

Return to the Home tab of the modeler and click on the Flowcharts folder. Create a (+)New flowchart and select Action flowchart. Name the new flowchart Clear search fields.

screenshot-search-filter-17

Next drag and drop a green assignment node () and an end node () onto the canvas.

Select the Company name search field for the assignment node and change the assignment node Action from New value into Clear value.

Connect all the nodes on the canvas. The result should look something like this:

screenshot-search-filter-18

Now return to the Companies flowchart and delete the previously added assignment node.

Drag and drop a subflowchart node (subflowchart-node) onto the canvas and select the Action flowchart Clear search fields.

screenshot-search-filter-19

Finally connect the subflowchart node with Start and the yellow decision node. The result should look something like this:

screenshot-search-filter-20

Next we are going to use the same Action flowchart within the Company overview user interaction node to reset the Company name search field manually with a button.

Return to the Company overview user interaction node. Create a new button between the conditional and the Search by name search field and name it Clear.

Attention: instead of Behavior Create exit now select Execute flowchart.

screenshot-search-filter-21

Select the Action flowchart Clear search fields.

screenshot-search-filter-19

The result should look something like this:

screenshot-search-filter-22

Preview your project and test the Clear button.

Expand search with additional field

In the previous section we have implemented one search field Company name. If you want to expand the search option with additional fields, you have to execute the following four steps:

  1. Add a search field(s) to the Data model
  2. Expand the filter on the – to be searched – Data model list (in our case Company)
  3. Add search field(s) to the user interaction screen
  4. Don’t forget to clear all the search fields before entering the user interaction screen and when pressing the ‘Clear’ button. You have to expand the ‘Clear search fields’ Action flowchart.
Add a search field to the Data model

Go to the Data model and add a Text field named Company description to the Search fields folder. Also use a technical name SearchFields.Company description.

screenshot-search-filter-23
screenshot-search-filter-24
Expand the filter on the Data model list

Go to the Data model list Company and click on the button [Edit this database list] button in the top menu of the modeler.

Next double click on the filter Search on company name. The WEM Expression editor appears.

screenshot-search-filter-25

Expand the expression with the next text (you can type the text or select the fields from the Data model tab on the right side of the expression editor) and click Ok:

And [Company.Description] contains [SearchFields.Company description]

The result should look something like this:

screenshot-search-filter-26
Add search field(s) to the user interaction screen

Go to the Company overview user interaction screen on the Companies flowchart.

Add the search field Company description to the existing Form.

Change the label into Search by description and change the On change property into Refresh screen

Make sure that the Form is correct selected, before double clicking the ‘Company description’ search field from the Data panel on the right side of the screen.

Don’t forget to change the On change property into Refresh screen!

The result should look something like this:

screenshot-search-filter-27
Don’t forget to Save the template!
Clear search fields by expanding the ‘Clear search fields’ Action flowchart

Go to the Action flowchart ‘Clear search fields’.

You can also open the Action flowchart Clear search fields by double clicking on the subflowchart node in the Companies flowchart.

Drag and drop a green Assignment node () onto the canvas. Next select the ‘Company description’ filed from the search fields folder.

screenshot-search-filter-28

Select the assignment Action Clear value.

screenshot-search-filter-29

Finally connect the Assignment node to the existing Assignment node and the End node. The result should look something like this:

screenshot-search-filter-30

Preview your project and test your new search field.

Use of suggestions

You can use suggestions when entering a form field. For example: when an end-user types the first 3 characters of a Company name, WEM may suggest stored companies that match the entered first 3 characters or contain those 3 characters in the Company name.

screenshot-search-filter-31

How do we implement suggestions? First return to the Company overview user interaction screen.

Click once on the Search by name field in the Form. Next click on the Suggestions button […] in the properties panel on the right side of the screen.

screenshot-search-filter-32

The next properties window appears:

screenshot-search-filter-33

The suggestions are based on the Data model list Company.

Next we have to define on which field in the list the suggestions are based on. We want the suggestions to be referred to the Company name field.

Click on the [fx] button.

The WEM Expression editor appears. Double click on the Name field of the Company list. Next click on Ok.

screenshot-search-filter-34

Change the Search mode option into ‘Contains’ and the Min characters into ‘3’. Next click Ok.

screenshot-search-filter-35
Don’t forget to Save the template!

Preview your project and test the suggestions feature. You can also add a suggestion to the Search by description search field.

Next

In the next section we are going to implement static pick lists with the Ontology feature.

Back

You can also return to the basic CRM application.

 +31 (0)20 240 21 20       

Videos and images courtesy of WEM Modeler. © 2019. WEM Modeler.
SitemapPrivacy - Terms - Company

 +31 (0)20 240 21 20       


Videos and images courtesy of WEM Modeler.
© 2019 WEM Modeler.
SitemapPrivacy - Terms - Company