Responsive Design (RD) can be made a default option for all new tenants.

While differences between RD and Classic Design (CD) continue to exist, all engines are the same:

  • IP Scripts
  • CPQ Rules
  • Most Setup configurations

Supported Features

In Cart

  • Partial Ordering
  • Reverse Search
  • Promotions

In Catalog

  • Obsolete Products
  • Compare Products & Product Details
  • Configurator – template per product per tab
  • Badgeville Support
  • Advanced Customizations and Customizations Help

To find out about obsolete features in Responsive Design click here.

The following pages are part of RD but, for now, the visual design will not adjust in accordance with the changing window size. They are also not based on REST API and do not support RD customizations.

  • Quote Attachments (Documents tab)
  • Document Generation
  • Bulk Validation
  • Bulk Quote Reassign
  • Company Administration
  • Import/Export Customers
  • Manage Content Documents
  • Manage Document Templates
  • Manage Generated Documents
  • Manage Pricebooks
  • Manage Simple Products
  • Manage Tables
  • Manage Users

Differences Between Classic Design and Responsive Design

Take a look at the list below to learn about differences between the Classic and Responsive designs.

  • Internet Explorer 8 is not supported


  • Unlike in CD, the RD Catalog doesn't include Custom View as all features built in RD are customizable. It includes the standard Tabular and List views.

User Page

  • The Recent activities list on the User Page is located on the left-hand side in CD. In RD, this list is located on the right-hand side under the clock icon.


  • Quick Add Products function: in CD you could search by Name/Description or Part Number in two separate entry boxes, but you couldn't add the quantity of the found products. In RD you can search for the products by Name/Description or Part Number in one entry box and define quantity on the spot.

  • In CD the list of available actions, displayed horizontally, is the second item from the top. In RD, the list is located on the left-hand side with the actions displayed in vertical order.

Quotes Tab

  • In CD, the Actions display is located farthest on the right-hand side of the table, while in RD it is the first item on the left-hand side.

  • In CD, the Search Filter is accessed by clicking the Search icon at the top right-hand. It is then displayed in the Quotes tab. In RD, the Search Filter is accessed by clicking the Filter icon directly in Search.

  • Ability to select a home page after login
  • Favorites have been expanded to include more features

Cart item custom field localization

In responsive design (RD), custom field localization is managed through dictionaries. If you want to translate a custom field for a particular language, follow these steps:

  • Go to setup
  • In the menu go to GeneralDictionaries
  • Choose language that you want to translate a cart item custom field
  • Add new dictionary key by clicking “Add new” button

A dictionary key needs to follow the example: QuoteLayout.Columns.Name_Of_Custom_Field
Name_Of_Custom_Field must be replaced with the custom field name.


Let’s assume that you have already added a cart item custom field named “a_sample_cart_item_custom_field”. Also you have set up Quote Layout Permissions, so you are able to see a newly created cart item custom field on the Quote.

When you create a new quote, or open an existing one, beside standard columns (quantity, item name, discount amount, margin %, etc), you will see your cart item custom field as a new column. A column header will be QuoteLayout.Columns.a_sample_cart_item_custom_field. (See figure A)

Figure A: New cart item custom field is not yet translated

In order to translate this custom field, follow above described steps, and translate the column. In this example, we translated the column to English US language which is set as default language for the currently logged in user.

Now, when you open your quote you will see a newly created cart item custom field translated. (See figure B)

Figure B: New cart item custom field translated

Display product image in Responder during configuration

You are allowed to customize product configuration template in order to display image of the product that is being configured. Based on your decision where you want the image to be displayed, the particular template can be customized.

If the product image should be displayed, CPQ by default displays the standard product image. If one is not defined CPQ checks whether the large image is defined, and if it is, it displays the large image. If neither is defined, then CPQ checks if the application parameter “Use Default Product Image” is set to true. If it is, the default image is displayed. Default image is defined with the application parameter “Default Product Image Name”.

Both application parameters can be found and set at Setup > General > Application Parameters, under tab Product Catalog.

Our example demonstrates how to customize default responder template and instruct CPQ to display product image at the top of the responder.


Our product named “Car” has both images defined - the standard one and the large one. In order to display product image at the top of the responder, we updated responder template. Follow next steps to do the same.

Go to Setup > UI Design > Responsive Templates, then click Add New. Screen for defining and editing template is displayed. (See Figure 1)

Figure 1 - edit template

Select the particular template that you want to modify. We selected “ResponderForProductView” template, that is part of “Configurator” page. (See Figure 2)

Modify template (HTML markup and knockout.js directives) according to your needs to format the image display. You can see in the Figure 2 how we implemented the change. You can use the same markup (provided below the Figure 2) that we have used, or you can implement it the way you want.

Figure 2 - insert HTML markup and knockout.js directives to display the product image

Code that should be added follows.

<div class="image-holder">
  <img data-bind="attr: {src: productImage}" class="img-thumbnail" style="margin-left: auto; margin-right: auto; display: block;" />

When you are in configurator and configure the product, its standard image (if defined) is displayed at the place in responder where you put your code. (See Figure 3)

Figure 3 - Standard product image in the Responder

If standard image is not defined, then large image is displayed. (See Figure 4)

Figure 4 - Large product image in the Responder

Hidden calculated attributes in knockout context

This feature gives you the ability to define which hidden attributes should be available through knockout context no matter which tab in the configurator you are working in. To make a hidden attribute available in knockout context you should tick an ”include in KO context” option under product attribute definition page. (See Figure 1)

Figure 1 - Include the hidden attribute in Knockout context

Each hidden attribute that is set to be available in knockout context exposes the next set of data:

  • PA_ID
  • StdAttrCode
  • Name
  • Hint
  • Label
  • UserInput
  • Quantity

Figure 2 demonstrates the availability of the hidden attribute's data in knockout model.

Figure 2 - Part of json that holds information about the hidden attribute

Having data available in knockout context gives you more flexibility when it comes to performing some data calculations and manipulations based on that data.

You are here: SAP Sales Cloud CPQ Online HelpRESPONSIVE DESIGN FEATURES