How You Visualize Configurations

You can define user interface elements that enable end users to visualize how an object changes visibly in reaction to actions they take during a configuration session.

To provide visualization of objects in a configurator model:

Design the visualization model
Add an IFrame element and enable it to receive model node changes
Communicate model node changes to the external visualization tool

Design the Visualization Model

Visualization requires that you provide a model in some external 2D or 3D visualization tool. This visualization model should correspond to all or part of the configurator model for the product that your end users are configuring.

Since many parts of a configurator model can change while users are configuring a product, it's important to determine the scope of the model node changes needed to support the visualization. If a visualization only supports a component of a model, then the scope of the model node changes should be reduced to that component only and not the entire model.

Add an IFrame Element and Enable It To Receive Model Node Changes

Visualization takes place within an inline frame of a user interface. You create the inline frame with an IFrame basic UI element. By default, an inline frame displays an accessible internal or external web site. To visualize configured objects, you enable the IFrame element to receive model node changes.

Consult the related topic about modifying user interfaces for more details on adding an IFrame basic UI element. For adding visualization, there are a few special things to do:

Select the location to add the IFrame element. It will be added below the currently selected page element.
From the list in the UI Elements tab in the Resources pane, select the IFrame element and click Add to Page.
In the Add IFrame dialog box, select the associated model node for the IFrame. Select carefully, because the scope of the node controls which model node changes are passed to the IFrame.
Select Receives model node changes.
Select the scope from which changes to the model should be communicated to the IFrame: Associated Model Node and Subtree or Associated Model Node.
In the URL field of the Contents group, enter the URL and parameters for the external visualization site that you're integrating with. For example:
```
https://myserver.com/viewer.html?scs=model_data/mountainbike_blue.scs
```
Remember that If the URL is outside the current domain, then you must use Cross-Origin Resource Sharing (CORS).
Enter other desired properties in the Contents group.

Tip: If a user interface has multiple UI pages, you can add an IFrame to each page, so that the end user can keep the visualized object in view throughout the configuration session. Depending on your use case, you could determine whether to display different components of your model on different UI pages, or the entire model on every page.

Model Node Changes That Are Passed to the IFrame

When end users select items or enter values for items in the IFrame's associated model node or subtree, Configurator passes the changes in the values of certain attributes to the IFrame, as JSON payloads of standard name-value pairs. When these model node change payloads are received by the IFrame, the values are passed to the external visualization tool identified by the IFrame's URL. Be aware that no information is passed back from the IFrame to the configurator model.

These static attributes are passed to the IFrame for every associated model node or subtree node:

NodeType
DisplayNamePath
HasTransactionalAttributesFlag (only for node types imported from the Product Information Management work area)

It's useful to know which attributes are passed to the IFrame, and from there to the external visualization tool, because these attributes can be used in the JavaScript code that matches configurator model nodes with visualization model nodes, as shown in the code fragment provided here.

The NodeType determines which dynamic attributes are passed to the IFrame:

NodeType	SelectionState	Quantity	InstanceCount	Value
OPTION_CLASS_ITEM	Yes	Yes	No	No
STANDARD_ITEM	Yes	Yes	No	No
MODEL_ITEM	Yes	Yes	No	No
ROOT_MODEL_ITEM	Yes	Yes	No	No
COMPONENT_PORT	No	No	Yes	No

Communicate Model Node Changes to the External Visualization Tool

Configurator communicates model node changes in standard JSON payloads of name-value pairs to the IFrame, internally using the JavaScript method window.postMessage(). These payload messages must be interpreted by the visualization tool to properly display model node changes in the visualization IFrame.

For example, assume that a configurator model of a bicycle includes an option class and standard items with these display names:

Mechanical Options.Brakes
    Basic Alloy Bicycle Brake Set
    Dual Compound Side Pull Bicycle Brake Set
    Delux Cantilever Brake System

In the HTML file used by the visualization tool (which you specified in the URL field of the IFrame) you might write the following JavaScript statements to match the display names of the configurator model nodes with the corresponding nodes of a visualization model that you have built. The sample code below sets the color of a node of the visualization model when the matching configurator model node is selected by the end user in a configuration session.

...
if (displayNamePath.startsWith("Mechanical Options.Brakes")) {
     if (selectionState === "SELECTED") {
         if (displayNamePath.includes("Basic Alloy Bicycle Brake Set")) {
             var color = new Communicator.Color('255','255', '255');
             model.setNodesFaceColor([18, 19, 20, 21], color);
         } else if (displayNamePath.includes("Dual Compound Side Pull Bicycle Brake Set")) {
             var color = new Communicator.Color('100','100', '0');
             model.setNodesFaceColor([18, 19, 20, 21], color);
         } else if (displayNamePath.includes("Delux Cantilever Brake System")) {
             var color = new Communicator.Color('200','100', '100');
             model.setNodesFaceColor([18, 19, 20, 21], color);
         }                                     
     } else if (displayNamePath === "Mechanical Options.Brakes" && selectionState === "SELECTABLE") {
         model.unsetNodesFaceColor([18, 19, 20, 21]);
     }
 }
...