Documentation

# Parameters

Now it's time to change the configuration. Since there are two main ways to change a configuration we start with the parameters. Parameters are used to change the apperance of a component.

But first of all we need to create some space were we want to display the parameters. As you remember from the mockups we want to show the parameters on the left side. To achieve this we alter the CSS. We won't go into detail here because this is only CSS related and has nothing to do with the SDK. You can see the sample code in the repo.

# Reacting on events

To get the current available parameters you only need to add a function to the onUpdateParameters hook. For details about the event system see our reference. To react on the callbacks of the Roomle Web SDK we only need to add the following line:

rubensConfiguratorApi.callbacks.onUpdateParameters = (parameters) => {
  params.value = parameters;
};

We won't go into detail about how the UI reacts on the onUpdateParameters callback because this is very framework specific. How this works in Vue you can see in our Code Sandbox.

Most of the parameters are just plain old JavaScript options. Materials are more complicated this is why we want to show how to handle materials which are grouped:

    rubensConfiguratorApi.callbacks.onUpdateParameters = async (parameters) => {
        await Promise.all(
            parameters.reduce((acc, param) => {
            if (param.groups) {
                acc.push(new Promise((resolve)=> param.groups.then((groups) => {
                param.materialGroups = groups;
                resolve();
                }));
            }
            return acc;
            }, [])
        );
        params.value = parameters;
    };

Again the logic of updating the DOM can be found in the Code Sandbox.

# Updating a parameter

To update a parameter we only need to do the following:

    updateParameter(param, value) {
        rubensConfiguratorApi.setParameter(param, value, true);
    }

We again use Vue to link this logic to our DOM elements.

# Some things to mention

In the example repo only the parameter type Options and Materials are implemented. Options is a regular parameter which is just a plain old JavaScript object. The data structure of Materials is more complex. Since behind a material we have textures etc it's groups are designed as promise. After this promise resolves the materials are ready to be displayed. You can read about parameter types in our reference.

As you see you only need to pass a parameter and a value to the SDK and then the currently selected component gets updated. The user can select and deselect a component by clicking on it or by clicking onto the background. If nothing is selected the parameters of the PlanComponent are changed.

# Code Sandbox

You can see the full example here: https://codesandbox.io/s/roomlewebsdkconfiguratorstep02-hs97m?file=/src/components/Scene.vue (opens new window)

← Addons →