Nested configurators are the best way to create complex configurators: they're powerful, but modular and manageable at the same time. This walkthrough will guide you step by step in creating a nested configurator. You'll see the entire process below, from sketching out your initial design to sharing data between configurators. This walkthrough is also the foundation for learning about other nesting features, like nesting pricing rules and nesting 3D scenes.
Prerequisites
- You should already be familiar with creating a configurator, defining basic UI Elements (like pages, groups, and fields), and creating simple value rules with Snap.
Step-by-step guide
We'll follow these steps in creating our nested configurator:
Design your Application
A few minutes of planning can save hours of work later. Here, we'll review a hypothetical business need and how we can create a configurator to answer that need.
For our example, we need to create a configurator that helps people configure their own wind turbine. It can be a small turbine providing power to a mountain shack, or a large one as part of a wind farm... or anything in between. The requirements are:
- A Wind Turbine consists of 1 pole, and 1 generator.
- That turbine can have two or more blades.
- Each blade can be made of wood, plastic, or metal.
- The length of each blade changes, depending on the material of the blade. This ensures the turbine is balanced and spins smoothly.
- The height of the turbine pole depends on the length of all the blades: if the blades are longer, then the pole must also be longer to ensure safe operation: we don't want to give any unwanted haircuts to people walking by.
- All blades must have an identifier, so they can be easily tracked for installation and maintenance. This identifier consists of the pole address and the blade identifier.
Given these requirements, a nested configurator setup is ideal. The key is the phrase "one or more" – if you have a business need where you don't know the quantity or types of a sub-component, creating a nested configurator for that sub-component is often a good idea. Here, we will create a parent "Wind Turbine" configurator, which can have one or more "Wind Turbine Blade" nested configurators.
Configurator 1: Parent "Wind Turbine"
- Stores information that is the same across all blades (for example, turbine address).
- Can aggregate information about its children, and store that for use (for example, a count of how many blades it has to calculate how tall it should be for safety).
- Can write data onto the children that they don't know on their own. For example, a blade on its own doesn't know if it's on one turbine or another. That context is provided by the parent turbine. The turbine configurator can write onto each blade configurator a "blade address", for example.
Configurator 2: Nested Child "Wind Turbine Blade"
- Stores information which is unique to each blade (for example, what type of blade it is (wood, plastic, or metal).
- Can receive data from the parent, like blade number, to calculate other unique information (like the blade address).
Create your Child (Nested) configurator
It's a good idea to start with the smallest component, and build up from there. Often you may wonder where to put a certain property of your overall configuration: is this a property of the parent or a property of the child? By creating your child first, you can get the details out of the way and then build up.
- Create a new configurator called "Wind Turbine Blade".
- Give it a field "Material", data type "Text", control "Select", and enter the three materials (Wood, Plastic, or Metal) as select options from our requirements.
Create your Parent configurator
Relate the two configurators
Pass data between your configurators
- Create a new configurator called "Wind Turbine".
- Rename the default page to "Blades". Rename the default group underneath it to "Blade Information"
- Create a field "Blade Count", data type "Number", control "Slider", default value 2, precision 0, step 1, constrain value, and set the minimum to 2 and maximum to whatever you like! (We'll use a max of 10.)
We have the basics to get started. To nest one configurator inside another, open the parent configurator.
- Open the "Wind Turbine" configurator, and click the "Referenced Configurators" section to make the "+" icon appear.
- Click it to add a new reference.
- For the "Configurator Type", enter the "Wind Turbine Blade" configurator you've just created. Since we want to add this child configurator through rules, not through the user's clicks, we will leave the "User can add..." field blank.
- Note that "nest scenes" and "nest price object" are both left checked. We won't use these features here, but it sets the groundwork for using these features in the future.
- We want to make it easy for our user to adjust the number of blades. Instead of the user adding and removing the nested blade configurators manually, they will simply slide the "Blade Count" slider, and our Value rule will ensure the number of nested children matches the count they specify.
In the parent "Wind Turbine" configurator, create a new Value Rule, call it "Maintain Nested Blades", with this code. (You'll use the concat block and the cast block to build myName.)
The value rule first adds any blades if they don't exist, stamping a name on each when it is created. Then it deletes any extra blades that may by lying around (for example, if we drag the slider from 10 down to 3, we need to delete the 7 unwanted blades).
Test your design! Launch the parent "Wind Turbine" configurator, and you should see two "Blade" configurators nested underneath the "Blade" page. Drag the Blade Count larger to see more nested configurators appear.
Help
Did you see an error? Remember to set the default value of "Blade Count" to 2 as described above.
We've seen how a parent can name the children when they are created. But other information can be passed between parent and child, too. With nested configurators, the parent does most of the passing of information. A Snap rule on the parent does the work of looping through all the child configurators – to either write data onto each one, or to read information from them to write back to the parent. Let's do both here.
Gather data from all the children, to write to the parent
Each turbine should know its own height. Since this information is based on the nested blades, loop through the children to determine the turbine height.
First, teach each turbine blade child to calculate its own length.
- In the "Wind Turbine Blade" configurator, add a new "Blade Length" number field, with a numberbox control. Set the "enabled" of that field to false, so it won't get accidentally edited. (We're measuring our blade height in meters... As a nice extra, you can optionally add a suffix to that field, to help your users understand the unit of measure.)
- In the "Wind Turbine Blade" configurator, add a new Value rule, called "Calculate Blade Length", with the following Snap code:
- Test your code. Launch your "Wind Turbine Blade" configurator (you can launch it directly, without the parent configurator), and see the blade length change as you select different uses. This is best practice: each child configurator should be able to be launched on its own without errors.
Now that each turbine blade child has a length, teach the wind turbine parent how to gather that information into the overall turbine height.
- In the "Wind Turbine" configurator, add a new "Turbine Height" number field, with a numberbox control. Set the "enabled" of that field to false, so it won't get accidentally edited.
- In the "Wind Turbine" configurator, add a new Value rule, called "Calculate Turbine Height", with the following Snap code:
- Test your code again. This time, launch your "Wind Turbine" configurator, and ensure the turbine height changes with each new blade added, or blade material adjusted:
Gather data from the parent, to write to the children
You can also write information from the parent to the child. Let's plan on how to install and maintain our turbine. While the turbine has one identifier, each blade has its own unique blade identifier. The blade on its own doesn't know any of this information (where it is in the wind farm, or what blade it is in the turbine), so the parent configurator must write this onto each child.
- On the "Wind Turbine Blade" Configurator, add a "Blade Address" field as shown below.
Note that we put some warning text into the default value. Since we want our child configurators to be able to run on their own, but the data in this field comes from the parent configurator, it's a good idea to fill such fields with default data, or a warning message. In this way, when the nested configurator is launched on its own, it's clear to everyone why the field is blank. Furthermore, if you see this warning in your final design, you know you have a problem and how to fix it.
- In the "Wind Turbine" Configurator, add a "Turbine Address" Multiline Textbox field. Set the default value to "1234 Main Street, Anytown, USA".
- Again in the "Wind Turbine" Configurator, create a new Value rule "Set nested Addresses" with the following code:
- Test your code again. This time, launch your "Wind Turbine" configurator, and ensure the address on each child blade is set by the parent configurator:
You're done! You now can create wind turbines of various configurations, each following the business rules.
You've nested configurators. You can use this work to learn more about nesting 3D scenes as well.
Next steps
Related articles
- Examples: Instantiating Nested Configurators— When your user instantiates a nested configurator at run time, you can choose how and where it will appear.
- How to create a nested configurator: Multi-Floor Building— Nested configurators are the best way to create complex configurators: they're powerful, but modular and manageable at the same time. This walkthrough will guide you step by step in creating a nested configurator.
- How to create a nested configurator: Wind Turbine— Nested configurators are the best way to create complex configurators: they're powerful, but modular and manageable at the same time. This walkthrough will guide you step by step in creating a nested configurator.
- How to create a nested scene: Multi-Floor Building— Nested scenes help you create complex visuals by combining simpler parts in a structured, easy-to-maintain way.