Design - Components
OVERVIEW
The Component sections allow you to configure the Layout, Data, and Translation elements for the Collaboration Portal website and what columns and fields are displayed in the Quote Summary List widget and Product List view that are displayed in the online quote.
Each Component section allows you to define the Layout (styling, label and font colors, etc.) Data and the Translations for the various headings and labels in each of the sections of the website. From the left pane, you can select each component section and change the defaults. Note, certain component sections such as Login do not allow you to configure Layout and Data elements as there are no configurable properties or elements for those sections.
Login Component
The login component allows you to translate the login page text. Translations can be done directly in the Collaboration Designer interface or they can managed with an Excel file that is exported, translated, then imported.
The Layout & Data tabs are not configurable as these are static elements that apply to any collaboration portal.
All the Page fields for the login screen are listed under the Name heading and the default text strings are configured under the Fallback Locale column. The translated text is entered in the Destination Locale column for each page element name.
You can override the default labels for the Fallback and Destination Locale by entering the text string and then tabbing out of the input field which will automatically save the change.
DATA LOCALE
In this section, you can define which data locales are available for your collaboration portal model. The data locale corresponds to the locale (language) of your data (the content of your online quote). From the dropdown list, you can select which locales are supported and you can add a new one by clicking on Create Locale.
When you click on Create locale, you must define a language and a region.
Then, you can choose which locale will be used by default in your collaboration portal model.
DISPLAY LOCALE
In this section, you can define which locale can be used in your quote model for display purposes. This locale drives the language used to display Steps, Pages, Titles, header, columns, etc. You can select the supported locales or add a new one.
Then you must choose which locale will be used as fallback. When there is no translation available for the selected display locale, the fallback locale will be used.
Quote Component
This section contains all the layout and data elements for how products are displayed in the Quote View list, the columns to be displayed, and which fields/columns should appear in the Quote Details Summary widget. You can also configure the Document Generation actions to be used when the user clicks the Generate Document button in the Collaboration Portal. Note, Document Generation actions must be configured in the Quote Model in order to be selected for the document generation. Please refer to the Document Generation actions section to see how actions are configured: User Interface - Actions.
The Quote settings section allows you to define Page Layout styling, Data elements, and the Translation strings for the Quote View in the collaboration portal microsite:
TYPES OF COMPONENTS & WIDGETS
| TYPE | DESCRIPTION |
|---|---|
| AcceptQuote | The Accept Quote button within the Quote Details Widget |
| GenerateDocument | Generate Action document action in the Collaboration Portal that allows the user to generate a PDF or Word document proposal using the DocGen actions configured in the Quote Designer. |
| QuoteDetails | Widget used to display the quote details summary information such as Total Cost, Total Discount, Total List Price, etc. The list of columns and/or fields can be configured on the Data tab for this module. |
| QuoteLastUpdatedDate | The Your Quote section at the top of the Quote Product View that displays the Last Updated datetime stamp of when the quote has been updated either by CPQ or through the Collaboration Portal by any user who has edit permissions. |
| QuoteLineDetails | The section/module used to display the Quote Product List view. This widget is used to configure which columns and/or fields should be displayed for each product card in the quote list. |
LAYOUT
The layout section allows you to select what label, background and font colors are used for each of the page elements/modules above. Each page element color can be configure by clicking the color picker which allows you to select which color you want for the desired label or button using the color gradient slider and color palette picker. You can also specify RGB values in the color picker dialog or use the color dropper to match a color value based on whatever color section is detected by the color palette picker.
| Component Type | Component Setting | Description | Format Type / Values |
| Accept Quote | Label Color | Defines where the added product/line should be inserted based on a selected product/line in the quote. If nothing selected, the policy at quote level is used (defined in User Interface - Settings) | "Before", "After" |
| Background Color | Defines where the added product should be inserted based on a selected folder/bundle line in the quote. Note: This also defines where a line is added in the grid when there is no line selected. | "Top", "Bottom" |
| Generate Document | Label Color | Defines if the added folder line should be inserted inside the selected folder line in the quote. | "Same level", "Force Inside" |
| QuoteDetails | Title Font Color | Defines where the added line should be inserted based on a selected folder line in the quote. | "Force Inside", "Same Level" |
| Background Color | Defines if the added product should be inserted inside a selected bundle line in the quote. | "Same level", "Force Inside" | |
| QuoteLastUpdateDate | Label Color | ||
| QuoteLineDetails | Title Font Color | ||
| Line Background Color |
Layout Defaults
DATA
The Data tab allows you to configure the actions and columns and/or fields that will be displayed in
the Quote Product View and the Quote Details widget on the right side of the Collaboration Portal.
| Component Data | Component Setting | Description | Format Type / Values |
| GenerateDocument | Action Name | Defines where the added product/line should be inserted based on a selected product/line in the quote. If nothing selected, the policy at quote level is used (defined in User Interface - Settings) | "Before", "After" |
| QuoteDetails | Subtotal | Defines where the added product should be inserted based on a selected folder/bundle line in the quote. Note: This also defines where a line is added in the grid when there is no line selected. | "Top", "Bottom" |
| Total | Defines if the added folder line should be inserted inside the selected folder line in the quote. | "Same level", "Force Inside" | |
| QuoteLineDetails | Columns | Defines where the added line should be inserted based on a selected folder line in the quote. | "Force Inside", "Same Level" |
| Delete Action Session State |
QuoteDetails Columns Picker:
Catalog Component
The Catalog component settings allow you to define Page Layout styling, Data elements, Collections & Product List category structure, and the Translation strings for the web catalog user interface when an end user wants to browse and search for products and services that are available in the business's catalog. The catalog data provider allows the customer to specify which product catalog should be used for the collaboration portal model. This setting allows customers to segment or distinguish whether they want end users / buyers to be able to view the full product catalog or a limited set of products in the catalog by specifying which catalog data provider should be used to populate the categories and sub-categories or collections and sub-collections of products.
There are three tabs in this section that allow you to configure the following properties and styling:
- Layout = define the styling, colors and fonts for the catalog browser in the collaboration portal
- Data = define the Catalog data source, how the Categories and Sub-Categories or the Collections and Sub-Collections are displayed and what Rich Media Object User Types are utilized for the Collections and Sub-collection banner, hero images, and teasers.
- Translation = define the fallback and destination locale text strings for the Catalog Browsing runtime in the collaboration portal
The Service name has to be defined on the custom process entity. This name corresponds to the name added in the Tenant configuration and allows to identify the external system to call.
Once you have configured all of these components, you can Activate the Collaboration Portal model to begin testing the Collaborative Quoting quoting experience through CPQ.
WEB CATALOG BROWSING UI ON THE COLLABORATION PORTAL
CATALOG DEFINITIONS & COMPONENT TYPES
The Collaboration Portal retrieves catalog metadata and media from the same catalog data provider that is used to populate the catalog runtime UI view in Performance Quoting. Designing the catalog UI for an online browsing experience requires that you have an active Catalog workspace version that is linked to the active Quote Model. For more information on defining a catalog, catalog concepts and the structure. Please refer to the Designer - Modeling Catalogs help topics.
| TYPE | DESCRIPTION |
|---|---|
| Catalog | Represents a coherent set of standard or configurable products and/or services that are sold by a company. The selling process can be consumer-oriented (B2C) or between professionals (B2B) or a combination of both (B2B2C). |
| Collection | A Collection is a coherent set of products which are managed/organized as a whole. Collections are used to organize a catalog in order to optimize the buying experience and categorize products into the appropriate categories to make it easier for users to navigate your company's products and services. |
| Collection List | A Collection List is the number of main and sub-categories that helps you organize what products are within each categories. For example, for a business that sells computer and phone products you may have three top level categories called Computers, Phones, Accessories. The Computers collection list may have multiple sub-collections such as Desktop, Laptops, Accessories. |
| TYPE | DESCRIPTION |
|---|---|
| Hero | The Hero banner or image defines the rich media object that is used as the Hero image for the Collection List |
| ItemSheet | Item Sheet represents the image thumbnail used to represent a Product Data sheet that is included in the Product Details page for each product. |
| ProductLinks | ProductLinks are used to add additional information and data to extend the product specification information and used to extend product knowledge. For more information about Creating and Viewing Product Links refer to the Managing Product Links help topic. |
| RecentlyViewed | Recently Viewed products list displays a list of the products the user has recently viewed in the product catalog. The list is dynamic based on what products the user has viewed. The user can scroll left or right through this list to see recently viewed product items for quick access to products they were previously viewing. |
| SearchResult | Search results Rich media object user type represents the media images that are used to display as image thumbnails when the user uses the Search function at the top of the web catalog page to search for products. |
LAYOUT
The layout section allows you to select the UI elements of the online catalog. The layout tab contains different sections to configure the labels, section headings and colors, and additional settings for how collection and category information will be displayed in the catalog runtime view.
Component Layout element colors can be configured by clicking the the color picker drop down which allows you to select which color you want for the desired label or button using the color gradient slider and color palette picker. You can also specify RGB values in the color picker dialog or use the color dropper to match a color value based on whatever color section is detected by the color palette picker.
| Component Type | Component Setting | Description | Format Type / Values |
| CollectionList | Maximum Number of Lines | Defines the maximum number of collections and sub-collections on the page. Maximum supported value is 3 lines in the catalog grid view. | Integer Maximum Value = 3 |
| ProductList | Leading business properties limit | Defines the number of business properties to display in the product list view. This is useful if you want to restrict or show the most critical business property data on the product list view instead of showing all business properties which can overwhelm users. To display all business properties, set this property to "0". | Integer Use 0 to display all business properties |
| RecentlyViewed | Maximum Number of Items | Defines the number of recently viewed product items that are displayed in the Recently Viewed items carousel at the bottom of the catalog pages. | Integer Maximum Value = 25 |
DATA
The Data tab allows you to configure the actions and columns and/or fields that will be displayed in the Quote Product View and the Quote Details widget on the right side of the Collaboration Portal.
| Catalog Section | Component Setting | Description | Type / Values |
| Component Data | Main Price Key | Pricing key identifier of the pricing method/range to retrieve for products. Defines which pricing method from the Quote Model should be used to retrieve displayed price for products | eg. CPE.currentItem.GET(CPE.Settings.Session.PricingMethod[1]).Range[1].value |
| Strikethrough Price Key | Pricing key identifier of the pricing method/range to retrieve for the Strikethrough Price for products Defines what pricing should be displayed for the Strikethrough Price in the catalog. | CPE.currentItem.GET(CPE.Settings.Session.PricingMethod[1]).Range[1].value | |
| Data Provider Name | Defines which catalog should be used for the product catalog browser runtime. The list of catalog is retrieved from the active Catalog workspace version as defined in the Catalog Designer. | Will display the list of Catalog Data Providers from the selected Quote Model Warning : Only an Enterprise Catalog Data Source can be used. Regular Catalog Data Providers are not compatible anymore with Collab Quoting. | |
| Collection List | Rich Media Object User Type | Defines which rich media object user type should be used for displaying the product and collection images in the product catalog | Inherited = Uses the primary image user type defined for the Collection Any = Uses any image defined for the Collection Empty = No image will be displayed in the user interface Custom = user defined RMO User Type |
| Hero | Rich Media Object User Type | Defines which rich media object will be displayed for the Hero image in the product catalog | See above for the User Type definitions |
| Item Sheet | Rich Media Object User Type | Defines which rich media object will be displayed for the Hero image in the product catalog | See above for the User Type definitions |
| Product Links 1 - 3 | Rich Media Object User Type | Specifies which media type will be used for the Product Links that will be displayed on the Product Details page of each product item | See above for the User Type definitions |
| Link Type | Specifies what type of Product Link you want displayed in the web catalog. This allows you to extend product knowledge by adding product links on your product detail pages. | Not Defined Up Selling = An up-selling link between Product A and Product B indicates that "B" is a better product than "A" Cross Selling = A cross-selling link between product A and product B indicates that “if you buy A, you might want to be interested in B”. Breakdown = A breakdown link between product A and product B indicates that “B is a part of A”. Replacement = A replacement link between product A and product B indicates that “A has been replaced by B”. Bundle = A bundle link between Product A and Product B indicates that "B" is part of a bundle of product A that are typically purchased together as grouped set of items Custom | |
| Search Result | Rich Media Object User Type | Defines which rich media object user type will be displayed when the user searches for products in the catalog using the Search Bar at the top of any catalog pages | See above for the User Type definitions |
| Teaser List | Rich Media Object User Type | Defines which rich media object user type will be displayed for a teaser which is link (ie. redirection) to as specific location in the catalog. Teasers can be attached at the root catalog, or to whatever collection. | See above for the User Type definitions |
| User Type | Specifies which user type to be used for Teaser objects. | See above for the User Type definitions |
TRANSLATIONS
Similar to the Translations tabs for the other components, this section allows you to configure the Fallback and Destination locale that will be displayed if the user has a specific locale set for the browser language setting so that text is translated to their chosen locale. If the locale cannot be detected from the browser the Collaboration Portal defaults to the Fallback locale.
This section is broken out into each Catalog page element and the section title, headings and other labels that are displayed in the product catalog user interface:
As with the updating the translation in the other sections, you can either select a Destination locale from the locale drop down menu or create a new one. For more details on this, see the Managing Translations help topic.