User Interface components -- Layouts, Elements, and Buttons -- are used to set up the main user interface for your configurator. The user interface you build for your configurator is where your users will be reading and writing their settings. You need to provide choices for your users to click, but also a visual structure for those choices, so your users are not confused or distracted by too many questions at once, or the wrong questions at the wrong time. By combining the components listed below, you can build the best interface for the job.
A configurator UI must consist of at least one page, but how it's organized after that is up to you. Logically, your user interface is best thought of as a tree: your configurator is the trunk, which branches into one or more pages. Each page has various visual components to guide your user.
You can see that tree of UI components when you open the UI node of your configurator's design tree.
Adding a UI component
You add UI components to your configurator:
- Click where you want the new component to appear in the design tree: the node is highlighted.
- Click the "add" plus-sign icon on the highlighted node: a drop-down menu of appropriate components appears.
-
Select the component you want to add.
Don't see the component you want in that drop-down menu?
Some components can only exist within other components, so if you don't have the correct node in your design tree selected, you may not see components you want. For example, if you want to create a tab component, you must first create a tab bar component as its parent.
Copying a UI component
You can duplicate an existing UI component within a configurator, or from one configurator to another:
- Click the component you want to copy in the design tree: the node is highlighted.
- Click the "..." context menu icon on the highlighted node: a drop-down menu appears. Select "copy".
- JSON code of the UI component is displayed. Copy the text (CTRL-C on most keyboards). The JSON code panel will disappear.
- Find where you want to paste the new UI element. You must select an appropriate parent container. For example,
- if you copied a page from one configurator, then select the "pages" icon in that or another configurator.
- If you copied an expander from within one accordion, then select that same accordion or another accordion.
- With the parent container selected, click the "..." context menu icon on the highlighted parent node: a drop-down menu appears. Select "paste". If paste is not available, you may have not copied the JSON correctly, or you may be trying to paste an element into an incompatible parent container.
This copying technique is a useful way to re-use components. However, if you want duplicate components that appear in many configurators to be easy to manage in one place, or if you don't know how many times a component needs to be used in a configurator, use another technique called nesting configurators.
Moving and Deleting a UI component
- To move a UI component, just click it once in the node tree, then drag it up or down to the correct location.
- To delete a component, click it once in the node tree, then click the context "..." menu shown to the right, then choose "delete".
Layouts (user interface components)
Layouts (user interface components) visually organize design elements, buttons or even other layouts. By placing elements within a layout component, you guide your user through the page and make it easier to understand.
Elements
Elements are the visible design elements that either give your user information, or gather information from them.
Buttons
Buttons are elements which your user clicks to perform an activity, such as resetting a form or applying a group of settings across many fields.
Dynamic use of Layouts, Elements, and Buttons
Layouts, Elements, and Buttons can change during run-time to create a dynamic user interface.