Building a search app with Tiggzi Backend Services, part 2: using regular expression

What are we going to build?

We are going to build an app that searcher the Tiggzi Backend Services database and uses a regular expression to search for states. The app will look like this:

Before you start

Tutorial level: Intermediate

It’s also a good idea to complete the first search app tutorial: Building a search app with Tiggzi Backend Services

Creating a new app

Create a new app in Tiggzi app builder. From Apps page, enter app name (use any name you want) and click Create.

Creating the mobile UI

Create UI that looks like this:

• Input component with ‘Enter state…’ as placeholder
• A button component
• Below the button we have the Grid component, with one column and the Label component inside.

Creating a database

1. Click Backend Services button inside the builder (next to Test button)
2. Create a database or use any existing database
3. Go to Collections tab and click Import button.
4. For Collection name enter: States, and upload the States CSV file to the database. Once the collection is created, it should look like this:
   

That’s all we need to do with the database.

Creating a REST service

Let’s now create the REST service to access the database.

1. From Projects view, Create New > Database Services, select the database that holds the Phones collection
2. From the States collection services, check the Query service:
   
3. Click Import selected services

You should see the service created under Services folder. You can also quickly test the service. Open the service and switch to Test tab. Type the following for ‘where’ parameter:

{"States":{"$regex":"^C", "$options":"i"}}

Click Test.

The above will return all states that start with letter C or c. “$options”:”i” is what specifies the query to ignore the case.

Adding and binding the service to the UI

1. With the page open, switch to Data tab
2. Add the service (datasource) to the page by selecting Service > [databaseName]_States_query_service > Add
3. Rename the service instance to: states_search
4. Now we are ready to do the mapping, click Edit Mapping button
5. Create the following request mapping:
   
6. Click Add JS button and enter the following JavaScript:

   return '{"States":{"$regex":"^'+value+'", "$options":"i"}}';

7. Switch to Response tab and create this mapping:
   
8. Save. Next we need to invoke the service.

Invoking the service

1. Go back to Design tab
2. Select the search button, open the Events tab.
3. Define the following event: mobilebutton1_x (Component) > Click (Event) > Invoke Service (Action) > states_search, click Add event button.
4. Save.

Testing the app

Run the app in the browser. For example, entering ‘ne’ will result in this: