My First Configurator

The solid API is a javascript-based API that incorporates solid operations. The operations affect the solid directly and won't be stored like in a history-based approach. Thus, configuring solids means we recreate the solid with new input parameters. This way of configuring we want to apply in this chapter. We will use our lego brick which is actually already prepared for configuring. See My first model. As you remember, we defined two variables, one for the row and one for the columns.

Let's start creating the configurator

1. Create a copy of the file "templateConfigurator.ts" which can be found in buerli-examples in models/solid folder
2. In the create method we firstly copy the whole code we implemented in the create method of My first model

This will first do nothing more than run through the code we already implemented. And as a result, you will, of course, see the same.

Lego brick from bottom view

The next step will be to create the parameters to set for the rows and columns. There is already a definition for parameters in the template. Add two number parameters to it, one for the number of rows and one for the number of columns.

{ index: 0, name: 'Rows', type: ParamType.Number, value: 2 },

{ index: 1, name: 'Colums', type: ParamType.Number, value: 5 },

Start the application again and see how the parameters have been added to your example. If everthings done right, it should look something like that:

Created parameters (sliders)

Updating on of these number parameters will automatically call the update method of the example. So all we need to do, is to call the initial create method with the updated parameters. Each time we change the value, the model will be recreated. The update method will look like this:

export const update: Update = async (apiType, productId, params) => {

const api = apiType as ApiNoHistory

const updatedParamIndex = params.lastUpdatedParam

const check = (param: Param) =>

typeof updatedParamIndex === 'undefined' || param.index === updatedParamIndex

if (check(paramsMap[0]) || check(paramsMap[1])) {

api.clearSolids()

return create(api, params)

}

}

Updating the lego brick