How to Define Your Own User Interface
Generic User Interface
In order to build your own user interface, you have to go through the following steps:
Prerequisite: [Design the User Interface mockups]
- [Adapt the configurable process or the catalog model]
- Choosing layouts (valueSelectors) appropriated to each Form Properties.
- (optional) Applying UserTypes to distinguish different layouts for formBoxes, formPropertyBoxes, collectionPages etc.
- Simplifying your structure (Hiding useless FPs/FO/CPs etc.).
For more details about this step, please refer to the Designer User Guide.
- [Customize the User Interface]
- Working with Themes
- Structuring the Pages
- Page sequencing
- Parts positioning
- Components parameterization
- Designing the Pages
- Translations
- Graphical resources
- Visual identityDefining the user interface behaviorNote: If you want to design your own Custom UI Objects, you will have to develop, package and deploy these components before their integration into the pages; For more details on the development of the Custom UI Objects, please refer to the External Components Tutorial.
We recommend you to start the customization of your theme from the standard themes:
| CONTEXT | LAYOUT FILE | ASSOCIATED THEME / CSS FOLDER |
|---|---|---|
| Configuration Process Standalone | configuratorUIDesktop.xml | configuratorDesktop |
| Catalog | ||
| . Main | catalogUIDesktop.xml | catalogDesktop |
| . Embedded Guided | guidedSellingUIDesktop.xml | configuratorDesktop |
| Selling | ||
| . Embedded Configuration Process | configuratorUIDesktop.xml | configuratorDesktop |
E.g.: the message “Cannot access CPE.rootCP.gp.SBL/rootLine.GET(CPE.Settings.Session.PricingMethod[1])” can be displayed if you did not declare the PricingMethod as a setting, and/or if your sales breakdown line name is not ‘rootLine’
PROS Smart CPQ App specificities
SMART CPQ APP FOR IPAD
Smart CPQ exists as an iPad native application allowing end-user to create and update quotes. It is based on the Smart CPQ mobile theme specifically adapted for tablet devices.
For more details regarding the native Smart CPQ application, please contact your PROS account representative.
SMART CPQ THEME
The complete CPQ process can be fulfilled via a user interface that has been designed to improve the user experience on tablet devices. By default, a Catalog and Configurator UI package (theme and layout files) is delivered with the standard installation.
Only UI components and CSS files contained in the standard CPQ package are supported and optimized for a tablet usage.
| CONTEXT | LAYOUT FILE | ASSOCIATED THEME / CSS FOLDER |
|---|---|---|
| Configuration Process Standalone | catalogUITouch_CP.xml | configuratorTouch |
| Catalog | ||
| . Main | catalogUITouch.xml | catalogTouch |
| . Embedded Guided Selling | catalogUITouch_NA.xml | configuratorTouch |
| . Embedded Configuration Process | catalogUITouch_CP.xml | configuratorTouch |
The default layout files and linked CSS use components that have been designed for a better user
experience on tablets. It is adapted to be run with Safari for iPad (embedded into the native Smart CPQ wrapper application) or with Chrome on Android tablets.
We recommend you to start the customization of your Smart CPQ theme from the standard themes and layout files listed above.
To ensure the ’Touchability’ of the User Interface and its compatibility with Smart CPQ, we strongly advise:
- to re-use the delivered UI and layout zoningWarning: The CSS classes that are part of the CPQ package correspond to the layout XML as it has been delivered in the setup.
Contrary to the standard Configurator or Catalog theme, CSS classes may not cover different combinations of parts or boxes and/or boxes attributes than the ones defined in the default XML files.
- to re-use the delivered valueSelectors
- to re-use the forms & formProperties layout provided in the standard theme
- to only modify basic CSS properties (e.g. font, colors, background images)
For more details about the default Smart CPQ package, please refer to APPENDIX D – Smart CPQ App.