Configurator Layouts or UI Layouts?
This is an advanced topic describing configurator layouts: the overall structure for the entire user interface from the configurator to the scene and all other components around them, like where the price appears and how page tabs are positioned.
For information on how to add and rearrange individual user interface elements within the Configurator pane of the user interface, like fields and images, learn more about UI Layouts, a separate topic.
Understanding Configurator Layouts
A configurator is presented on-screen through a configurator layout. A configurator layout controls the overall fundamental appearance of the configurator: what components are shown, and where. Just like how a configurator theme controls the colors and fonts of a configurator, a configurator layout controls what configurator components are shown, and in what position.
Epicor CPQ has 3 pre-built layouts, which satisfy the needs of most implementations. However, you can always create your own configurator layout and then use it in as many configurators as you like.
Using Existing Layouts
When you create a configurator, by default a layout is set for you in the configurator properties. This layout is one of the standards we have developed for you.
To change your configurator so it uses a layout:
- Edit the configurator's properties.
- In the "Layout" section of the properties list, select the layout you want.
- When you change from one layout to another, the list of layout-specific settings changes. Update the settings to your needs.
- Save and run the configurator to see the change.
- Since the layout is separate from the configurator, it's easy to edit the properties again to change back to your original layout, or move to another one.
Creating New Layouts
While the default layouts are useful for most situations, you can create other layouts to re-style any configurator's basic structure into anything you need.
To create or edit layouts, choose Products > Layouts in the Admin portal. A list of all layouts will be shown.
- Create, clone, or delete a layout by using the actions at the bottom of the list.
- After saving your layout, open a configurator which uses the layout to see the layout in action.
When creating a layout, you can start with a blank empty layout, or you can use an existing layout as a starting point.
The layout designer will appear. This designer has a similar design tree as the one you use to create a Configurator or Quote.
-
Rules allow your layout to react to changes in the environment.
For example, if the user is on a mobile device, change the dimensions and positions of the page tabs and the navigator. -
A User Interface node allows you to define the overall visual structure of any configurator based on this layout.
For example, specify the configurator to appear on the left. - Settings give any designer using this layout a way to pass information into the layout about the configurator which is using it. For example, if a Layout includes a "header image" field intended to show a product thumbnail, then in any configurator that uses this Layout, a matching "header image" field will appear in the configurator's properties screen.
Building your Own Layout
One of the best ways to begin designing a new layout is to learn how the existing "Classic" layout works. Try creating a new layout, using the existing "Classic" layout as a starting point. In this new copy, you can see the layout elements, settings, and rules working together to create the user interface. Give the new copy a name, and modify it to suit your own business needs. You can learn more about the "Classic" layout properties to make your own custom layout properties.
When you have a layout ready, try it out! Open a configurator, and in the configurator properties, select that new layout. Then launch the configurator to see your configurator layout work.
Layout Components
Every configurator has data which can be shown in the following Layout Components. As a layout desginer, you choose to include this component in your layout, its position on-screen, and how it changes in different environments.
Component | Example of the component as it appears in the "Classic" layout | Purpose & Settings |
---|---|---|
Price Widget |
The Price Widget shows information from the Price Object, such as the current cost of the configuration, the bill of materials, lead time, etc. Settings
|
|
Viewer |
The Viewer shows either static images or a dynamic 3D scene alongside your configurator. Settings
A layout can have multiple viewers, but only one of those viewers can display a 3D scene. More than one 3D scene per layout is not supported. |
|
Action Bar |
The Action Bar appears in some older layouts. It shows all of the Actions defined in the configurator. Most configurator designers now simply use buttons in the toolbar, described next. Settings
|
|
Toolbar |
The Toolbar is very similar to the Action Bar. Typically, only one or the other is used. While only buttons can appear in the Action Bar – one for each action – the Toolbar
offers more ways to present buttons: It can have both buttons and drop-down buttons. Settings
Notes (The Toolbar is not part of the Classic Layout, but one possible way of using it in a layout is shown here.) |
|
Navigator |
The Navigator provides "next" and "back" arrows around the name of the current page. It offers a more controlled, linear way for users to progress through a configurator's pages, rather than jumping from one page to the next in the Page Tabs. Settings
|
|
Page Control |
The Page Control is the heart of the configurator. It will show the contents of the active page, selected through either the navigator or the page tabs. Settings
|
|
Page Tabs |
The Page Tabs shows a clickable list of all the visible pages in the configurator. It offers a more flexible way for users to progress through the configurator's pages by clicking the page
they want, instead of having to use the "next" and "back" arrows shown in the Navigator. Settings
|
Layout Settings
Since your layout is dynamic based on information from the configurator, your layout rules need some way to offer those choices to the configurator designer (during design time) and the configurator rules (during run time). Layout Settings are this bridge of communication between your layout and any configurator that is wearing it.
If you create a group or field under "Settings", those elements will appear in any configurator based on this Layout. There, in the configurator properties, the person designing the configurator can fill in these fields with settings specific to this configurator.
For example, these settings in a Layout... | Result in these choices being available in any configurator based on that layout. |
Any information in these settings do not automatically control your layout: you must use Layout Rules to gather information from these settings and change the layout based on that information.
Layout Rules
The layout components above guide the visual structure of your configurator. Layout rules make these components dynamic, changing their structure depending on various parameters. For example...
- If the web browser rendering the configurator changes (from a desktop browser to a mobile browser), the layout can rearrange components to best meet that smaller screen.
- If the user looking at the configurator changes (from an end customer to a reseller, for example), the layout can hide or show components, such as the price widget or the navigator.
You can manage this dynamic display through Layout Rules. These rules run as part of the Rule Cycle, so your configurator's layout can change immediately as your user rotates their tablet or edits a field.