Working with Themes
Concept
OVERVIEW
As mentioned above, the layout of each rendered web page is defined by the Layout XML file.
The layout is defined for a given theme, and the xml file will structure the rendering of the page. The CPQ UI engine allows multiple themes in order to address multiple sales channels (end-customers, partners, internal sales people, etc.) for a given model.
The Layout XML file is structured as follows (example of the Configurator layout file):
For a given theme (<thema> section), you will be able to describe:
- The structure of each page (
<homePage>,<configurationPage>,<summaryPage>for the Configurator and Need Analysis Userinterface;
<homePage>,<collectionPage>,<productPage>,<searchPage>… for the Catalog User interface) in the<organization>section.The
<component>section gathers the description of value selectors used in all the pages. - 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 Theme associated to the layout is defined at the beginning of the XML file:
<thema name="catalogXXXX">
The ‘name’ of the theme corresponds to the name of the directory in
\cameleon.ear*cameleonUI.war\theme*.
ATTRIBUTE DETAILS
| SUB-ELTS | ATTRIBUTES | VALUE |
|---|---|---|
| name: name of the directory in \cameleon.ear\cameleonUI.war\theme\ | ||
| disableAutoZoom: ability to deactivate auto zoom capabilities on catalog, configuration or need analysis pages. When set to ‘on’, auto zoom and manual zoom by users are deactivated. | on/off If not filled, the default value is set to ‘off’ |
How to create a new theme?
We recommend creating a new theme based on the standard theme delivered with CPQ
- Duplicate the standard theme folders (‘configuratorDesktop/catalogDesktop’) and rename the directory (avoid special characters)
- Duplicate the corresponding Layout XML file
- Replace the name of the theme:
- If necessary, modify the resources path pointing to the previous theme directory:
theme/catalogDesktop/images/icons/btnCompare.png theme/catalogDesktop/images/btn/btnAd dToCompare2_en.png
- If necessary, modify your CSS files content anywhere absolute paths are used.