Templates, Pages, and Navigation Styles

User interfaces are composed of pages on which UI elements mapped to model structure are placed. The UI pages are associated with model nodes, and the navigation between pages is part of the mapping.

UI template maps determine the navigation style between the UI pages that represent major components of a configurator model. You see a template map when creating a UI. The available navigation styles are:

• Single Page Navigation

• Dynamic Tree Navigation

• Step by Step Navigation

Each template map is available in alternate variants:

• Template map with ordinary selection controls.

• Template map with enhanced selection controls, which show more detail about the state of the selected items. For example, an icon indicates whether an item was selected by the end user or by a rule.

You can't change the choice of template map after creating a user interface. If you need to use a different template map, you must create a new UI using that map.

Note:

Don't use the Single Page Navigation for Test UI with Enhanced Selection Controls template on UIs intended for end users. That template is designed for use only with the Test Model operation.

Single Page Navigation

The Single Page navigation style collects all the configurable options of a model onto a single page. If a model has reference models, the user can drill down into the UI for the reference model by clicking the Configure control on the reference to the reference model.

The UI-level actions that the end user can select on this page are:

• Finish: The configurator engine finishes the configuration, which means that the engine automatically completes the remaining selections that are required for a valid configuration of the model. After the configuration is finished, the configuration session ends, the configuration data is returned to the host application, and the user is returned to the previous location in the host application.

• Finish and Review: The configurator engine finishes the configuration, then navigates the user to the Review page, where the user's selections are displayed for review and possible further configuration.

• Save for Later: Saves the configuration in the exact state left by the user. The configurator engine doesn't finish the configuration, and the saved configuration may be invalid.

• Cancel: Warns the end user about losing any selections made, and returns to the host application without saving any configuration data.

If a model is being configured in a host application, and no corresponding configurator model with a UI exists yet, the Single Page UI is displayed for the end user to configure the model.

Dynamic Tree Navigation

The Dynamic Tree navigation style allows end users to navigate to a specific UI page by using the tree links that are displayed in the left pane. When the UI is created, each of these tree links is created as a page.

There's no tree link available to navigate to reference models, but the user can drill down into the UI for the reference model by clicking the Configure control on the reference to the reference model.

This navigation style provides the same UI-level actions as the Single Page style.

Step by Step Navigation

The Step by Step navigation style allows end users to navigate to a specific step by using a series of linked UI train stops that are displayed at the top of the page. When the UI is created, each of these tree links is created as a page.

There's no train stop available to navigate to a reference model, but the user can drill down into the UI for the reference model by clicking the Configure control on the reference to the reference model

This navigation style provides the same UI-level actions as the Single Page style. In addition to those actions, there are two additional buttons, Back and Next, which are available to enable navigation to the previous or the next step.

Running Summary

To assist a sales end user in maintaining a comprehensive picture of a complex configuration, you can add a running summary pane to each of the navigation style templates.

The running summary templates enable you to display cumulative sales information for all the items in the current configuration that can be selected and ordered.

Tip:

The items listed in the running summary change as you make selections in the model, so including a running summary is a good way to check the behavior of your model when testing it. You can always remove the running summary later, if you want.

The following running summary templates are available:

• Running Summary with Item Description, and Amount

• Running Summary with Item Description, Quantity and Amount

• Running Summary with Item Name, Quantity and Amount

• Running Summary with Quantity and Item Description

The summary also includes the total configured net price, excluding charges such as tax and shipping.

To add a running summary to one of your own user interfaces:

1. On the User Interfaces tab of the Edit Configurator Model page, select one of your UIs.

2. On the Overview subtab, select a template from the Running Summary Template list.

3. When the UI is tested, the running summary appears on the right side of the page. The items in the summary are updated as you make selections in your configuration.

Instance Management Table

The configuration of multiple instances of a model can be complex and confusing to the end user. You can use the Instance Management Table template in model user interfaces to provide easier configuration of multiple instances at run time.

The Instance Management Table template is only applicable to model nodes that can have multiple instances. Multiple instances are specified prior to model import, in the Product Information Management work area. Such nodes display the Instantiability setting as Multiple instances on the Details pane of the model's Structure tab. When you create a user interface, any model nodes that can have multiple instances are rendered by default in the new UI using the Instance Management Table template. You can also create UI page items using the template by adding nodes from the model tree in the Structure pane.

The following variants of the template are available. You can change the variant by editing the page item for the template in the WYSIWYG pane.

• Default (Instance Management Table from UI Template Map)

• Instance Management Table

• Instance Management Table with Facets

At run time, a node rendered with the Instance Management Table template is initially displayed as a caption and an Add button. When the end user clicks Add, an instance of the node is created, and the instance management table is updated, adding a row that enables the end user to manage the newly created instance. The columns of the instance management table are described in the following table.

Table Heading	Instance Behavior
Name	The default name of the instance of the node, which can be edited by the end user. Each instance is identified by adding a sequence number. Example: [1] [2] [3] .... Instance numbers remain associated with the instances for which they're created. Example: If the user creates instances [1] [2] [3] and deletes instance [2], then the next new instance added is numbered [4], although there are three instances at that moment.
Quantity	The number of instances of the item that will be managed together from that row of the table. Example: If the Quantity is 4, then 4 instances can be configured identically, deleted together, or duplicated together. The number of instances that can be entered in this field at that moment is displayed as tip text when you click in it. Note that the total quantity for all the instances in the table is governed by the Minimum Quantity and Maximum Quantity of the associated model node. Example: if the Maximum Quantity is 8, and there are four instances, and the user enters a quantity of 5 for one instance, then the other three instances are each assigned a quantity of 1.
Configure	The edit control to configure the instance. The configuration that you perform on this instance is applied identically to all of the number of instances in Quantity.
Delete	The edit control to delete the instance. Instance numbers of deleted instances aren't reused.
Duplicate	The edit control to duplicate the instance. The new duplicate instance keeps the instance number of its original, and prefixes the instance name with Copy of. Additional duplicates are prefixed with Copy 2 of and so on. Since the instance number of the original is retained in its duplicates, but each duplicate is counted as an instance, a new instance added with the Add button is assigned an instance number that reflects the current total number of instances. Example: If the user creates instance [1] and makes three duplicates of it, then the next new instance added is [5], since there are four instances at that moment of addition. The control is disabled for all instances when the Maximum Quantity of the associated model node has been reached.

Item Selection Table

In item-based models, some option classes might contain hundreds or even thousands of options. Loading that many options in a UI control can affect the responsiveness and usability of the model. Configurator handles this situation by providing the Item Selection Table UI template.

• When a default user interface is needed, Configurator uses the Item Selection Table with Header template instead of a check box control template for option classes with more than 25 options.

• When you generate a new user interface, Configurator uses the Item Selection Table by default for option classes with more than 25 options. A single-select or multi-select version of the template is used, as appropriate to the option class. You can modify your generated UI to use other templates.

• The Item Selection Table template is available in versions with or without header, standard or enhanced, and single-select or multi-select.

• A query-by-example control is included in the template to enable the end user to search for options.

Predefined Templates

This table lists the UI templates that are predefined for use in your user interfaces.

Template Name	Description
Boolean Feature Control	Check box that indicates logic state of the associated node.
Boolean Feature Control with Facets	Check box that indicates logic state of the associated node with facets.
Check Box Group	Check box group for a set of options.
Check Box Group with Facets	Check box group for a set of options with facets.
Check Box Group with Quantity	Check box group with quantity fields for a set of options.
Check Box Group with Quantity and Facets	Check box group with quantity fields for a set of options and two facets.
Choice List	A drop-down list for selecting a single item. Applicable to option classes and option features.
Choice List with Facets	A drop-down list for selecting a single item with facets. Applicable to option classes and option features.
Compact Stack Layout	Renders the UI items of an associated UI region vertically with no spacers between them.
Enhanced Boolean Feature Control	Check box that indicates logic state of the associated node; indicates detailed selection state.
Enhanced Check Box Group	Check box group for a set of options; indicates detailed selection state.
Enhanced Check Box Group with Quantity	Check box group with quantity fields for a set of options; indicates detailed selection state.
Enhanced Item Selection Control	Check box for selecting standard items; indicates detailed selection state.
Enhanced Item Selection Control in Form Layout	Check box wrapped in a form layout for selecting standard items; indicates detailed selection state.
Enhanced Item Selection Control with Quantity	Check box with a quantity field for selecting standard items; indicates detailed selection state.
Enhanced Item Selection Control with Quantity in Form Layout	Check box with a quantity field wrapped in a form layout for selecting standard items; indicates detailed selection state.
Enhanced Item Selection Table with Header, Multi-Select	Table with header for selecting or configuring multiple items, showing quantity, description, and detailed selection state.
Enhanced Item Selection Table with Header, Single-Select	Table with header for selecting or configuring a single item, showing quantity, description, pricing, and detailed selection state.
Enhanced Item Selection Table, Multi-Select	Table for selecting or configuring multiple items, showing quantity, description, pricing, and detailed selection state.
Enhanced Item Selection Table, Single-Select	Table for selecting or configuring a single item, showing quantity, description, pricing, and detailed selection state.
Enhanced Item Single-Instance Control	Check box and a button to configure a single instance for an instantiable component or child model; indicates detailed selection state.
Enhanced Item Single-Instance Control in Form Layout	Check box and a button wrapped in a form layout to configure a single instance for a component or child model; indicates detailed selection state.
Enhanced Radio Button Group	Radio button group for a set of options; indicates detailed selection state.
Enhanced Radio Button Group with Quantity	Radio button group with quantity fields for a set of options; indicates detailed selection state.
Enhanced Summary Region	The Enhanced Summary Region UI element displays all options that are selected during a configuration session in a table.
Flow Layout	Renders the UI items of an associated UI region in a start to end flow layout.
Form Layout	Renders the items of the associated UI region in a form layout
Form Layout for Page	Renders the items of the associated page in a form layout
Form Layout with Quantity	Renders the items of the associated UI Region in a form layout and contains a numeric field bound to the Quantity attribute of the associated model node.
Item Instance Management Table	Table for adding, deleting, and configuring instances, and entering quantities for a child model.
Item Instance Management Table with Facets	Table for adding, deleting, and configuring instances, and entering quantities for a child model and facets.
Item Selection Control	Check box for selecting standard items.
Item Selection Control in Form Layout	Check box wrapped in a form layout for selecting standard items.
Item Selection Control with Quantity	Check box with a quantity field for selecting standard items.
Item Selection Control with Quantity in Form Layout	Check box with a quantity field wrapped in a form layout for selecting standard items.
Item Selection Table with Header, Multi-Select	Table with header for selecting or configuring multiple items, showing quantity, description, and pricing
Item Selection Table with Header, Single-Select	Table with header for selecting or configuring a single item, showing quantity, description, and pricing.
Item Selection Table, Multi-Select	Table for selecting or configuring multiple items, showing quantity, description, and pricing.
Item Selection Table, Single-Select	Table for selecting or configuring a single item, showing quantity, description, and pricing.
Item Single-Instance Control	Check box and a button to configure a single instance for a component or child model.
Item Single-Instance Control in Form Layout	Check box and a button wrapped in a form layout to configure a single instance for a component or child model.
Radio Button Group	Radio button group for a set of options.
Radio Button Group with Facets	Radio button group for a set of options with facets.
Radio Button Group with Quantity	Radio button group with quantity fields for a set of options.
Radio Button Group with Quantity and Facets	Radio button group with quantity fields for a set of options and two facets.
Running Summary with Item Description and Amount	The Running Summary Region UI element displays all options that are selected during a configuration session in a table showing Item Description and Amount.
Running Summary with Item Description, Quantity and Amount	The Running Summary Region UI element displays all options that are selected during a configuration session in a table showing Item Description, Quantity and Amount.
Running Summary with Item Name, Quantity and Amount	The Running Summary Region UI element displays all options that are selected during a configuration session in a table showing Item Name, Quantity and Amount.
Running Summary with Quantity and Item Description	The Running Summary Region UI element displays all options that are selected during a configuration session in a table showing Quantity and Item Description.
Section Header	Renders the items of the associated UI region in a stack inside a panel header
Section Header with Quantity	Renders the items of the associated UI region in a stack inside a panel header and contains a numeric field bound to the Quantity attribute of the associated model node.
Selectable Image Group	Renders the set of options as a group of selectable images
Selectable Image Group with Header	Renders the set of options as a group of selectable images with header
Spacer	Renders a spacer between UI elements on a page.
Stack Layout	Renders the items of the associated UI region in a stack layout, one below the other.
Stack Layout for Page	Renders the items of the associated page in a stack layout, one below the other.
Choice List for Transactional Attributes	A drop-down list for selecting a transactional item attribute.
Layout Area for Transactional Attributes	Form layout area for a transactional attribute.