The layout of the Quote module is defined by the layout XML file. It is defined for a given theme and it will structure the rendering of the pages. The Quote UI engine allows multiple themes in order to address multiple channels (end-customers, partners, internal sales people, etc.) for a given model.

For a given theme (<thema> section), you will be able to describe:

• The structure of each page (each page is optional except the cartPage):
  • Quote spreadsheet page: <page name="CartPage" >
  • Print Proposal page: <page name="ReportPage" >
  • Approval page: <page name="ApprovalPage" >
  • Header page: <page name="HeaderPage" >
  • External page: <page name="ExternalPage">
• The localized graphical resources (<resources> section),
• The Cascading Style Sheets (<layout> section) that make up the design,
• The translations (<translations> section) associated to the components of your pages
• The settings driving the user interface behavior during the configuration: <settings> section

The Quote UI provides 5 kinds of pages:

• HeaderPage (optional), allows to input/display in the quote header information
• CartPage displays the quote spreadsheet content (folders, lines, sublines, total cells)
• ApprovalPage (optional), allows to manage the quote lifecycle
• ProposalPage (optional), allows to input/display the report settings and generates on the fly documents in multiple formats
• ExternalPage(s) (optional), allows to manage additional quotation steps associated with external jsp pages

For the end-user, the navigation through the different pages is driven by a processBar that allows to sequence the pages <processBar cssName="processBar">

PARTS POSITIONING

A page 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.

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

The presentation of the user interface can be dependent of the users’ country and language (meaning that the text and graphical resources should in some circumstances be “translatable”). Therefore, the theme enables the specialization of translations, graphical resources and style sheets for certain languages.

REVIEWING TERMINOLOGY AND TRANSLATIONS

Labels and messages displayed in the user interface can be specified depending on the languages (e.g. <localizedTranslations lang="EN,IT,ES"> for English, Italian and Spanish).

<translation name="ID_OfTranslatedElmt">

Translation

</translation>

USING GRAPHICAL RESOURCES

Once the messages and translations have been reviewed and localized, the same can be done with resources. ‘Static’ resources (status icons, title images etc.) are directly referenced in the layout file in order to be easily translated from the XML.

Definition: An Icon associated to a component contained in a page is identified by its name (xxxResourceName="ID_OfTheIcon"). This name links the element to the localized path of the

USING STYLE SHEETS

All other resources related to the theme of the pages (background, colors, fonts, margins, etc.) belong to the CSS files.

Each component of the user interface is associated to a style sheet which allows customizing its display and personalizing the visual identity of the pages.

Components and CSS association

When the UI engine generates the pages from the layout XML file, each UI component corresponds to a HTML structure. A UI component is associated (through the attribute ‘cssName’) to a CSS controlling its HTML rendering.

The CSS usage provides a powerful and flexible mean to completely customize the final generated pages. It is possible to apply a separate stylesheet to each individual box or to re-use the same CSS to keep some graphical consistency.

Definition: The attribute cssName="ID_OfTheCSS" allows::

to associate to the component a CSS Class in order to control its display.

• to identify in which CSS file this class is described.
  • In the <layout> section, you indicate which CSS file contains the description of the ID_OfTheCSS:

    <css name="ID_OfTheCSS">

    NameOftheCSSfile.css

    </css>

    Warning: CSS resources have to be located in the following directory:

    $CPQ_home_folder$/...

    /cart.ear/cart.war/Theme/My_THEME_Name/

The other CSS system files of the standard theme like cartSpreadsheet.css for example, are used to generate the UI rendering and linked by default to the HTML page.

• CSS concatenation process

When application starts, the UI engine builds (if not already existing) merged CSS files (1 per page).

Then the rendered HTML page uses the merged CSS file.

From 9SP1, when using Layout V2.0, only the merged CSS file is attached to the rendered HTML Page.

How to apply a visual identity to the page components?

As described above, each UI element display is driven by a main CSS class that identifies its main <div>. Then ‘secondary’ CSS classes allowing to customize the sub-parts of the element are generated by the UI engine. Their names cannot be changed.

.myMainClass .mySecondaryClass .myOtherSecondaryClass {

/* description of my other secondary class */

}

When adding a component into a part of a page, you can either associate an existing CSS class or to create a new one in order to change the appearance of this specific object.

How-To:

1. [Associate the CSS main class to the component]

   <combinedBox cssName="ID_OfTheCSSMainClass" ….>

2. [Declare a new CSS file]

   In the <layout> section, declare a CSS file name that will contain the code of your main class (and secondary classes)

   Create as many CSS files as necessary in particular if the CSS content depends on the language. The ID of the CSS has to be unique for a given localizedLayout.

   <css name="ID_OfTheCSSMainClass ">

   ExampleOfName.css

3. [Create the CSS file]

   In the CSS folder create the ExampleOfName.css file.

4. [Modify the CSS file]

UI ACTIONS

The user interface can trigger and send predefined or custom actions using the <action> element.

APPLICABLE ON	ACTION NAME	DESCRIPTION
proposalBox reportBox	PRINT(name=PrintActionName) PRINT(name=PrintActionName, name=PrintActionName2) PRINT(name=Print,eMail=on, mailFrom=CartInfoTab.UserMail, mailTo=CartInfoTab.CustomerMail)	Launches the specified PrintProposal action if the user has access to this action It is possible to list a set of reports (i.e. several PrintAction names). In that case a combo box is displayed @runtime allowing the user to select the report before the document is generated The eMail (on/off) attribute allows to (de)activate the capability to send the document by mail The mailFrom attribute defines the quote cell storing the default mail value to be used as sender address when sending the document The mailTo attribute defines the quote cell storing the default mail value to be used as recipient address when sending the document.
Any page	CUSTOM(name=actionName)	Allows to launch the onDemandAction identified by its name Reference: Refer to APPENDIX B – Using Predefined Actions
Any page	CLOSE	Closes the current Quote session
Any page	REDIRECT	Calls the first service of the list. Associated with the URL of a Quote step, it can redirect to this specific step page. The action can be called from any part of the Quote layout in an actionBox (left part, footer…)
Any page	MAIL MAIL(mailFrom=CartInfoTab.UserMail) MAIL(mailFrom=CartInfoTab.UserMail, mailTo=CartInfoTab.CustomerMail)	The mail action opens a popup to send a generated proposal by email. The mailFrom and mailTo attributes allows filling automatically the sender / recipient of the mail. The generated document, if any, is attached automatically to the email.

An action can be called from inside an actionBox.

Definition: The action box is a reserved area that can be inserted in the UI boxes.

ACTIONBOX DEFINITION

NAVIGATION POLICY

The <settings> section contains parameters specifying navigation policy. Depending on the type of status of the quote, you can display all the steps or only a subset of them. The <processBar> is the UI component that displays each step listed in the navigation policy. Each Step corresponds to a Page name whose layout is described in the <organization> section of the layout file.

Example: XML Sample.

In the following case, when the quote status type is ‘Quote’, the Header, Cart, Approval, Report as well as an additional External pages are displayed

<statusType name="Quote">

<processSteps name="QuoteProcess" >

<step type="HeaderStep" pageName="HeaderPage"

• HeaderStep:
  • This page is displayed only if an EditHeader action is available in the quote model and if this action is visible to the current user.
  • Please note that if the HeaderStep (and HeaderStepBox) is not declared in the Layout file, then the EditHeader action is displayed as a button in the CartPage on top of the spreadsheet.
• Report:
  • The Report page contains an action indicating the available report template for the current user. Several report templates can be listed.
    • PRINT(name=PrintActionName,name=PrintActionName2)
  • Please note that if none of the listed action is Visible for the current user, the whole Report step is hidden in the user interface.
• ApprovalStep:
  • This page is displayed only if a ChangeStatus action is available in the quote model and if this action is visible to the current user.

LEFT PART AND RIGHT PART DISPLAY

The <settings> section contains a parameter specifying the behavior of the quote left and right parts at opening. Depending on the initialState attribute of the <leftPartBehavior> and '' settings, the left / right part will be expanded or collapsed when opening the quote. If not set, the left / right

part will be displayed (expanded) by default.

<rightPartBehavior initialState="collapsed"/>

[...]

</settings>

The following chapter gives the exhaustive list of the components you can insert into the pages. The components available for a given page depends on the type of the page listed in the navigation policy.

We give an overview of each UI object, the details of its parameters and the key CSS classes that allows to control its display.

Warning:

• Main classes (associated to the components via the XML layout file) appear in orange in CSS schemas.
• Secondary class names cannot be re-named (They are statically generated in the HTML structure of the component).

Since CPQ version 8.0, most of the UI components share the same HTML rendering regarding the box main structure described in the table below:

Tip: Generic Quote UI box structure

• The boxTitle is only generated when the translationName attribute of the component is filled.
• The boxHeader, boxFooter, left and right parts are not generated if the framedBox attribute of the component is set to “off”.

Since CPQ version 9SP1, a version 2.0 of Quote UI has been provided. This version includes a set of UI components mostly designed for the tablet usage. These components are packaged within a default theme named “cameleonTouch”

The table below lists the UI components available into each version:

FOCUSING ON UI COMPONENTS 1.0

headerBox

This box displays the name of the quote, as well as its description and the owner of the entity.

headerStepBox

This box is used to display/fill the main information of the quote (Header part of the Quote model) such as:

• Description,
• Parameters like currency, application date
• Owner information
• Customer information (name, adresses, mails, etc.)
• Other business information
  
  
  Warning: This box can be inserted in a page of type: HeaderStep.
  Example: XML Sample:

  <combinedBox>

  <headerStepBox cssName="headerStepBox"></headerStepBox>

  </combinedBox>

spreadSheetBox

This box displays the content of the quote:

• spreadsheet made-up with columns and multi-level hierarchy of lines
• available actions (left-hand menu, grid and line actions)
• total cell computations
  
  
  Warning: This box can be inserted in a page of type: Cart.

The table below details the attribute parameters:

The screenshot below details an example of the UI generated at runtime:

proposalBox

This box is used to launch the document generation once the input print parameters have been filled

The content of the page (value selectors, input fields) is built dynamically depending on the Jasper report template used for the proposal generation.

XML Definition

The table below details the attribute parameters:

approvalBox

This box allows to review some business notice before changing the quote status and then to give some comments while validating.

The content available status depends on the workflow controlled by the quote model.

Reference: For more details regarding the approval process, please refer to chapter on status definition.

Example: XML Definition

<combinedBox>

<approvalBox cssName="approvalBox"></approvalBox>

</combinedBox>

FOCUSING ON UI COMPONENTS 2.0

headerStepBox

This box is used to display/fill the main information of the quote (header part of the quote model) such as:

• Description,
• Parameters like currency, application date
• Owner information
• Customer information (name, addresses, mails, etc.)
• Other business information
  
  
  Warning: This box can be inserted in a page of type: HeaderStep.
  Example: XML Sample:

  <combinedBox>

  <headerStepBox cssName="headerStepBox"></headerStepBox>:

  </combinedBox>

contentBox

This box displays the content of the quote made-up with columns and multi-level hierarchy of lines.

The header of the spreadsheet is made of:

• a folder browser which appears only when folders are created in the quote
  
  
• an action ribbon: the list of OnDemand Menu and OnGrid actions (without or with an associated sticker if the action requires some parameters
  
  
• the action editHeader (which has a specific UI behavior and rendering)
  
  
  Warning: Please note that if the headerPage has been declared in the layout, the action editHeader is not generated.
• navigation Path
  
  
• Quote information related to the current level (totalCells and/or column values – when inside a folder) – the list of cells/column data to be displayed in this area is described in the layout xml file.
  
  
• When clicking on a product line, it becomes the insertion point in the contentBox and is highlighted. Any item added in the Quote will be inserted below this line.
  
  

In the case where a folder line is selected, any selected item will be inserted below and outside of the folder. To include items inside the folder, the insert action has to be selected on the folder line:

The table below details the attribute parameters:

showMultiLevel=”off”

showMultiLevel=”on”:

When displaying several levels, the root subline of each level could be expanded/collapsed:

folderDisplayMode=”monoLevel”

folderDisplayMode=”multiLevel”:

reportBox

This box is used to support the document generation process. The box is made-up with 3 pages:

• the settings page – used to fill-in the report parameters
• the preview page – used to preview the generated document
• the generated documents page – used to access, view, rename and delete all documents generated during the session

In case of the several reports can be generated, they can be chosen among a list located in the box title.

summaryBox

This box allows the display of leading quote information on the left part of the pages.

The component is made-up with links targeting either header information or total cells declared in the quotation model. For more ease, links can be grouped in several sections.

The table below details the attribute parameters:

validationBox

This box allows managing the quote lifecycle. Prior to perform the quote status change among the ones that are suggested, business notices may be displayed. From this box, the end-user can also review the comments history and to enter a new comment while validating the status change.

The content available status depends on the workflow controlled by the quote model.

How-To:

Reference: For more details about the setup of the price format from the Quote, please refer to the CPQ Administration guide.

How-To: Insertion of items already in the quote

The “Allow Duplicate XXX Lines” parameters described in the table above rule the insertion of

duplicates in the quote, either locally or globally. Their behavior is given in the table below. This applies only to CT7 and CP7 types of lines.

FOCUSING ON EXTERNALBOX UI COMPONENT

This box allows implementing additional quotation steps managed with a call to an external jsp page.

The page referenced by the ID sourceName="myExternalPage" is given in a section named “inclusions” and declared in the layout file (just above the translations section):

<inclusions>

<source name=" myExternalPage">myExternalPage.jsp

?confId=Conf_Reseller</source>

</inclusions>

<translations>

<localizedTranslations lang="EN,US,IT,ES">

Focusing on External steps making a call to a configuration process

Since the version 9, it is possible to run a configuration process from an external quotation step.

The configuration process can include rules (BRC) in charge to get/set quote information anywhere they are located (header, lines, total cells).

The changes are applied to the quote once the ADD_TO_CART action is performed by the user (or automate through the event logic).

The page referenced by the ID sourceName="resellerConf" is given in a section named “inclusions” and declared in the layout file (just above the translations section):

… <inclusions>

<source name="resellerConf">conf.jsp

?confId=Conf_Reseller</source>

</inclusions>

• The conf.jsp page is delivered in the standard package (in the following folder location cart.ear/cart.war/external/conf)
• The service associated with the configuration process is passed in the parameter string:

  ?confId=<ConfServiceName>.

• The service <ConfServiceName> must be declared in the cartServices.properties file
• The conf.jsp page can be duplicated and customized in order to adjust the size of the frame into which the configuration process will be displayed:
  
  

The table below details the attribute parameters:

Restriction:

For this later reason, the setting « IsCPQProcessStep » part of the XML configuration file must be set as follows:

<cam:Param cpe="CPE.Settings.Session.IsCPQProcessStep" value="true" />