Use Select option to Filter on a Number Range

In Filter on Numeric Ranges, the examples used the pre-configured Numeric range filter type to limit records. Using the Select option filter type–even though we are working with numbers—to create a filter drop-down lets you present specific numeric ranges (which are controlled by different model conditions).

Image a sales manager who wants a filter that limits output to a fixed set of opportunity value ranges, for example, leads within the following ranges:

  • $1,000 to $10,000
  • $10,001 to $100,000
  • $100,001 to $150,000

When using the Numeric range filter type, the manager will have to manually enter these ranges. Instead, create the ranges using the Select option filter type.

The goal? A filter that allows the user to select from a drop down of pre-selected number ranges.

image1

Assumptions

Note

The example below assumes a Skuid page with:

  • a functioning model on an object that collects information about potential leads (In this example, we used Salesforce’s Opportunity object).

  • a table on that model with fields for …

    • Name (of lead)
    • associated account (if any): AccountID
    • Amount
    • Created Date and Closed Date
    • Owner ID

If using a different data source, the field names indicated may be different.

Create model conditions [[]]

Create pairs of conditions for each selectable range. These conditions will then be used to source the filter’s options. Let’s make conditions to represent the following ranges:

  • $1,000 to $10,000
  • $10,001 to $100,000
  • $100,000 to $150,000

First pair of model conditions [[]]

In the model, under Conditions, click add to add a new condition and configure this condition for the lower part of the first numeric range (e.g. $1,000):

  • Field: Use a numeric field (in this case, the opportunity object’s amount field.)

  • Operator: >= (Greater than/equal to).

  • Value:

    • Content: Single specified value
    • Value: 1000 (value that represents the lower part of the range).

    Note

    Do not include commas or currency symbols, for example, use 1000, instead of 1,000, or $1,000, or $1000.

  • State:

    • Condition state: Filterable default off.
    • Condition name: Give the condition a recognizable name, for example Lower_Amount1. This will be useful later when building the filter.

Click add to add a second condition and configure this for the higher part of the numeric range (i.e, $10,000):

  • Field: Use a numeric field

  • Operator: <= (Less than/equal to).

  • Value:

    • Content: Single specified value
    • Value: 10000 (value that represents the higher part of the range).

    Note

    Do not include commas or currency symbols.

  • State:

    • Condition state: Filterable default off.
    • Condition name: Give the condition a recognizable name, for example Higher_Amount1.

Second and third pair of model conditions [[]]

Follow the previous steps to create two more pairs of model conditions for values of $10,001 to $100,000 and $100,001 to $150,000.

Note

When setting the values, avoid creating overlapping ranges—which may cause some records to be displayed via more than one filter—by incrementing the next set of values by “1.”

Not: Instead:
First range: $1000 to $10,000 First range: $1000 to $10,000 (Same starting value)
Second range: $10,000 to $100,000 (Records with amounts that equal $10,000 display with both the first filter range and the second.) Second range: $10,001 to $100,000 (No overlap between the first filter range and the second.)
Third range: $100,000 to $150,000 (Similarly, records with amounts that equal $100,000 display with both the second filter range and the third.) Third range: $100,001 to $150,000 (Similarly, no overlap between the second filter range and the third.)

When all the model conditions are completed, there will be six total conditions available to the filter.

Build the filter [[]]

On the Table component, click Add feature > Table filter, then configure the filter:

  • Filter type: Select option
  • Filter method: Server
  • Pick options and condition: Manually
  • Filter label: Opportunity Value
  • Model condition to affect: None
  • Create “None Selected” option: Checked.
  • “None Selected” option text: Choose amount
  • Display as: Dropdown

Add the filter source [[]]

On the Choose amount filter, click add Add option source, then configure:

  • Source type: Manual
Choose filter options

On the Source: Manual option source, click add Add option, to create an option for the first range of numbers to be listed in the filter. Then configure:

  • Which conditions will this source’s option affect?: Affect other conditions. You don’t want to activate any default conditions, but instead activate one of those that you created specifically for this filter.
  • Label: $1,000 to $10,000 (This is the range of values that will display on the filter itself.
Add effects to the option

Each filter option must activate a pair of model conditions, so click add Add effect twice to add two effects.

Note

Be sure these effects happen on the same option.

  1. Configure the first effect:

    • Action: Activate

Note

Do not use Activate and set.

  • Model condition: Lower_Amount1 (or whatever you named you the condition governing the lower amount of the first range).
  1. Configure the second effect:

    • Action: Activate
    • Model condition: Higher_Amount1 (or whatever you named you the condition governing the higher amount of the first range).
Second and third filter options

Repeat the steps above to add two additional filter options and their effects:

  • One with an option label of $10,001 to $100,000 with two effects that activate the second set of model conditions.
  • Another with an option label of $100,001 to $150,000 with two effects that activate the third set of model conditions.