Smart CPQ App
Do Not:
The CSS classes part of the Smart CPQ package correspond to the layout XML files as they are delivered in the setup.
Contrary to the standard Configurator or Catalog theme, CSS classes may not support different combinations of parts or boxes and/or box attributes than the ones defined in the default XML files.
That is the reason why you should avoid modifying the page zoning and CSS classes to ensure the ‘Touch-ability’ of the application.
Only minimal changes without any impact on the layout and positioning of the elements should be performed (e.g. font modifications, color adjustments, activation/deactivation of an actionBox … can be performed)
Warning:
Do not forget that you are building a user interface that will be used on a tablet device. Screen size and touchability must be taken into account when creating the Catalogs & dialogs (Number of steps/collections, size of the RMO, size of FP domains, userTypes, etc.).
For a better user experience, it is not recommended to handle the same amount of data and complexity when designing the user interface on a standard web browser and on a tablet device.
CatalogUI
HOMEPAGE & COLLECTION PAGE (USERTYPE=NODECL)
By default in the standard Smart CPQ theme, a homepage and a catalogPage ( ) have been designed as follows:
Page highlights:
- The leftPart is collapsible
- The collectionListBox uses a mode allowing to scroll vertically the products contained in the sub-collections
COLLECTION PAGE (USERTYPE=*) & SEARCH PAGE
Page highlights:
- The productListBox display can be switch from a list to a grid by clicking on the top left button
- Each product of the productList can be added to the compareBox via the action button on the left
- In the searchPage, the resulting products are displayed in a single productList and not grouped by collection.
COMPARE PAGE
PRODUCT PAGE
Page highlights:
- The productBox can display up to 2 price ranges
- Each product can be added to the comparator
- The productTabs can show 3 tabs
- One tab for the RMOs (galleryViewer)
- One tab for the Business Properties (BPSBox)
- One tab for the ProductLinks (productLinkBox)
- On the collapsible left side, it is possible to switch from a product to another one within the current collection (via the rollingSelector)
NEEDANALYSIS PAGE
ConfiguratorUI
CONFIGURATION PAGE
Predefined CSS for the formProperties and valueSelectors can be used depending on the desired UI rendering. Choose the formProperty and valueSelector shape depending on the type and the volume of data that need to be displayed.
Value Selectors
Form Properties
<formPropertyBox cssName="formProperty" userType="*"> (Standard Form Property rendering)
<formPropertyBox cssName="formPropertyRMO" userType="utFpRMO">
(Used to display the RMO attached to the FP)
The FP Box is collapsible and its header displays the description of the FP. Then the first column on the left is used to display the RMO image + text of the FP.
Second column on the right is used to render the expanded view of the value selector.
<formPropertyBox cssName="formProperty2Cols" userType="utFp2Cols">
(To be used with the expanded view of the value selectors – No Collapsed view for the FP) First column on the left is used to display the RMO image + description of the FP.
Second column on the right it used to render the expanded view of the value selector.
Nested Form Box
SUMMARY PAGE
UI Components Compliance grid
The following table lists the UI components that are part of the default Smart CPQ theme and the ones that are not part of the default theme.
| CATALOG | CONFIGURATOR | PART OF STANDARD MOBILE THEME | IS TOUCH(ABLE)? | |
|---|---|---|---|---|
| Structural Components | ||||
| combinedBox | X | X | Yes | Yes |
| Rich Media Components | ||||
| logoBox | X | X | Yes | Yes |
| RMOFlyer | X | X | Yes | Yes |
| RMOBox | X | X | Yes | Yes |
| imageViewer | X | No | Yes | |
| galleryViewer | X | Yes | Yes | |
| link | X | X | No | Yes |
| Product Components | ||||
| productFlyer | X | X | Yes | Yes |
| CATALOG | CONFIGURATOR | PART OF STANDARD MOBILE THEME | IS TOUCH(ABLE)? | |
|---|---|---|---|---|
| productBox | X | X | Yes | Yes |
| itemSheet | X | X | Yes | Yes |
| BPSBox | X | X | Yes | Yes |
| productLinkBox & linkContent | ||||
| productTabs | X | X | Yes | Yes |
| productListBox | X | Yes | Yes | |
| sparePartsBox | X | No | Yes | |
| sparePartsViewerBox | X | No | Yes | |
| Navigational Components | ||||
| selectorBar | X | Yes | one level only | |
| menuBar | X | No | one level only | |
| menuBox | X | No | Yes | |
| stickerBar | X | X | Yes | Yes |
| browserSticker | X | Yes | Yes |
| CATALOG | CONFIGURATOR | PART OF STANDARD MOBILE THEME | IS TOUCH(ABLE)? | |
|---|---|---|---|---|
| verticalSelector | X | X | No | No |
| navigationPathBox | X | X | No | Yes |
| rollingSelector | X | Yes | Yes | |
| Catalog Components | ||||
| collectionListBox | X | Yes | Yes | |
| collectionPreviewBox | X | Yes | avoid rolling effect | |
| collectionTabs | X | No | Yes | |
| teaserListBox | X | Yes | Yes | |
| teaserSlider | X | No | No | |
| needAnalysisBox | X | Yes | Yes | |
| Configuration Components | ||||
| configurationBox | X | Yes | Yes | |
| formFlyer | X | Yes | Yes | |
| formBox | X | Yes | Yes |
| CATALOG | CONFIGURATOR | PART OF STANDARD MOBILE THEME | IS TOUCH(ABLE)? | |
|---|---|---|---|---|
| nestedFormBox | X | Yes | Yes | |
| formPropertyBox | X | Yes | Yes | |
| Value Selectors | X | Yes - with limitations (cf. chapter above) | Yes - with limitations (cf. chapter above) | |
| drawingBox | X | No | Yes | |
| summaryBox | X | Yes | horizontal mode only | |
| manufacturingBox | X | No | No | |
| salesInformationFlyer | X | No | Yes | |
| salesInformationBox | X | No | Yes | |
| Comparison Tools | ||||
| compareFlyer | X | X | No | Yes |
| compareBox | X | X | Yes | Yes |
| comparePreviewBox | X | No | Yes | |
| Search Tools |
| CATALOG | CONFIGURATOR | PART OF STANDARD MOBILE THEME | IS TOUCH(ABLE)? | |
|---|---|---|---|---|
| searchSticker | X | No | No | |
| searchBox | X | Yes | Yes | |
| productResultBox | X | Yes (not split per collection) | Yes | |
| Action Components | ||||
| actionFlyer | X | X | No | No |
| actionBox | X | X | Yes | Yes |
| Information Components | ||||
| legendBar | X | No | No | |
| informationFlyer | X | X | Yes | Yes |
| informationBox | X | No | Yes | |
| Quote Components | ||||
| cartBox | X | X | No | Yes (without folder) |
| cartSticker | X | X | Yes | Yes |
| Preferences |
| CATALOG | CONFIGURATOR | PART OF STANDARD MOBILE THEME | IS TOUCH(ABLE)? | |
|---|---|---|---|---|
| preferenceSticker | X | No | No | |
| External Components | ||||
| externalBox | X | X | No | Yes |
| externalFlyer | X | X | No | Yes |
| externalAction | X | X | No | Yes |
| externalValueSelector | X | No | Yes |