CPQ provides a highly customizable, multi-device user interface for the main modules:

Definition:

Configurator

Configurator enables interactive guided selling processes with end-users that can be sales reps, partners or end-customers.

Configurator can be used as a standalone UI or integrated to a Catalog.

Catalog

Catalog allows the end-users to browse product collections, display item characteristics and finally add standard or configurable products to the quote. (CPQ Quote if available).

CONFIGURATOR

The application web pages are built from the interactions between three layers:

• The Repository: stores the complete configuration to deploy and the basic presentation elements
• The UI Definition layer: defines how the front-end is customized by the definition of the structure of pages as well as the definition of the style to apply and potentially the addition of custom UI objects
• The UI engines layer: assemblies the instantiation of the business logic run by the Configurator engine and the presentation of this logic controlled by the CPQ UI engine
  
  

CATALOG ARCHITECTURE

Catalog is the web front-end application for product collections. Like the Configurator, the application web pages are built from the interactions between three layers:

• The Repository: stores the complete catalog, collections and products and the basic presentation elements
• The UI Definition layer: defines how the front-end is customized by the definition of the structure of pages as well as the definition of the style to apply and potentially the addition of custom UI objects
• The UI engines layer: assemblies the instantiation of the business logic run by the Catalog engine and the presentation of this logic controlled by the CPQ UI engine

As configurable products can be embedded in the Catalog, the CPQ UI engine is common to both Configurator and Catalog modules.

THE LAYERS

HTML Page (Client Side)

The Configurator and Catalog UI provide a rich internet user interface (Web 2.0):

• A set of DHTML pages (HTML+ JavaScript) allows the client to run a catalog and configurable products in a standard web browser.
• Ajax requests are used to dynamically refresh the content of the pages

  UI Engine

The CPQ engine is made of 3 main components:

• CPQUI building the User Interface for both Catalog and Configurator depending on a designed theme
• ConfiguratorEngine managing the configuration process and returning this information to the Interface builder.
• CatalogEngine managing the navigation in the Catalog and the search process.

  UI Definition

The UI Definition provides to the UI engine the material it requires to build the User Interface.

The Layout XML File (XML UI Definition) contains the description of the elements and components of the Quote pages. It defines the way the dialog will be presented to the end-user in terms of:

• Pages structure
• Pages components design (Parameterization of the boxes etc.)

Based on this information and on the configuration model, the Quote UI engine dynamically generates the resulting web pages.

The Predefined UI Objects represent the library of UI objects and pages components delivered with CPQ. (These components are described in the current guide)

The Customize Style represents the set of Cascading Style Sheets that will be applied to each UI object to control its display and rendering.

The Repository gathers data related to the quote content made by the end-users (List of items added to the quotes, parameters of proposals, status of the quotes etc.).

INPUT PARAMETERS

The Settings File (Quote File) provides parameters needed to initialize the quotation process The setting file points to:

• A layout Id (corresponding to the Layout File)
• A model Id & Release (corresponding to the Model File (ModelName-ReleaseNb.xml & .bin))
  Note: The standard Settings File (createcart.xml) can be found in the CPQ home in the following folder: $CPQ_home_folder$/conf/run/settings/cart The standard Model

  File(s) (CPQModel_BasicSample-1.xml and .bin) can be found in the CPQ home in the following folder: $CPQ_home_folder$/conf/run/model The standard Layout File (cpqUI.xml) can be found on the CPQ server in the following folder: $CPQ_home_folder$/conf/run/layout/cart

  All these files are encoded in UTF-8. Ensure that this encoding is not altered when you edit them.

Launching Methods

3 methods are available to launch the Configurator.

Method 1 – from within the Designer

Run the Configurator from the Designer

1. [In the menu toolbar] Execute the ‘Run current’ function
2. [In the popup] Fill the three file parameters (files stored on your CPQ server (Layout/Configuration Server Files)
3. Click on ‘Ok’
   
   

   Method 2 – from within Quote

4. Create an eConfigurator service [Possible containers for this service are eHome, eMenu] to access a model previously created in the Designer
5. Fill all the following service parameters:

Method 3 – via a Web Service

In order to ease the integration of the Configurator component into others applications, a Web service connector is distributed as part of the CPQ package.

Reference: Details on the integration via a Web Service: Please check “APPENDIX A – CPQ UI”.

CATALOG

Input Parameters

3 input parameters are required to launch the Catalog: the Layout file (see definition above), the Catalog file and a path to the Result file.

Note:

The standard Settings File (catalog.xml) can be found on the CPQ server in the following folder: $cpq_home_folder$/conf/run/settings

The standard Layout File (catalogUIDesktop.xml) can be found on the CPQ server in the following folder: `$cpq_home_folder$/conf/run/layout

The XML layout file structure is described by a XSD schema located by default on your CPQ server: $cpq_home_folder$/conf/xsd/catalogUI.xsd

After having modified these files, please ensure that the encoding is set to UTF-8 when saving.

Launching Methods

3 methods are available to launch the Catalog.

Method 1 – from within the Designer

Run the Catalog / Collection process from the Designer

1. [In the menu toolbar] Execute the ‘Run current’ function
2. [In the popup] Fill the three file parameters (files stored on your CPQ server (Layout/Configuration Server Files)
3. Click on ‘Ok’
   
   

   Method 2 – from within Quote

4. Create an eConfigurator service [Possible containers for this service are eHome, eMenu] to access a model previously created in the Designer
5. Fill all the following service parameters:

Method 3 – via a Web Service

In order to ease the integration of the Catalog component into others applications, a Web service connector is distributed as part of the CPQ package.

Reference: Details on the integration via a Web Service: Please check “APPENDIX A – CPQ UI”.

MANUFACTURING ONLY

It is possible to launch the manufacturing engine without launching the complete configuration UI.

In that case, only the manufacturingPage of the layout file will be used to render the manufacturing results.

This way to launch the manufacturing process can be used from Designer or from Quote

Input Parameters

3 input parameters are required to launch the Manufacturing: the Layout file (see definition above), the Setting file and a path to the Result file.

The Settings File provides parameters needed to initialize the manufacturing process. It corresponds to a configurable process file which is complete and contains all data necessary to run de manufacturing (Targeted Configurable Product and Sales Method, Session Settings…Etc.)

The Result File corresponds to the output file used to store the result of the configuration and manufacturing process.

Note:

The Layout File to be used to launch the manufacturing process has to contain at least a Manufacturing Page.

After having modified these files, please ensure that the encoding is set to UTF-8 when saving.

Launching Methods

3 methods are available to launch the Manufacturing Process (from the corresponding project).

Method 1 – from within the Designer

Run the Manufacturing process from the Designer

1. [In the menu toolbar] Execute the ‘Run current’ function
2. [In the popup] Fill the three file parameters (files stored on your CPQ server (Layout/Configuration Server Files)
3. Click on ‘Ok’
   
   

   Method 2 – from within CPQ

4. The Configurator and the Catalog services include a parameter allowing to specify which configurator layout file has to be used to visualize the result of the manufacturing process. (when using the ViewManufacturing action of the Quote model)

Method 3 – via a Web Service

In order to visualize the manufacturing results from a XML file already containing the generated manufacturing data, the ConfiguratorUI WS has to be called in ReadOnly and ManufacturingOnly mode. (In such a case, only the manufacturing page will be displayed and accessible in the User

Interface.)

In order to build your own user interface, you have to create your own layout file and theme directory.

• Duplicate the standard theme directory named ‘cameleon2011’ and choose a new name for your own theme:
  • You can find the standard theme in the following folder:

    *$CPQ_JBOSS$*standalone\deployments\cameleon.ear\cart.war\Theme

• Duplicate the cpqUI.xml file in the following folder: $CPQ_home_folder$/conf/run/layout/cart
• Link the new theme to the layout file and to the model file
• Edit the new layout file and replace all the references to the former theme by the new theme name.
  • In particular and the resources: Theme/cameleon2011/img/btnHelp.png
• Open the Model xml file
  • Replace all the references to the former theme by the new theme name.
  • You should have only 1 reference to the former theme: <layoutDefthemeName="cameleon2011">
    Reference: For more details about the Quote UI, please refer to the chapter Customizing the user interface.