> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/tutorials/first-application/expand-first-application.md).
# Expand First Application
## Expand the basic application
Now that we have created the [basic CRM application](https://github.com/zoombim/Public-Documentation/tree/9ea353d2b85d2b842f953b8e43c375bb31923d5b/public/tutorials/first-application/README.md), we are going to expand the application with the next additional features:
* [Search and filter tool for our Companies database](#search-and-filter-company-data)
* [Conditional alert features](#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 a`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, 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](https://wem.io/documentation/reference/functions).
> **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](/platform/wemmodeler/wem-runtime.md) when you want to publish the project.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.wem.io/platform/tutorials/first-application/expand-first-application.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.