OVERVIEW

The CPQ User Interface of the Configurator and Guided Selling process provides 5 kinds of pages:

• A HomePage that is optional
• One or several ConfigurationPage designed to support the entire configuration process. A configurationPage corresponds to one or many configuration steps.
• A SummaryPage that is optional
• A ManufacturingPage that is optional
• An ErrorPage to which the end-user can be redirected anytime an unexpected error has been raised.

HomePage (Optional) – <homePage>

The HomePage is optional and usually introduces an overview of the Configurable Product.

It basically gathers all necessary information to present the product (images, text, characteristics, etc.), to give information about the product (documents, files, etc.) and to sell the product (links to other products, start configuration, etc.)

As example, the following information may be displayed:

• Image, Name, Description, RMO text
• Business property tab
• Resource tab (tab including the RMO files)
• Related Items tabs

This page also includes specific actions that are usually:

• “Back-to-Catalog” (when integrated in a catalog)
• “Start Configuration”

ConfigurationPage – <configurationPage>

One or several Configuration pages aim at guiding the end-user by means of a dynamic dialog, making the whole configuration process easier.

If necessary, this ConfigurationPage can be instantiated multiple times, every instance will correspond to a high-level configuration step (meaning that it will correspond to a form or a configurable product directly attached to the root configurable product).

This page also includes user actions that are usually:

• “Back-to-configuration”,
• “Add-to-cart” of the configured product

BundlePage – <bundlePage>

The Bundle page aims at offering the user the capability to select products organized in a structured hierarchy.

The result is a consistent assembly of products that can be used in the configuration process output. This page also includes user actions that are usually:

• “Add-to-cart” of the configured product
• “Undo” to cancel last choices
• “Optimization” to open the optimization flyer

SummaryPage (Optional) – <summaryPage>

The summaryPage is optional and usually represents the result of the configuration process. As example, following information may be displayed:

• Generated names, descriptions, prices and business properties
• Generated sales breakdown including the pricing details
• Result of the partial matching
• Etc…

This page also includes user actions that are usually:

• “Back-to-configuration”,
• “Add-to-cart” of the configured product

Actions may also be associated with specific external actions such as: - “Print configuration” - “Check delivery time"

ManufacturingPage (Optional) – <manufacturingPage>

The manufacturingPage is optional and represents the result of the manufacturing process. As example, following information may be displayed:

• Bill of material
• Routings
• Etc.

ErrorPage – <errorPage>

The errorPage is used to display a custom error message when an unexpected error has been raised during the configuration process.

For the end-user, the navigation through the different pages depends on his actions as shown in the following diagram:

ATTRIBUTES DETAILS

A configuration step (identified by a seqOrder) corresponds to a given first level node of the configurable product breakdown.

E.g.

<configurationPage seqOrder="1;2"> … </configurationPage>

<configurationPage seqOrder="3"> … </configurationPage>

OVERVIEW

The CPQ User Interface of the Catalog provides 9 kinds of pages:

• A HomePage
• One or several CollectionPage designed to browse the Catalog and display the list of contained products.
• A SearchPage for quick and advanced search
• A Compare Page
• One or several ProductPage to display the product characteristics
• One or several ConfigurableProductPage to run a configuration process
• A Quote Page to have an overview of the current quote content
• A Need Analysis page to run the guided selling process and display the resulting products
• An ErrorPage to which the end-user can be redirected anytime an unexpected error has been raised.

HomePage – <homePage>

The HomePage is optional and is usually the entry point of the Catalog.

It basically allows the end-user to browse the Catalog by using menu bars, displays the main collections and highlights some product/collection/guidedSelling process thanks to teasers.

CollectionPage – <collectionPage>

One or several collection pages aim at displaying multimedia content and/or list of products.

If necessary, the CollectionPage can be instantiated multiple times depending on the userType of the collection currently displayed.

SearchPage – <searchPage>

The search page allows the end-user to look for products in the whole Catalog or in subcollections. He can search by entering partial name, description of the product but also use an advanced search based on product criteria.

ComparePage – <comparePage>

While browsing the Catalog, the end-user can add some products to the comparator. Then he can access the ComparePage to display a table allowing to compare the properties of these items.

ProductPage – <productPage>

The productPage basically displays the characteristics of products as well as their prices and linked products. Moreover, it displays the multimedia elements associated to the current products and allows the end-user to add it to the quote.

This page is accessed when the ACTIVATE_CURRENT action is triggered.

ConfigurableProductPage – <configurableProductPage>

The configurableProductPage aims at displaying the configurationProcess.

When a configuration process is contained in the Catalog, the CPQ UI redirects the user to this page when the CONFIGURE action is triggered.

This page is a standard Catalog page containing an ‘inclusion’ allowing to embed the configurationProcess User Interface in the Catalog.

CartPage – <cartPage>

The cartPage displayed a simplified version of the Quote spreadsheet.

Only 1 quote level can be displayed and the end-user can only delete quote lines or change the associated quantities.

NeedAnalysisPage – <needAnalysisPage>

The needAnalysis page allows to display a guided selling process when this process is attached to a catalog sub tree.

A dialog is proposed to the end-user, allowing him to retrieve a set of products contained in the sub tree and matching his needs.

ErrorPage – <errorPage>

The errorPage is used to display a custom error message when an unexpected error has been raised.

For the end-user, the navigation through the different pages depends on his actions as shown in the following diagram.

Basically, the end-user enters the Catalog via the HomePage. Then he can browse the collections using the vertical selector or the menu bar.

Once he has accessed a collection and displayed a list of products, he can directly add the products to the quote or go to the product page to display the product characteristics.

The ‘tool’ pages (ComparePage, CartPage, SearchPage) can be accessed from any page of the Catalog thanks to OPEN_PAGE actions.

The Guided selling process is either embedded in the collectionPage if its context is the currentCollection, or in a specific Catalog page if its context is the currentSubTree.

ATTRIBUTES DETAILS

Different userTypes can be specified to differentiate several collection or configurableProduct pages.

E.g.

<collectionPage userType="ut1;ut2"> … </collectionPage >

<collectionPage seqOrder="*"> … </collectionPage >

A collection can contain a set of products but also configurable products. In that case, CPQ UI will launch the configuration process directly in the Catalog.

When a configurable product is displayed for example in a collectionPage (in a product list) or in a productPage, it is possible to declare a CONFIGURE action in the layout XML file.

As soon as the end-user activates the CONFIGURE action, he is redirected to the configurableProductPage corresponding to the selected Configurable Process.

Design Phase

1. [Designer]

Add a configuration Process to a Catalog collection.

1. [In the Catalog Layout File]
   1. Allow the access to the configuration process

In a collectionPage or in a productPage, make sure that the CONFIGURE action has been parameterized.

<actionBox …>

<action cssName="actionBoxHover" actionName="CONFIGURE"

alignment="right" resourceName="action.configureNow"

translationName="action.configureNow" url=""/>

</actionBox>

1. Define the layout of the configurableProductPage

The configurable product page is a standard catalog page whose main part contains an ‘Inclusion’. An inclusion is a box that will display the Configuration Process user interface inside a catalog page.

<mainPart …>

<inclusion sourceName="ConfiguratorUILayout"

widthPercent="100" heightPercent="100" hzAlignment="left"

vtAlignment="up" autosize="on"/>

</mainPart>

1. Point to the Configurator layout to be used while running the configuration process.

<inclusions> <source name="ConfiguratorUILayout">configuratorUIDesktop.xml</source>

</inclusions>

1. [In the Configurator Layout File]

You may have to adapt the layout of the configuration pages as the configuration process will be run directly in the Catalog (e.g.: removal of the pages header, footer etc.)

1. [In the XML Catalog Setting File]

Add the Settings (Sales and pricing method, custom settings etc.) required to run the configuration process.

RunTime Phase

Now you can run the Catalog.

Browse the Catalog until finding a configurable process (either in a product list or via the productPage for example) and click on “Configure Now” to access the configurable product page and launch the configuration process.

Only 1 XML setting file is used to initialize the catalog and all the contained configurable processes. When the end-user clicks on the configure button, CPQ UI initiates a configuration session using the same input settings as for the catalog session and replacing/adding on the fly the following CPEs:

<cam:Param cpe="CPE.Settings.Session.Workspace"

value="currentCPWorkspace" />

<cam:Param cpe="CPE.Settings.Session.CPName" value="currentCPName"/>

If the configuration is launched from a Standard Item, the CPQ UI passes the identifier of the contextual standard item as a setting of the configuration session:

<cam:Param cpe="CPE.Settings.Session.RefSI"

value="workspace/SI/mySelectedSI"/>

Different layout files can be used depending on the configuration Process userType. Several configurable product pages can be defined.

E.g.

<configurableProductPage userType="ut1;ut2">…

</configurableProductPage>

<configurableProductPage seqOrder="*"> …

</configurableProductPage>

If some settings needs to be shared from the Configurator to the Catalog session, specific settings have to be used (Token ‘Catalog’):

CPE.Settings.Session.Catalog.myCustomSetting

Each time a SetSetting(s)() method on such kind of setting is called from the Configurator, then this setting is available in the Catalog session, and then, by definition, will be passed to the next configuration session.

For more details regarding the way the configuration process is integrated into the Catalog with the standard User Interface, please refer to Embedding a Configurator UI in a Catalog

The guided selling process UI is similar to the configurable process. It uses the same page and XSD schema.

Design Phase

1. [Designer]

Once you have designed the guided selling process (needAnalysis), you have to attach it to a collection and define the scope of the filterMethod.

• currentCollection: the guided selling process will return a list of products which is a subset of the ones contained in the current collection.
• currentSubTree: the guided selling process will return a list of products which is a subset of the ones contained in the current catalog branch (current collection and sub collections).
  1. [In the Catalog Layout File]
     1. Allow the access to the guided selling process via the needAnalysisBox

In the collectionPages and in the needAnalysisPage, make sure that the needAnalysisBox has been parameterized.

<needAnalysisBox mode="on" cssName="needAnalysisBox"

widthPercent="100" heightPercent="100" hzAlignment="left"

vtAlignment="up" titleTranslationName="title" autosize="on"

framedBox="off" >

<inclusion sourceName="needAnalysis" widthPercent="100"

heightPercent="100" hzAlignment="left" vtAlignment="up"

autosize="off"/>

<actionBox mode="on" cssName="actionBoxTransparenct"

hzAlignment="center" vtAlignment="down" widthPercent="100"

heightPercent="8" autosize="off">

<action actionName="RESET" alignment="center"

resourceName="" translationName="action.clearAll" url=""/>

<action

actionName="SEND_CUSTOM_EVENT(eventName=applyBreakdown)"

alignment="center" resourceName="btnFind"

translationName="action.sendCustomEvent.find" url=""/>

</actionBox>

</needAnalysisBox>

1. Define the layout of the guided selling user interface.

The guided selling dialog is similar to a configuration process and it is embedded into the needAnalysisBox

<inclusion sourceName="needAnalysis" widthPercent="100" heightPercent="100" hzAlignment="left" vtAlignment="up" autosize="off"/>

1. Point to the layout file to be used.

<inclusion sourceName="needAnalysis" widthPercent="100"

heightPercent="100" hzAlignment="left" vtAlignment="up"

autosize="off"/>

1. [In the Configurator Layout File]

You may have to adapt the layout of the configuration pages.

1. [In the XML Catalog Setting File]

Add the Settings (Sales and pricing method, custom settings etc.) required to run the guided selling process.

RunTime Phase

Now you can run the Catalog.

Browse the catalog to display a collectionPage linked to a needAnalysis.

Depending on the context, the needAnalysis will be displayed in the needAnalysisBox directly in the collectionPage (scope = currentCollection) or in a dedicated needAnalysisPage (scope

= currentSubTree)

The products returned by the needAnalysis are displayed in a productResultBox.

(1 configurationPage having 1 mainPart displaying the guided selling dialog and using simple value selectors)

OVERVIEW

A page (Home, Configuration, Summary or Error for the Configurator or Collection, Search, Quote, Product etc. for the Catalog) is made of 3 main parts:

• An optional header in which all elements are optional
• A main area divided into 3 sizable columns (Left, Main, Right) underneath optional Horizontal Upper Parts and above optional Horizontal Lower Parts
• An optional footer made of several texts or links aligned left, right or center in the middle of the page.
  
  

Into each part, several user interface components can be placed.

You will find hereafter a brief description of the predefined UI components. Please refer to: “Components parameterization”.

ATTRIBUTES DETAILS

Each part can be positioned and sized by setting its attributes.

You can find in the following table the list of attributes corresponding to each one of these parts:

• <header>
• < hzUpperPart > (repeatable section)
• < leftPart >
• < mainPart >
• < rightPart >
• < hzLowerPart > (repeatable section)
• < footer>

For more details on the layout dimensions, alignment and autosizing, please refer to: APPENDIX C – UI bricks positioning

VISUAL IDENTITY

The page main part, header and footer background can be customized in their respective CSS files (e.g. ‘homePage.css’, ‘configurationPage.css’)

You can find in the following table the list of UI components that can be included into the different parts of the pages.

For more details on the properties you can use to customize the design and behavior of these components, please refer to: “Focusing on page components”.