User interface controls

A configurator can be structured with several types of options that a customer can use. The following are available:

• Tab

• Fieldset

• Select (+ Option)

• String

• Upload

• Content

A model can be structured in several nested levels. The first level is always a tab.

Section	Description
Tabs	Tabs are the sections which the customer can choose from when configuring a configuration product.
Fieldset	A fieldset can has multiple fields underneath and can be set as an accordion by making it collapsable.
Selects	A select is an image driven select feature which allows users to make a certain selection.
Options	The type of option can vary from icons to texts and more.
String	A string is an input field for text input.
Upload	The upload allows for customers to add their own image upload to a certain select option.
Content	This feature doesn’t work by default and can be used in development to connect to a Wordpress Block which allows the configurator to be filled with rich edited content.
Number	A number digit input used for entering numbers via a range slider in the configurator.
Other fields	Description of other fields in a model.

UI Component library

TABS

Tabs are the sections which the customer can choose from when configuring a configuration product.

A tab icon can have a default, hover and active state and can be independently set up for desktop or mobile view.

FIELDSET

A field set can has multiple fields underneath. Options within a fieldset: style Fields that can be added underneath are: select, string, upload, content.

A fieldset can be made collapsable by setting the “Is Accordion” parameter.

When set, the contents of the fieldset can be shown and hidden. A preview icon of the chosen option is shown in the fieldset header.

SELECT

A select is an image driven select feature which allows users to make a certain selection. Options within a select (+ option): Base price, Special price, is Default, is Favourite, Tooltip Text, Asset Scarling, Presentation. Within a select there are several presentation options:

OPTIONS

Options are the actual choices a customer can make in the configurator. Various presentation types can be used for displaying the options. Below's overview gives an impression how the design options can look.

Label square

Swatch Small

Icon and label small

Swatch Large

True / False

False / Icon square

Grouped A grouped presentation shows in a boxed area

STRING

A string is an input field for text input. Options within string input: Base price, special price, additional price per Char, Placeholder Text, Fixed Text, Regex Validation, Regex Validation Message, Max Length, Force Capital Letters, Default

UPLOAD

The upload allows for customers to add their own image upload to a certain select option. Options within file upload: Base Price, Notification Text, Allowed Upload Types, Min Sized for Uploaded Images.

It is possible to upload vector files like SVG, EPS and AI.

For this, a conversion function is added that converts the image to a PNG format which can be appied in the 3D. To use this, the Conversion Types area of the upload node should be filled in. Example:

CONTENT

This feature doesn’t work by default and can be used in development to connect to a Wordpress Block which allows the configurator to be filled with rich edited content.

NUMBER

The number field is used to enter number digits. The range can be set and controlled via a slider in the configurator

Options within number input: Placeholder text, measurement unit, locked, min value, max value, default

OTHER FIELDS

The overview below briefly describes the other relevant possible fields to fill in a model.

Disabled Remove the node completely from the model / preset. It does not end up in the corresponding JSON output file of the configuration. Hidden Hide the option from display in the configurator, but keep the node in the corresponding JSON output file of the configuration.

Labelling The label of the option can be displayed with a text label or an icon.

Label The header text displayed above the option or tab. This field is also relevant for showing a human readable description in the Model Tree and this value also is shown on the configurations overviews from the cart, saved design and admin quote.

Label’s tooltip If an icon is displayed in the label, this text is shown as a tooltip

Description Larger text displayed in a pop-up box when clicking read more

Short description Text shown below the label and above the option to describe the option

Is Included in Model In case a preset is loaded it is possible to show an icon in the configurator indicating that the option is included in the preset price. So this can be used to indicate the benefits of using a preset.

Icons Icons have various use cases. Primary usage is for setting the tab navigation icon and uploading an image to used in the options like the swatches. Icons for the tabs can be set for Mobile or Desktop.

Camera Set the camera angle to one of the four default defined angles. (front, back, left, right) External Reference Used in the production data Standardized Export Code & Valueode Can optionally be used resulting configuration data for production

Dependencies

Dependencies are used to enable or disable optionses based on a certain user selection. For instance, if a certain fabric can’t be printed and the fabric is chosen by the user, the upload option can be disabled.

Tab Url Friendly Tab Code It is possible to set the # value for the specific tab used. This is for better user analysis when analytics software is used.

Fixed upload url Only relevant to an upload field. With this field, the upload option can be prefilled with a preloaded image.

Locked Only relevant to an upload field. With this checkbox, the upload feature can be locked so it can’t be used by customers.

Summary Label Checkbox

When the summary label checkbox is checked, the chosen option is shown next to the select. So this checkbox is only relevant for using in a “select” field. Example: The “Team Light Blue” is shown because the summary label checkbox is checked on the Selected Color select.

Is Default Select option by default

Is Favourite Display a favorite selection icon