Controls

Controls are form components that let end users provide dynamic values to queries. When a control value changes, any query referencing that control via RF_PARAM() automatically re-executes with the new value.

Input

Text, number, date, and other free-form inputs

Learn more →

Select

Dropdowns with static or query-loaded options

Learn more →

How controls work

User changes control value
    → Components detect RF_PARAM('control-id') reference in a query
      → Query re-executes with resolved value

RF_PARAM with controls

In queries, use RF_PARAM('control-id') to reference a control’s current value. The SDK resolves these references automatically before executing the query — you do not need to pass the parameters object manually.

React
Vanilla JS / HTML

import { ReeflowProvider, ReeflowInput, ReeflowTable } from '@reeflow/react';

<ReeflowProvider authToken="your-token">
  {/* The control */}
  <ReeflowInput controlId="search" type="text" label="Search" placeholder="Product name..." />

  {/* The table references the control value */}
  <ReeflowTable
    title="Products"
    query={{
      type: 'table',
      columns: [{ name: 'products.name' }, { name: 'products.price' }],
      filters: [
        {
          column: 'products.name',
          operator: 'contains',
          values: ["RF_PARAM('search')"],
        },
      ],
    }}
  />
</ReeflowProvider>;

<reeflow-provider auth-token="your-token">
  <!-- The control -->
  <reeflow-input control-id="search" type="text" label="Search" placeholder="Product name..."></reeflow-input>

  <!-- The table references the control value -->
  <reeflow-table title="Products">
    <script type="application/json" slot="query">
      {
        "type": "table",
        "columns": [{ "name": "products.name" }, { "name": "products.price" }],
        "filters": [
          {
            "column": "products.name",
            "operator": "contains",
            "values": ["RF_PARAM('search')"]
          }
        ]
      }
    </script>
  </reeflow-table>
</reeflow-provider>

When the user types in the input, the table query re-executes with the new search value.

For full details on RF_PARAM() syntax, allowed locations, and security considerations, see the JSONQL reference.