User Interfaces for Configurator Models

The user interface (UI) of a configurator model is what the end user sees and interacts with to configure the product represented by the model.

• UIs let users select options of the model by presenting controls based on the model structure.

• UIs can be dynamically generated at run time, or explicitly generated and saved. Explicitly generated UIs can be modified to suit your requirements.

• A configurator model can have multiple UIs, applied to suit varying styles of end user interaction.

• UIs that you create for a model are part of the definition of that model version, like supplemental structure and configurator rules. UIs can't be shared with other models. The use of UI templates enables you to provide a consistent user experience among your models.

• Each UI uses one of a set of predefined navigation styles to enhance the end user experience.

• UIs can be integrated with the UI of a hosting application.

• UIs consist of:

  • UI metadata that represents the model structure in terms of pages, regions, and items, and inter-page navigation.

  • UI templates that contain the visual content for the UI.

  • UI template maps that map model node types to UI templates

  These elements are exposed in explicitly generated and saved UIs, allowing modification. They aren't exposed in dynamically generated UIs, including the default UI.

UI Templates

Configurator user interfaces consist of a set of templates, which are dynamically rendered at run time.

The following templates are the building blocks of user interfaces

• The shell template for a UI keeps together all the other regions or parts of the UI and provides the navigation and actions for the UI.

• The layout templates for a UI determine the visual layout (such as a form or stack) of the control templates or elements within a layout region. Each UI can have one or more layout templates per page.

• Control templates represent UI items and allow user interaction, such as selection or input.

• Message and utility templates provide UI elements for specialized parts of a page. You can't modify these templates.

UI Template Maps

UI template maps govern the overall behavior and appearance of UIs.

When you create a user interface, you select a UI template map, which determines how the UI is constructed. UI template maps maintain the mapping between types of model nodes (such as standard items, option classes, reference models, and supplemental-structure features) and the control templates that allow users to interact with the nodes. Examples of such mapping are as follows:

• If an option class is defined as having mutually exclusive options (meaning that only one option at a time can be selected), it's mapped to a radio button group control template.

• If an option class isn't mutually exclusive, it's mapped to a check box group control template.

• A required child model is mapped to an item selection control template.

UI template maps group control templates into UI pages that represent major components of a configurator model, such as option classes. UI template maps also determine the navigation style between pages.