Dynamic Dependent Drop-downs Part 1: Small Data Sources (up to 3000 records)

Small data sources contain up to 3000 records. For small data sources it's better to use client-side filtering as it is faster. For our tutorial we have two dropdowns on our page. One will show the categories and the other one will display the products in the selected category.

Open the server connect panel (1), create a folder for the server action (2) and name it products. Now, add a server action in it (3) and name it too (4).

Under globals, click GET (1) and add a variable (2). We will use this variable to filter the products so we call it filter.

Right-click steps and add a database connection.

Load your database connection or create a new one if you haven't setup one yet.

Now, right-click the database connection step (1) and add a query (2).

Add a name for the query. For our tutorial we call it category (1). Set up the query (2). Choose your database table and add it (3). And then add the table columns, which you want to use with the category dropdown (4). When you're done, click OK.

Now, add a new query (2) by right-clicking the first you already created (1). This one will be used with the products dropdown.

Call it products (1) and setup its options (2). Add your table (3) and add the columns (4) that you need.

Open the filters tab (1) and add the column (2), you want to filter the products by. We'd like to filter by category. Then, click the dynamic data picker button (3) in order to set a value for the filter.

Under get, select the filter variable, which we've already created (1) and click select (2).

Click OK to save the changes.

Save your action file and you are done setting up the dynamic data.

Open the app connect panel (1) and add app connect to this page (2).

Right-click app (1) and select server connect (2).

Click the select server action button (1), browse the server action (2) and click select (3).

Now, let's bind a value to the get variable, which we created in the action file. Click the dynamic data picker button (1). Browse the value (2) from the first dropdown list and click select (3).

Now, let's bind dynamic data to our dropdowns. Select the first dropdown (1), which will show the product categories and click the dynamic data picker, in order to select its data source (2). Under server connect data browse the query (3) for the categories and click select (4).

Now, select dynamic data for the options text (1). Browse the binding (2), which you want to use here and click the select button (3).

Last but not least, select the dynamic data for the option values (1). Browse the binding (2) you need and then click select (3).

Do the same for the second dropdown, selecting a data source and the values for it. We'll skip this part as it is the same to what we've just did. Now let's preview the results.