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.
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
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
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 Features > Add Table Filter, then configure the filter:
- Filter Type: Select Option
- Filter Method: Server
- Pick Options and Condition(s): Manually
- Model Condition to Affect: None
- Show Label Above Filter: Yes, use custom label.
- Filter Label: Opportunity Value
- Create “None Selected” Option: Checked.
- “None Selected” Option Text: Choose amount
Add the filter source [[]]¶
On the Choose amount filter, click
Add Option Source, then configure:- Source Type: Manual
Choose filter options¶
On the Source: Manual option source, click
Add Option, to create an option for the first range of numbers to be listed in the filter. Then configure:- What Conditions will this Option affect?: Affect Other Condition(s). 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 Effect twice to add two effects.
Note
Be sure these effects happen on the same option.
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).
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.