Skip to main content

Dropdown Filtering Setup

This guide explains how to set up a dropdown filter using a Form App and dynamically filter rows in a **Table Widget ** based on selected input.

Goal​

Allow users to filter table widget results dynamically based on dropdown input using mock datasource values. This is useful for filtering things like floors, suites, categories, etc.

Overview​

  • Use a dropdown (Form Custom App) to select a filter value (e.g., floor)
  • Store the selected filter in a mock datasource
  • Apply the filter to a Table Widget using "Hide Rows" logic
  • Refresh the widget to apply the rule

Step-by-Step​

Add a Form App​

  • Drag a Form App into your content.
  • Change its Type to Dropdown.
  • Add your desired values (e.g., 1, 2, 3, 4, 5, 6 for floors).

Learn more: Form App > Dropdown

Set Up a Mock Datasource​

  • Go to Data Binding > Base Data Path > Edit Mock Datasource
  • Create a mock object like this:
{
    "filter": {
        "floor": "1"
    }
}

You can expand this structure with more filters like suite, building, etc.

Configure Table Widget​

  • Add a Table Widget.
  • Bind it to your data source.
  • Choose which columns to show (e.g., name, floor, suite).

Set Up Hide Rows Logic​

  • In the Table Widget’s Table Level Settings, enable Hide Rows.
  • Add a condition:
    • Column: Select the column you want to filter (e.g., floor)
    • Evaluation Type: does not contain
    • Evaluation Origin: Data Field
    • Bound Value: Your mock datasource > filter>floor

This means the row will be hidden if the current floor does not match the dropdown filter.

Handle Dropdown Selection​

  • Go to External Events > Edit Sensor Events
  • Add a new event based on the Form App's name (e.g., filter1)
  • Add an Execute Action Batch
  • Add a Sent Field:
    • Type: Property of Received Value
    • Value: value
    • Name: floorValue

Pass Value into Mock​

Inside your batch:

  • Add an action of type Change Datasource:
    • Datasource: Your mock (e.g., filterMock)
    • Special: Override Property
    • Property Name: filter.floor
    • Value Origin: Property of Received Value
    • Property Name: floorValue

Refresh the Table​

  • Add a second action: Interact Widget
    • Page: The one with your table
    • Widget: The table
    • Special: Refresh

This ensures the Table Widget reevaluates the hide row condition.

Extra Tips
  • If you have multiple dropdowns, add a small delay (e.g., 0.1–0.2 seconds) between each mock update to avoid race conditions when overwriting values.
  • This ensures the most recent input gets applied correctly and avoids flickering or missing values.

Summary​

You now have a working dropdown-based filter system using a Form Custom App and mock datasource. This allows users to refine the results shown in a Table Widget with just a few taps — improving UX and readability.