Option Filters 1: Basic walkthrough: Segment a long list of options
Option filters are a simple yet powerful way to express complex business logic by guiding your user through a matrix of choices. If you define a series of options logically in a table, then an option filter can use this table to create a dynamic user interface for you. In this walkthrough, we'll introduce a common use of option filters. Use an option filter to break a long list of choices into a series of smaller groups that are easier for your users to navigate.
(This walkthrough is part of a series of help documents for option filters. For the full list of walkthroughs, see the "Related Articles" section below.)
Before you begin...
- Be familiar with the basic concept of option filters, as described on the Option Filter page.
Overview
In this walkthrough, we will:
One of many techniques
The technique we use here is the simplest and most common way to use an option filter. There are others. Learn this basic technique first, then see the "related articles" list below to learn about other option filter techniques.
Describe the business need.
In this use case, we are building a configurator for CubeCo, a small company who sells a configured product: a cube. Their customers can choose the dimensions of the cube, as well as what material the cube is made of. Offering the finest from gold cubes 1x1x1, to large wooden cubes 12x12x12, CubeCo prides itself on fast and accurate cube construction.
But CubeCo has a problem. Their users love the configurator, but CubeCo offers their cubes in many materials... so many, in fact, that users get lost in the list of choices. Some abandon their cart, and don't buy a cube at all. You have been tasked with solving the problem, and making the configurator easier to use.
Design the solution: a segmented list of choices
Many people feel overwhelmed when presented with too many choices and not enough information. Let's solve this problem by reducing the number of choices our user sees. We won't do this by reducing the total number of materials! Instead, we'll break the materials into logical groups, so the user can "drill down" through a series of choices to see a manageable list to select from. Instead of one long list, we'll present the information in three shorter lists.
After meeting with the product manager for Cube products, we created this matrix of data:
This matrix is the original list of materials, but each material option has been organized into a hierarchical category of choices. First, we divided the list into 3 families: organic, metallic, and synthetic materials. Then, each of those families was broken into logical groups. For example, the metallic materials are grouped into precious, semi-precious, and common metals. According to the product manager, our users easily understand these groups. And each group has a manageable number of materials within it.
Create a table to store a matrix of our user choices.
Option filters must be driven by a matrix of data, which can come from tables, database tables, safe functions, or even other option filters. Here, we'll use our simple matrix as our source. So, let's first build a table to hold that data.
| Task | Walkthrough Example | |
|---|---|---|
| 1 | Create a new table. | In the Administrator Interface, click "Resources > Tables" to see the tables in your environment, and click "New" to create a new one. |
| 2 | Name your table. | We'll create a table called "Cube Materials" |
| 3 | Add the necessary columns to your table, and define the data type for each. |
For our example, we'll have 3 columns:
The data type is important. When you use the data from this table later in a configurator, the datatype of each column here must match the datatype of the field where you want to use that column's information. If you didn't set the right data type, or aren't sure, just right-click on any column to get the context menu, and select "edit column". |
| 4 | Fill the columns with data. | Our example comes with some data pre-built for you. Paste it into place:
Did you paste in that first row of header information, along with the data? That's OK: it helps ensure your data is pasted into the correct columns. Just remember to delete that header row from the Epicor CPQ table. To delete a row of data from a Epicor CPQ table, just right-click anywhere in the row to get a context menu, and click "delete row". |
| 5 | Save your table. | Click "Save" at the bottom of the table, and return to the list of tables. |
Create an Option Filter to gather up that data for use in a configurator.
Now that we have a matrix of data, let's connect it to our configurator so we can use it.
Create a select field, using that option filter as the source.
Create other fields using the same option filter source.
Change the field order to change the user's path through the choices.
Related articles
| Task | Walkthrough Example | |
|---|---|---|
| 1 | Open your configurator. | |
| 2 | Create a new option filter. |
In the design tree of your configurator, find the Option Filters node, and click it so it's highlighted. Add a new option filter beneath it by clicking the "+" symbol in the highlight bar. We'll name our option filter "MaterialOptionFilter". |
| 3 | Set its source. | Ensure the Source is "Table", and Table is set to the name we gave above: "Cube Materials". Couldn't find your new table in this drop down list? If this design window was opened before you created your table, your configurator may not be aware of this new creation. Simply save your configurator (click the save button at the bottom of the screen), and re-load the page (as you would re-load any web page). This will ensure the design window knows about all tables... including that one you just built. You should then be able to select the new table. |
| 4 | Save your configurator. |
You placed your data in a table, and you've connected that data to your configurator through an Option Filter. Now let's use the data.
| Task | Walkthrough Example | |
|---|---|---|
| 1 | Open your configurator. | |
| 2 | Create a new field, or edit an existing field. |
In the design tree, find the Configurator UI node, and drill down to a page. Add a new field on that page by clicking the "+" symbol. For simplicity's sake, we'll name our field "fMaterial" (the 'f' reminds us that this is a field). Set the label to "Material", so our users see an attractive label, regardless of the name we gave it. |
| 3 | Ensure the data type of the field matches the data type of its column in your source matrix. | Since this field will be showing data from the "Material" column in our table, and that column type is text, our field must have the matching data type of text. |
| 4 | Ensure the control type of the field is one of the "select" types. | We could choose Select, Image Select, Color Select, or Swatch Select: all can be driven by an option filter. For this example, the best type for this application is a simple text "Select". (Try building your option filters with a "Select" control type first, to get them started. You can always change the control type later.) |
| 5 | In the "select options" group, connect your field to your option filter. | Scroll down to the "Select Options" group of field properties. Set the source field to "option filter", and select the option filter in the next field. |
| 6 | Choose what columns from the matrix will be used for the value of the field, and other properties. | Select fields have 4 basic properties:
Only the value is required. For this example, we'll simply set the value column to "Material". |
| 7 | Save your configurator, and test it. | In our example, we now see that same long list of materials from the table listed in our "Material" field. |
The real magic is about to start! When you have multiple fields using the same option filter, their logic will be connected. The connected fields higher up in the design tree will automatically filter the choices for other connected fields listed below them.
| Task | Walkthrough Example | |
|---|---|---|
| 1 | Open your configurator. | |
| 2 | Create a second field, connected to the same option filter. |
Since the field we want to create is almost identical to an existing field, we'll be
|
| 3 | Ensure the fields sharing the option filter are in the correct order. | We want to use the "Family" field to filter, or limit, the choices shown in the "Material" field. Therefore, the family field should appear above the "Material" field in the configurator design tree.
|
| 4 | Save and Run to test your work. | We confirm the following: both the "Family" and "Material" fields appear. depending on what we select in the first field, the options shown in the field below it change. |
| 5 | Create a third field, again connected to the same option filter, by repeating steps 2 and 3. |
|
| 6 | Save and Run to test your work. | You now see 3 fields: Family, Group, and Material. Each of those fields are connected to the same option filter, but they display different values from the option filter's source. Since they are connected to the same option filter, a selection made to one field filters the options presented in later fields. |
| 7 | Repeat as necessary. | In our example, we have a datatable with 3 columns we want to display. So, for now, we don't need to create any more columns. |
As you run your configurator, you see that we first filter by Family, then Group, then Material. This makes sense for our current use case. But what if you want to have your users pick by Group and Material, with the family shown just for their information? Or some other order? No problem. Just drag the fields up and down in the design tree to re-order them. That's it. No other adjustments are necessary.
You may have noticed that our common metallic items and our common synthetic items now appear in the same list. Since we are now filtering by group, and all these items shared the same "common" group, they appear at the same time. The family field is updated based on our choice, but since it appears below the other fields, it doesn't filter them any more: it is filtered by them.