Understanding Option Filters

In many instances, a large portion of configurator logic derives from narrowing down options the user sees based on prior selections.  Option Filters allow you to store this business logic in a table structure, rather than lines of code, so its easier to maintain.  Specifically, Option Filters are powerful data-driven matrices which can drive available options in select fields based on other selections. 

Example

Consider a car configurator, which allows you to choose a car based on 3 attributes: type, make, and model. If you first select a Type of "Pickup", then the second Make field should show only companies which manufacture Pickup trucks. Then, if you select a Make of "Ford", the third Model field should only provide options for models that meet the first two criteria (all models where Type = "Pickup" and Make = "Ford"). On a whiteboard, the dependencies of these 3 attributes would appear like this:

Option filters make this kind of logic simple without needing to write code to determine each case. Instead, the logic is stored in a table.  For our example, we would create a table like this:

Type Make Model
Sedan Toyota Camry
Sedan Toyota Corolla
Sedan Ford Focus
Sedan Ford Fusion
Coupe Ford Mustang
Pickup Ford F-150
Pickup Dodge Ram

Using the table above as the source for an option filter, and then using that one option filter as the source for 3 fields, provides an automatic filtering:  selecting a type of "Pickup" would yield make options of "Ford" or "Dodge." If you then selected the make "Dodge" your model options would be only "Ram".


Use

To add an option filter to your configurator, begin by editing the configurator. In the design tree, click on "Option Filters" and then the "+" symbol. You can also select an existing option filter and duplicate it.

Then set an option filter's properties and options by clicking on it in the design tree: the properties for the selected option filter appear to the right.  

Then, in any select field in that configurator, you can use the option filter as a source.

Data Sources

The data can come from one of many different types of sources.

Table

By creating a table the option filter will take this data, and you can map the columns of the table to select fields in your configurator. The table data is downloaded when the configurator loads, so refreshes are lightning-quick. The columns on the table are directly mapped to the select options.

Database

For larger amounts of data, using a database may be prudent, since using a table could be too large to download. Databases are similar to tables, except they are queried on the server-side and may take a moment to refresh. The columns on the database table are directly mapped to the select options.

Query

For more complex logic, you can also specify queries for tables and databases. The columns in the result of the query are directly mapped to the select options.

Safe Function

Safe functions provide the maximum flexibility for where data may come from. Using safe functions, you can call a web service, retrieve data from a CRM integration, or code algorithms to provide the data you need the option filter to take. The safe function must return an array of a specific object which would most commonly be a global type. The properties of this global type are directly mapped to the select options.

Option Filter

To re-use the logic already built in another option filter, you can specify that option filter as the source.   For example, you can factor complex business logic into a chain of option filters for easier maintenance.  Or you can have foundation logic stored in one “root” option filter, with other “branch” option filters adding their own unique logic as necessary so you don’t repeat the same root logic in multiple places.

Behavior

When the option filter reduces the choices for a certain field down to just one, then that value is placed into the field automatically.  However, you can define how that field appears on-screen to your user.

How-to articles and step-by-step walkthroughs

  • Do nothing
    The field is visible and active: the only option available is selected.  If the user clicks it, the one option displayed is presented, but regardless of where they click it remains selected.
  • Disable the field
    the only option available is selected.  The field is inactive or "greyed out" – it is visible, but it doesn't respond to user interaction.
  • Hide the field
    the only option available is selected.  The field is invisible.  This is a powerful technique: options which are not available do not appear on-screen, and don't clutter the UI.  Your user has a simpler interface.  Hiding the field is often used with a "sparse" option filter, where the data table has cells which are unfilled.



Was this article helpful?