# Multi-object Configurator

The Multi-object Configurator allows you to configure not only one object but several objects in relation to each other.

# Enable multi-object configuration

To enable MoC:

  • To enable multi-object configuration, you need to add and set the moc flag in the Rubens settings to true (see Rubens Admin documentation (opens new window)). When this flag is set, all configurators in the tenant are automatically multi-object configurators.

# Setup the catalog structure

To offer a set of products in the MoC they must be stored in a catalog and tagged accordingly. To display the products and divide them into categories, the tags must be structured correctly.

Each tag can be used as root tag for the MoC. A sub-tag must be created for each category and each product that corresponds to this category must be tagged with it. The tag structure could then look like this:

1 moc_catalog (root-tag) 
2  |
3  ├── Fences (sub-tag 1)
4  |
5  ├── Couch Tables (sub-tag 2)
6  |
7  ├── Outdoor Tables (sub-tag 3)
8  |
9  └── Sofas (sub-tag 4)

Also see the documentation on tags

By tagging the products in the catalog, you can add them to the scene by clicking the "Add Product" button.

# Integration

To embed or integrate the MoC, the following parameters must be included in the URL

  • configuratorId: The configurator ID of the tenant where you enabled the MoC
  • catalogRootTag: The tag of the catalog where you stored the products you want to show in the MoC, Alternatively you could also set the root-tag ID as catalogRootTag in your Rubens settings.
  • moc: Enable the MoC feature in the Rubens settings or via integration.

Also see integration documentation: https://docs.roomle.com/web/embedding/integration.html (opens new window)

# Embedding:

If you are using the embedding lib you have to call createPlanner instead of create or createConfigurator to load a MoC scene.

# Recipes

# Adding items to the scene

It’s possible to add additional products/items/configurations to the scene using the insertObject API:

await interface.ui.insertObject('usm:frame');

By default the object is placed somewhere where it does not overlap with other items in the scene. You can also supply a position and a rotation for the object in the scene:

await interface.ui.insertObject('usm:frame', {x: -3, y: 0, z: 3}, Math.PI);

Position (2nd parameter) is in meters and the rotation (3rd parameter) is in radians.

# Gets called when something is changed in the plan

It is possible to implement a behavior which gets called when there is something changed in the plan. It gets all objects of the plan as parameter.


ui.callbacks.onPlanUpdate = (objects) => doSomething;