Expand First Application

Add additional features to the basic application.

Expand the basic application

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

• Search and filter tool for our Companies database

• Conditional alert features

View company data

In this section, we will develop more features in our company data overview. We want to implement a search field to allow our users to search for a company in the overview. Furthermore, we will use conditional formatting to show alerts when our database is empty.

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 auser 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, for example "Company Name", in the Data model.

Go to the Data model tab in the modeler. 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.

Create a New folder and name the folder 'Search fields'.

Next create a text field in the Search field folder named 'Search Company Name'.

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 unroll the "Companies" data model list. Then right-click on Filters and create a New filter. Name the filter "Search Company Name" and use the expression editor to give the filter a purpose.

If we select the Filter expression field WEM Expression editor appears. Here we can define our filter expression. Here we want to filter our Company list datagrid by the input in the Search field when that complies with the "Company Name" in the datagrid. Therefore, we use the expression as shown below.

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.

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.

Use search field and filter

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

Next drag the "Company name" search field in the editor, for example, just above the "Company" datagrid. Select the Create a Form option to create the search field.

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

Make sure you select the On change - Refresh Screen behavior. Then, your datagrid will change when you enter a company name in the search field.

The last step is to use the previous defined filter on the "Company" list. To do so, first select the "Company" datagrid. Then click on the "Filter" button in the Datagrid properties field.

Next select the datagrid filter "Search on company name".

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

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

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

Preview your project and test the search feature.

Conditional alert features

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"), but also in the datagrid on the interaction screen after we use the search function. If the list or datagrid is empty (no company record at all) we want to present a clear notification on the screen.

Conditional in user interaction screen for search field result.

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

To create a conditional feature, we drag the conditional widget to the interaction window. Thereafter, we give our condition in the expression editor. We want to know whether our datagrid is empty, or the search gives a datagrid that is not empty (i.e. the amount of companies in complience with the search is not zero).

Next, we use our conditional formatting to show a certain alert when the Companies datagrid is empty. Therefore, we place the datagrid in the top box of the condition, which shows when the first statement of the condition is false. And we place the an alert in the bottom box, when the first part is true and the second part is false.

The result looks something like this:

Now the preview will show an alert when the datagrid does not match the search field. Test it yourself.

Conditional in flowchart for empty Companies list

Next we are going to implement another conditional feature in a flowchart with a yellow decision node. The goal for this feature is to show an alert notification on the "Companies" user interface when the "Companies" list is empty.

First return to the "Companies" flowchart.

Drag and drop a yellow decision node onto the canvas.

Now the WEM Expression editor appears. Use the expression "Count([Company])=0", since we want to show an alert if the Company list is empty.

We want to show a notification after the decision node when the decision is "True". For that purpose, we drag and drop a user interaction node and name this "Notificaton". Now we connect our decision node to the "Notification" interaction node via the "Yes" exit, and to the "Search company name" assignment node via the "No" exit.

Next create two exits at the "Notification" user interaction node. Name one Exit "Home" and one "Add company". After the notification shows, we want our users to either add a company to start filling the "Companies" database list, or to return to the "Home" screen.

Now we can connect the "Notification" node to the "Add company"action node via the "Add company" exit we just created. Furthermore, we create a new navigation node to that will navigate back to the "Home" flowchart, which we will connect to the "Notification" node via the "Home" exit we created.

Additionally, we change the "End" exit from our "Delete company" sub-flowchart to connect to the "Count([Companies])=0" decision node. We do that because when all companies in the database are delete, we would also like to show the notification as well.

After some restructuring of the flowchart, the result will look like this:

Lastly, we configure our notification with an alert feature, a "Home" button that links to the "Home" exit on the flowchart, and a "Add company" button that links to the "Add company" exit.

Preview the project to see how the conditional alert features work. Check by changing the company database in various ways.

Finished

Now you finished the Expand First Application tutorial. We showed additional features to improve the user experience of our company database by means of a search filter, and conditional alert features. If you are happy with your application, you can continue by publishing your project. Refer to our "WEM Runtime" documentation when you want to publish the project.