DESIGN

The Design tab of the Collaboration Portal Designer application is the main settings area where you can configure the Collaboration Portal website and view the Microsite Preview on the right pane.

The Left Design pane allows you to navigate the different sections of the collaboration portal website and webpage components, the center section shows the respective configurations and settings for each selected Design component. The right pane shows the Microsite Preview which will be updated once you Activate the Collaboration Portal Model.

Navigation for the microsite configuration and settings is done through the Left Pane which comprises two sections:

• Template
• Components

Within each Component section you will find the Layout, Data and Translation tabs where the configuration settings for each of those sections are.

FOOTER TABS

The Footer tabs allow to:

• Display errors
• Display warnings

Errors tab

The error tab contains the list of errors that prevent collaboration portal model activation. Errors are detected during modeling (for example, you configured a data element with a column that doesn't exist in the quote model). As soon as the error is fixed, it disappears from the error tab. You can click on the error and you will be redirected to the right place.

During Validation or Activation, some errors can be displayed in the error tab. These errors are triggered from the validation engine. You can't click on it and they will disappear only when you click again on Validate/Activate.

The Warnings tab contains the list of unused elements. An element is flagged as unused when it is not referenced in the collaboration portal model (Warning! Some elements such as the component used for document generation are not used in the collaboration portal model but used by the word template). Warnings don't prevent activating the model.

PREREQUISITES

The quote model has been setup and activated in the Quote Designer. The catalog structure and associated product metadata have been configured in the Catalog Designer.

The Collaboration Portal & Collaboration Portal Designer Application roles have been configured in PROS Home. If they haven't been activated, please create a support ticket.

Definitions:

What you will learn

• How to configure the website using templates
• How to configure the website styling, labels, and colors to match your businesses' branding and styling

USING COLLABORATION PORTAL TEMPLATES FOR WEBSITE LAYOUT

Once you have created the Collaboration Portal model, you will need to select a website template to

start configuring the Collaboration Portal microsite. With Version 1, there is only one template available but more templates may be added in future releases. The template contains website colors for banners, header panels, and other page elements as well as font and section spacing to allow you to customize the microsite to match your preferences or brand identity.

In order to configure the microsite using a template, you need to create the Collaboration Portal model first and then select the template:

STEP	DESIGNER SCREENSHOTS INSTRUCTIONS
1	After creating the Collaboration Portal model, click on the Choose Template.
2	Select the Pros Template 1 (it will be selected by default) and click OK.

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
3	Now begin setting the website styling, colors, fonts, and iconography in each page section on the Layout tab. Page Title: This will be the Collaboration Portal Page Title for each quote that is shared with customers The template predefines default icons, colors, and other page elements. All these style and page settings are configurable by clicking the color drop-down pickers or updating the fields. For more details on the various page elements and settings, refer to the Configure Website Styling section.

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
4	After you have configured the Collaboration Portal page elements and styling, you will want to test the Collaboration Portal by sharing a quote. First, activate the collaboration model by clicking the Activate button in the top right.

CONFIGURING WEBSITE STYLING

The Collaboration Portal website or microsite can be customized with different component layout sections, styling, and icons to ensure your customers are viewing quotes and proposals that match your businesses' brand identity. There are two website sections that can be customized with different styling elements:

1. ProsTemplate1 Layout - This is the Main Collaboration Portal website with the Quote UI View & Quote Details widget that will be displayed when customers open the quote link
   
   
2. Catalog Component - This is the Product Catalog Browser UI view that your customers will see when they want to view and browse your product catalog

To customize each of these sections you can follow the steps below: Collaboration Portal Main Website Layout - ProsTemplate1

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
1	To modify the main page elements such as the Page Title, Content Background, Font sizes, and other colors of the main website, click on the ProsTemplate1 in the Design left navigation menu, then click on the Layout tab.
2	Within the main section of the Layout tab, you will be able to customize the following page elements: Page Title = The Collaboration Portal page title Favicon = The icon used by your browser to identify the tab for the Collaboration Portal website Waiting Spinner Background Color = Background color for the waiting/loading spinner Content Background Color = the background color for the website that displays the Quote Products View and Quote Details Font and Font Size Ration = the Font file or font type used for the website and the font size Primary Button Header Color = background color for primary buttons Primary Button Color = font color for primary button

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
3	To customize the styling of the Catalog Browser user interface (runtime UI view) for what the customer views when they want to browse your product catalog, you will need to modify the Catalog component page elements in the Layout tab. Click on the Catalog component in the Design navigation left pane, then click on the Layout tab (by default the Layout tab will be automatically selected since it is the first tab). Here you can modify the logo, colors and styling, and define other configuration settings for the Catalog Browsing customer experience: Logo = con used by the catalog at the top of the catalog home page Top Background Header Color = Background color of the top header Top Header Font Color = Font color for the text in the Top header Accent Color = This color is used to highlight important items such as product titles, descriptions, important values, etc. Primary Button Header color & Primary Button Font color = This color is for the primary button header and font color Search Input Label Color = defines the input label color Button Background Color = defines the Search field Button Font Color = defines the input button text color Input Background Color = defines the input background color	Catalog - Layout page: Search Button Background Color:

Using the Collaboration Portal means that users can define the quote user interface to determine what quote contents and information should be displayed to your customers when they are collaborating on quotes with sales users.

This section will guide you through how to configure columns and fields that are displayed in the Collaboration Portal quote view that your customers and partners (or any users with whom you share quotes). Before getting into the configuration aspect, let's define the elements of the collaboration portal website:

QUOTE LIST VIEW

The Quote List View contains a table or grid of all the products in the quote along with the list of columns that have been configured for display. The products in the quote have the same ordering and ordinal positioning as those in CPQ. Depending on the number of columns configured for display

for products, only the first two rows of columns will be displayed below the Product Description. To view additional properties, the user can click Show Details to expand the full set of product properties;

Product Card View

Collapsed Details View:

Expanded Details View:

CONFIGURING QUOTE LIST VIEW

To configure the columns to be displayed for each product item in the quote list view, edit the Collaboration Portal model and click on the Quote component and follow the steps below:

STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
1	Click on the collaboration portal model version you want to edit/make changes to the column display. Click Edit in the upper right and then select the Quote component in the Design navigation left pane.
2	Click on the Data tab
3	This section allows you to edit both the Quote View and the Quote Line Details (also referred to as the Quote Details Widget). To configure which columns are displayed on the Product Card view for each product in the Product Table on the page, click Configure under the QuoteLineDetails section.

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
4	Click Configure which will display the Column picker modal dialog to pick and order the columns you want to display in the Product Card view of each product in the Product table. The maximum number of columns for display = 50 Note: You can reorder columns by selecting the column and using the up/down arrows to the right of the Selected Columns box. Once you have finished selecting and ordering the columns you want to display, click Save. Then click Activate in the upper right to test the changes. If you want to continue making changes to the column list, repeat these steps. To make changes to the column list in the Quote Details Summary widget proceed to the step below.
5	Click Configure in the QuoteDetails section.

STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
6	Similar to the column picker list for the QuoteLineDetails, select which columns you want displayed in the Quote Details Widget. Maximum number of columns = 5. The list of fields for the QuoteLineDetails is retrieved from the Quote Model's View and Component definition. For more details on configuring the list of columns and fields for components refer to the Quote Views topic.
7	To configure which total field should be used for the Total amount in the Quote Details widget, click the drop-down in the Total field and select which quote total field should be used: It is recommended to use the CameleonCPQ_Total field unless a different total quote amount field has been created.

PREREQUISITES

The catalog user interface and product discovery and browsing experience is driven by the configuration and setup in the Catalog Designer. In order to ensure an optimal customer experience so that your products are displayed properly with images, product descriptions, and properties you will want to ensure you have a good catalog structure that makes it easy for your users to view product details.

Prior to configuring the catalog components for the Collaboration Portal, review the Designer - Catalog topics to create the correct Product Categorization Hierarchy and collection structure.

The Collaboration Portal Designer application will allow you to specify which Catalog data source you want to use to display your businesses' products and services. The Catalog Data sources must be configured through the Catalog Designer & Quote Designer and be activated.

In the Quote Designer, your catalog data source must be configured and active. In order for the Collaboration Portal website to retrieve your product properties and metadata, the Catalog Data Source has to be defined.

What you will learn

• How to configure the catalog data source
• How to define the Rich Media Object user types, business property sets, and product metadata to be retrieved and displayed in the Catalog Browser runtime user interface

Processes to follow into the Designer

Pre-requisites:

• Products are defined in the Catalog with properties (Business Properties)
• Products are defined with Rich Media Object user types
• Products are defined with Quote Field or Static values for the Pricing Methods and Lookups
• Products are defined in RTPE with prices
• Line templates are already defined in the Designer

In order to retrieve product data when the user clicks on the Add New Item action which opens the product catalog, the administrator defines the Catalog Data Sources. Data Sources define how external systems are connected with the quote (Pricing, Catalog, CRM ...).

In the Quote Designer Application

1. To retrieve product properties, Catalog Data Source has to be defined:

   Go to Data Model / Data Source / Catalog and open the catalog used to add Products in the quote

   
   
   
2. Ensure the following Catalog properties below are configured. If not click the Edit or Add Setting to modify/add the catalog properties:

1. After modifying the Catalog settings, Activate the quote model to ensure the Collaboration Portal model can utilize the catalog data source.

CONFIGURING THE CATALOG COMPONENT RUNTIME VIEW

In order to display your product catalog on the Collaboration Portal website, you must specify the

Catalog Data Provider name, Price Keys, and other component settings. Open the Collaboration Portal Designer application and click on the Collaboration Portal model you desire to update the catalog configuration for.

Ensure you are in Edit mode by clicking Edit in the top right if you are modifying the Active collaboration portal model.

STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
1	Select the Catalog component in the Design navigation pane on the left.
2	Specify the Main and Strikethrough Price Key CPE methods to be used for how list and strikethrough (discount prices) should be displayed.

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
3	Set the Catalog Data Provider to be used. The catalog data sources will be retrieved from the Active quote model. Select which catalog you want to display to your customers. For example you may only want your customers to be able to create and modify quotes for certain product categories. You can specify which catalog you want them to be able to view or use the full catalog.

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
4	Set the Rich Media Object User Type for the next catalog sections: Collection List Hero ItemSheet ProductLinks1 ProductLinks2 ProductLinks3 RecentlyViewed SearchResult TeaserList The possible values and their meaning are below: Inherited = Uses the primary image defined for the Collection Any = Uses any image defined for the collection Empty = Images with no user type will be used Custom = Uses a user defined RMO User Type. If this is selected you need to specify the User Type label. Note: If a non-valid user type is specified for custom, then no images will be displayed for the Collection.

	STEP INSTRUCTIONS	DESIGNER SCREENSHOTS
5	Set the Link Type to be displayed for product links that will be shown below the product details on the product details page. This is useful if you want to display product recommendations via Cross-Selling or Up-Selling link types. The Product Links will be displayed below the product business properties and spec sheet information.
6	After modifying the catalog component settings, click Activate in the top right to activate the Collaboration Portal model and test your changes by sharing a quote from CPQ.