End User Interface
Quote Interface
QUOTE LINE DETAILS
Collaborative Quoting micro-site can display a product card view of all the items the Seller or the Buyer has added to the quote in a the Quote Line Details section. The list of columns that are displayed for each product card (or the line items which contain the product item) in the Quote Line Details section and the personalization options of the section layout can be set in the Collaboration Portal Designer.
The CPQ Admin can select up to 20 columns for display on each quote line. The format and field types are retrieved from the Quote Model in Smart CPQ.
The micro-site is built with responsive design patterns and will automatically scale to handle different screen sizes. No additional configuration or customization is needed to specify the layout of the Quote Line Details on mobile screens versus desktop.
QUOTE HEADER & SUB-HEADER
The quote header bar at the top of the micro-site contains the following page elements:
- Customizable company logo to be set in the Collaboration Portal Designer.
- Document Generation action to trigger the generation of a pre-configured proposal document based on the quote content.
- A link to the Collaboration Portal interface to manage your quotes
The quote sub-header includes the name of the quote, the date of the last update and, optionally, an action to open the activity tracking panel.
Depending on the width of your screen, the sub-header may also include an action allowing to expand or collapse product characteristics on each line:
NAVIGATION & DISPLAY RENDERING
The Quote Line Details view shows all the products that have been added to the quote along with their associated characteristics. To navigate the quote list, you can scroll the list view by using the scroll bar or your finger depending on whether you are accessing the quote on desktop or mobile screen.
Quote Display Experience
To provide your customers, partners or end users who will be reviewing and approving quotes with the optimal product properties, it's important to select only the columns which you want displayed on the Quote Line Details view. For example, you may want to show the List Price, Discount, and Discount % fields for each product item but not show the Deal Score, Margin, or any other columns that are internally used as part of your selling and pricing workflows.
The best way to think about the quote list view is displaying the list of columns you want your customers to be able to view and modify as if they were purchasing this item from your eCommerce website.
QUOTE DETAILS
The Quote Details pane gives insights at the quote level. It displays fields from your quote model representing key quote summary information, such as Total Cost, Discount, Discount % and Delivery costs for instance.
The CPQ Admin can customize the fields to be displayed in this widget through the Collaboration Portal Designer.
From the navigation standpoint, this pane is usually displayed on the right part for wide screens, or at the bottom for narrower screens like smartphones.
COn�aAllm _Quotes�
Your quote "3
Samsung Galaxy S21 White...
Quantity15
Net Price Sync$629.99
Show details v
Quantity
Net Price Sync$629.99
| Skytech Shadow 3.0 Gaming PC Desktop | ... | |
| Quantity Net Price Sync | $1,241.28 | |
| Show details v | ||
| Acer Aspire AZ3-615-UR1C All-in-one PC Quantity | ||
| Net Price Sync | $359.98 | |
| Show details v |
5 items in quote
Hide details
Apple MacBook Air MOD42CH/A
Quantit
+ Add new item I A
Global Score55
| Total Discount Quote Details Total List | $1,330.90 $13,309.01 |
| Freight cost | $0.00 |
| Deal Amount | $11,978.11 |
| Deal Amount | $11,978.11 |
The Accept Quote button in the Quote Details pane allows the Buyer to signify that they have reviewed and accepted or rejected the quote.
For more details on the Accept Quote user action and configuration refer to the Accept Quote help topic page.
QUOTE UPDATES
If your quote model allows Buyers to edit values in the quote via Collaborative Quoting, you can do so via two means:
- By clicking on "..." on a given quote line in the Quote Line Details section:
Delete quote lines
Note: that clicking on Remove deletes the corresponding line from the quote.
Clicking on Edit Properties then gives you access to the available properties, including the ones editable if any:
- By clicking on Edit properties in the Quote Details pane:
Similarly, you access the available properties, including the ones editable if any:
Main Menu
The action giving access to the Main Menu is accessible from the Quote Line Details section:
The main menu can be setup to give access:
- to the Catalog interface if you are authorized to add items in the quote from Collaborative Quoting
- to the Document Generation action, similar to the one accessible in the Quote Header.
- to the option to logout from Collaborative Quoting
Accept Quote User Action
The Accept Quote button in the Quote Details pane can be customized to show different quote status values. The quote acceptance or rejection action represents the Buyer accepting or rejecting the quote. The Sales users are then able to review the quote in the scenario where the buyer has made changes - such as adding or removing items, updating quantities, updating product configurations, etc. - and take further actions depending on the Buyer's choice.
QUOTE ACCEPTANCE WORKFLOW
Once the customer clicks the Accept Quote button the default configuration of Collaboration Quoting is to display Cancel and Confirm actions.
The Cancel button will navigate you back to the quote where you can continue modifying or reviewing the online quote.
The Confirm button sets the system Quote Status field in CPQ to the value set to reflect quote acceptance.
The Seller user or any user who has access to the quote will be able to view the updated system
Quote Status in CPQ when visible:
Generate Document Action
Similar to the Document Generation action in Smart CPQ that generates a PDF, Word or Excel document using personalized templates, you can generate documents from Collaborative Quoting leveraging the same action defined in the Quote Model in Smart CPQ.
The action is accessible from the Quote Header when made available:
Once the user clicks the Document Generation button, the configured proposal document is generated and can be opened directly in a new browser tab or saved to your computer so that it can be sent via email or any other collaboration tools.
Once clicked or pressed, the user will see the Document generation status bar with a progress indicator.
Once the document has been generated, it can be opened in your browser or via the right application on your computer.
DOCUMENT GENERATION ACTIONS
To configure the document generation action that is executed when the user clicks the button and preset the template of document to be used, refer to the Quote component section in the Design - Components help topic. Only Document Gen actions that have been configured in the same quote model that is configured in the Collaboration Portal Model will be available to select from.
DocGen Limitatons
Jasper Reports are not available to be configured as Document Generation actions for the quote link in Collaborative Quoting.
Catalog Browsing Experience & Product Search
Collaborative Quoting supports a rich, visual product discovery experience for your customers to be able to browse and search for products within the catalog that powers Smart CPQ. Depending on which catalog data source has been configured in the Collaboration Portal Designer, you have access to whatever collections and products have been configured by the CPQ admin.
The Catalog, when made available, can be accessed via the main menu in the Quote interface:
This catalog experience is based on the catalog defined in Smart CPQ with a dedicated and personalized theme for the Buyers. As any catalog defined in Smart CPQ, you can navigate within collections and browse product pages. You can also leverage the advanced search capabilities of the CPQ catalog to find products faster.
The Catalog user interface in Collaborative Quoting consists of the following elements:
- A header including an explorer for collections, the personalizable company logo and an action to navigate back to the quote.
- A search bar to find products via the search capabilities of Smart CPQ Catalog.
- A navigation path to figure out at what level of the catalog you navigate.
- Then the displayed pages can be about a given collection or a specific product. The elements part of these pages can be configured in the Collaboration Portal Designer.
- The collection page could include sub-collections if any and/or various lists of products. Add To Cart actions are available for each individual product. For instance:
- The product page could include information like the name, description, price and properties of each product. That's also where the Add To Cart action for an individual product is located. For instance:
CATALOG NAVIGATION MENU
The hamburger menu in the Catalog header bar allows you to easily navigate various levels or sub-collections within the catalog.
As you browse the product catalog, you can also use the breadcrumbs at the top of each collection or product page to navigate to previous collections or to the root collection level (by clicking the Home icon).
COLLECTIONS LIST
The Collection List is below the main hero banner on a given collection page and displays up to 5 lines of collections. Depending on the number of collections a business has configured in the product catalog, you may see multiple rows of collections.
PRODUCT LIST
The Product List can also be part of a collection page. It displays the list of products within a given collection, including their properties, potential quantities to purchase and an individual Add To Cart action.
PRODUCT PAGE
Product pages present the user with more detailed product information such as the product properties and specifications, item spec sheets or any additional files that have been configured in the catalog, and display relevant product links such as spare part information, cross-sell/up-sell product links. Similar to the Collections list view, products and items can be added directly to the quote by clicking the Add to Cart button.
Quote Activity Tracking
The Activity Tracking pane can be activated and made accessible via an action in the Quote Sub-header. This is where you can consult the activity from all users working on the current quote, whether from the Collaborative Quoting interface, or the quote one in Smart CPQ.
Activities include the addition or removal of products, the update of values in cells or fields, etc. Each activity is represented by an entry in the Activity Tracking pane, organized chronologically and per user session.
For instance:
A filtering capability is available by clicking on the corresponding icon of the Activity Tracking
widget. It allows three different types of filters:
- All changes: display all activities that happened on the quote
- My changes: the list of activities is filtered to display only the ones you performed
- Others' changes: the list of activities is filtered to display only the ones performed by users other than you.
Example of filtering:
The activation of this action can be done in the Collaboration Portal Designer.
