Filtering a Query with Text Input

For this tutorial, we added an empty table, which we will populate with data on our page. We also added a simple text field above it, which we will use to filter the data.

First, let's setup the data source. Open the DMXzone Server Connect panel (1), create a new server action (2), name it (3) and in globals, right-click GET (4) and add a variable (5).

This variable will be used to filter our query, so let's name it - filter (1). Right-click steps (2) and add a database connection (3).

Select an existing connection from the menu or setup a new one, then right-click the database connection (1) and add a query (2).

Click the query options button (1), select your table and add it to the query (2). Then, add the table columns which you need. We add all of them (3).

In the filters tab (1), select the columns (2) you want to filter your query by. We want to filter by product name so we add it to the filters list (3).

Set the condition to contains (1) and select the value for the filter (2).

And under get, click the filter variable, which we created earlier (1) and click the select button (2).

Click the dynamic data picker button for the condition.

Here, we also select the filter variable under get (1). This way the filter will be applied only when the filter variable has a value. Otherwise the filter won't be applied and the query will return all of the results. Click the select button (2).

Click OK to apply the changes.

And don't forget to save your action file.

From the App Connect panel (1), add DMXzone App Connect to this page (2).

You can see that the text input (1) from our page has been automatically imported into the app structure. Right-click on it and select server connect (2).

Now, click the select server connect action button (1) and browse the server action that we created earlier (2). When you're done, click select (3).

Under the input parameters, you will see the filter variable, which we created in our server action. Let's assign a value to it. Click the dynamic data picker button (1).

We want to use the text input on our page as a value for the filter variable. So whatever is entered in it will be used to filter the query. Browse value (2) in the text input properties and click select (3).

Our query will be filtered when the text input value changes. Now let's bind the dynamic data on our page. Select the table row, either in design view (1) or in code view and in the properties pane, add new dynamic attribute (2). Open repeaters on right-click and add a repeater (3).

Now, setup the expression for this repeat. Click the dynamic data picker button (1) and under server connect data, select your query (2). Click select when you're done (3).

Now, let's bind the dynamic data into the table. Click inside the first cell (1) and then the insert binding button (2).

Under repeat, browse the binding (1) you want to insert there and click select (2). Do the same for the rest of your cells.

Let's preview the results now. You can see that the data is being filtered as you type! That's how easy it is to filter your database query, using a text input on your page.