A Page Changed Rule, Tab Changed Rule, or Expander Changed Rule is run immediately after the user moves from one of these UI containers to another. This change of page or tab or expander could be caused either by intent (a user navigates by clicking the UI), or by a rule (such as an action rule setting another page as the current page). How are these events useful? For example, every time the user changes the page, you may want to adjust the contents of the viewer, track their movement through the configurator, or otherwise improve their experience.
Arguments
Arguments are variables you can find in the rule. You can find them by using the Get/Set variable snap blocks. In these rule types, the Get block exposes these arguments:
| Available in Rule for | Name | Type | Description |
|---|---|---|---|
| Page, Tab, Expander | clientLanguage | text | the two-character code representing the current user's preferred language. |
| Page, Tab, Expander | configurator | Configurator | the current running configurator. |
| Page, Tab, Expander | environment | string | "dev" if you are in the development environment, "test" if you are in the test environment, and "prod" if you are in the production environment. |
| Page, Tab, Expander | isMobile | boolean | true, if the viewport seems to have the size of a mobile device. Use this flag to show something differently on screen if required by a smaller device. |
| Page, Tab, Expander | parameters | map | a map of GET or POST parameters passed into the configurator when it was launched. |
| Page, Tab, Expander | user | User | the current user. |
| Page | selectedPage | Page | the newly selected page. |
| Tab | newTab | Tab | the newly selected tab. |
| Tab | oldTab | Tab | the previously-selected tab. |
| Tab | tabControl | Tab | Logically, the container for the new tab. Visually, the "bar" in which the newly-selected tab is displayed on-screen. |
| Expander | expander | Expander | the newly selected expander. |
Examples
1. Change the contents of the viewer
Every time the user changes the page, If the page now on display is the "pWarranty" page, change the viewer to media mode, and show a specific item from the media folder (such as a warranty-related image). Otherwise, ensure the viewer is in scene mode, and show 3D scene with id 59.
Note how "enums" (enumerators) are used here. Enums are a context-sensitive way to see exactly what configurator parameters are expected, and selecting one of them. No worries about mis-spelling a parameter, or not knowing that a parameter is available.
2. Change camera angle
When the page changes, stay in the same scene, but change the camera angle within that scene. This can help the user focus on a particular part of the item they are configuring.
A page changed rule:
And the scene action it refers to:
Nested configurators with nested scenes: the UI just works.
Nested configurators can be rendered within the parent configurator as pages, tabs, expanders, or some other visual elements. If your nested configurator has a matching nested scene, then clicking an element from that nested scene by default moves the user to the matching page/tab/expander in the configurator. In this way, your user by default has a one-to-one relationship between a configurator and its elements in the scene. You don't need to write any Snap logic for it. Learn more about nested configurators.