# 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.
SectionDescription
TabsTabs are the sections which the customer can choose from when configuring a configuration product
FieldsetA fieldset can has multiple fields underneath and can be set as an accordion by making it collapsable
SelectsA select is an image driven select feature which allows users to make a certain selection
OptionsThe type of option can vary from icons to texts and more
StringA string is an input field for text input
UploadThe upload allows for customers to add their own image upload to a certain select option
ContentThis feature doesn’t work by default and can be used in development to connect to a CMS block which allows the configurator to be filled with rich edited content
NumberA number digit input used for entering numbers via a range slider in the configurator
Other FieldsDescription of other fields in a model
\ UI Component library --------------------
TABS ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FDHN3ehSNL4ASlV56gIV3%2Fimage.png?alt=media\&token=687b71c8-1235-4b1b-b984-881f94ec8e7e) 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 ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FKZFmW0ZKNqUz2MzkY64G%2Fimage.png?alt=media\&token=6c4b4f76-b18e-4867-acd2-3f9d32136089) 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. ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FAdoCeYMXIjpiwNw0jCVh%2Fimage.png?alt=media\&token=facc9fda-eb59-43a7-a754-ec225f8c193a) 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. ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FChU4c4VC3vy7MiPx4yie%2Fimage.png?alt=media\&token=0bbdf24d-648f-4424-93f9-0e8451fc2a56)
SELECT ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F1conBxnRgpiS8IVKbxc4%2Fimage.png?alt=media\&token=feb6dd8e-6c27-40a1-bba4-5d48fd95271d) 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: ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FfevTX2aPk3hZk60ypQdK%2Fimage.png?alt=media\&token=0875358d-e45c-468e-a00a-3613b6424b24)
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\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2Fue8E1LvCMPZPlrqS6IgL%2Fimage.png?alt=media\&token=79798b6c-2f2b-47b7-8466-2e0f3b8c6361) Swatch Small\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F5KPhODk8p5iGcZUY8JVG%2Fimage.png?alt=media\&token=9af8f47b-df4c-4cc1-a6b1-5b7c5dbccc18) Icon and label small\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FyzViEM7AJeRpPgnlSjOB%2Fimage.png?alt=media\&token=cdea43a8-c425-40be-bf73-191b7767f90c) Swatch Large\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F56HqkKzo7tl69J7J5mZx%2Fimage.png?alt=media\&token=46ec4b64-b5de-4789-9e78-4093d8766f0d) True / False\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F3dzW4adIiqt5QjNnkcGL%2Fimage.png?alt=media\&token=a92ae652-ae48-4128-b163-13f1032d7c08) False / Icon square\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F9M7CydJgZv1cHLFAbGvd%2Fimage.png?alt=media\&token=8799b709-86b5-421a-8bdb-4e8445161d02) Grouped\ A grouped presentation shows in a boxed area\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FB4vMMB8wlVpi3EgdoPfd%2Fimage.png?alt=media\&token=8f7a7c4c-28e0-49c1-97ff-5a8b47a06fa5)
STRING ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F3LpeiJbRU0Yk1aYf50kD%2Fimage.png?alt=media\&token=37ff2f46-ae66-40af-b594-54aa04bf1efb) 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* ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FqXW1mBaeWKAHOOCrXZId%2Fimage.png?alt=media\&token=3b341aeb-a84e-4547-8c45-a635db39a73b)
UPLOAD ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F943GEuvnap5bdmKgmLM2%2Fimage.png?alt=media\&token=ea77ae8d-77ac-4e26-a1ea-e91aa2d48ccf) 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.* ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FNV7OMflgGU2IaniNqd8u%2Fimage.png?alt=media\&token=aa8952ce-0c8e-438c-b700-b9decb2bf06f) 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: ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2Fo7Xf5O6AT6eWbXiDtvBQ%2Fimage.png?alt=media\&token=262632de-0503-44ea-9b7d-48834e1c067e)
CONTENT ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F9DnEXmK8LUcfrqZxD16I%2Fimage.png?alt=media\&token=e4898e0b-27f1-413b-941c-24a7e4aa4500) This feature doesn’t work by default and can be used in development to connect to a CMS 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* ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FTX2ca2qFpwGSA99gOsPx%2Fimage.png?alt=media\&token=c5590a27-d9d1-42d5-ac60-3ef39450455f)
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\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2F3ILMbTUZTI37Lko6GkON%2Fimage.png?alt=media\&token=b18554db-575c-4522-9aab-270a5a21accc) **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. ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FW1JaZWmLIoSFsGFPAMtB%2Fimage.png?alt=media\&token=f94756ac-cc7b-469c-9253-739a178e7658) **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. ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FERLYtUfyOwTiKlLAV3AH%2Fimage.png?alt=media\&token=235b2907-8426-4a0f-9bd0-2ff80215fd4b) ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2Fcbh7h4jbuH0xHSV3tN5O%2Fimage.png?alt=media\&token=0e49d5c4-43d5-4269-a9f9-70a291fcdb74) **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. ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FyM6I3Wy1BOz8xK53ZUr7%2Fimage.png?alt=media\&token=f9a21c10-948e-47a1-bb70-cfa76ae9220a) **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.\ ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FuyvWVGkwowWq0uHz4j9J%2Fimage.png?alt=media\&token=3ed6e137-a745-4541-87b9-87d32c250f4c) **Is Default**\ Select option by default ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FKJZ8BcebhazpBk81j52D%2Fimage.png?alt=media\&token=2842ae58-1f05-4646-9efb-6d554166cee0) **Is Favourite**\ Display a favorite selection icon ![](https://82759880-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLA4eCNKZuHGEDynQ5kxK%2Fuploads%2FFOW4NYl8sVi2tS9BAdDa%2Fimage.png?alt=media\&token=54d2ebfb-1336-458f-88b0-038b7045053d)