Editor basics
  • 01 Dec 2022
  • 3 Minutes to read
  • Contributors
  • Dark

Editor basics

  • Dark

Article Summary

Components and groups

On the left side of your configurator, you will find a list of components and groups. Each component is part of a group. For a better overview of your configurator, split your components into useful groups. Always use meaningful and unique names for your components and their groups.

Components are basically like variables in programming - they contain values and logic. The values can be of different types and can also contain resources such as images or 3D files. There are also different types of components for all the different use cases. Components are the heart of a configurator since all data and logic are maintained there. 

The user interface for the configurator is also built within one specific component - the design component.

Signals and Slots

To connect components and UI controls we use signals and slots - also known as SigSlos. For example, you can display the data you get from your component in a control in the UI. It also works the other way around - data that the user puts into controls in the configurator will be saved in components if the corresponding SigSlo exists.

An example of a SigSlo: if you click on a button, a value of a component should be changed.
Signal: click on the button
Slot: change the value

If you create a SigSlo always think if there is a SigSlo in the other way back. If the value of the component can be changed at any other point, has it any effect on the button?

You get a list of all your SigSlos on the right side of your design component. This is also the only place where you can create a SigSlo. To add SigSlo's you can use the button at the right top of the Design Page or you click on a control and open the SigSlo window from there.

SigSlos can connect a component with a control, a control with a component, and also two controls with each other. You cannot connect two components with a SigSlo.


Within the editor, you can open the preset menu at the top of the page. There you can add predefined configurations which can be used as starting points for your configurator. These presets can be accessed through URL parameters. 

A possible use case could be that all different models of a product get their own preset. The different links are then integrated into the customer's website. Configurator users can now start their configuration with a predefined model if they want to.


On the top of the editor page, you can also find the "publish" button. With this button, you can publish your configurator draft. When clicking on this button, a pop-up window will show where you can add notes. In these notes, you should summarize the changes that you implemented to the configurator. They will be shown in the history and help to define the different versions of a configurator.

When you publish a draft, it will be added to the history automatically and will no longer appear in the draft table in the dashboard.

While editing a configurator in a draft you can check your changes in the preview link. It is marked with a thin orange header section and it cannot be used for integration on a website. Checkouts cannot be tested in a preview.

On the other hand the published link has the full range of functions and is used for the integration. It is not marked in any way and just contains the actual configurator design. Checkouts can be executed in this link. Another difference is the configuration ID, which is only generated for configurations in a public link. While opening a preview link no ID will be generated and the configurations will not be saved in the configurations table.

Was this article helpful?