CRM and CX Blogs by Members
Find insights on SAP customer relationship management and customer experience products in blog posts from community members. Post your own perspective today!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SAP CPQ - User Interface Design

Lakshmana_K
Explorer
‎03-26-2024 7:17 PM

SAP CPQ - User Interface Design

The following document contains useful information for managing user interface in SAP CPQ. Will discuss the following modules in UI Design in SAP CPQLakshmana_K_0-1709819644243.png

Responsive Templates

Responsive templates are building blocks of all pages in SAP CPQ’s Responsive Design. Templates define the look and feel of the application – colors, icons, the order in which buttons are displayed and so on.

Responsive Template Customization in Setup

 In the Responsive Templates page, you can see the list of all customized templates which exist in your environment, as well as the Freeze Templates functionality. You can also create new customized templates.

Template Versions

In the History tab of a custom template, you can see a chronological list of all versions of that template.

Freeze Templates

This feature gives you an option to roll back the no customized (original) templates to the state they were in the previous SAP CPQ release.

Responsive templates are building blocks of all pages in SAP CPQ’s Responsive Design. Templates define the look and feel of the application – colors, icons, the order in which buttons are displayed and so on.

Points to Note:

  • Each page in the application consists of at least one template.
    • For Instance:
      • The Quote list page contains 3 templates, Customize according to your needs in the effective responsive template.
        • QuoteListComponent
        • QuoteListFilterBar           
 
 Lakshmana_K_2-1709819644253.png

 

                              QuoteListFilterEditor

Lakshmana_K_4-1709819644258.jpeg

  • Some templates are used on multiple pages in SAP CPQ. These templates are stored in the Shared page.
    • For Instance:
      • If you see the picture 1 and 2 below, you will see template main menu is being used in both quote list page and catalog page.
        • This is quote list page, yet the main menu is used here.

Lakshmana_K_2-1711177273407.png

 

  • This is Catalog page, yet the main menu is used here.

Lakshmana_K_3-1711177325486.png

  • In Setup > UI Design > Responsive Templates, you can see which templates SAP CPQ pages consist of if you click Add New and scroll through the contents of Page and Template dropdown lists respectively.

Lakshmana_K_5-1711177635655.png

Responsive Template Customization in Setup

In the Responsive Templates page, you can see the list of all customized templates which exist in your environment, as well as the Freeze Templates functionality. You can also create new customized templates.

Lakshmana_K_4-1711177526102.png

Lakshmana_K_6-1711177710119.png

 

How to customize Templates in SAP CPQ?

Templates can be customized in the Responsive Templates page (Setup > UI

Design > Responsive Templates) by copying the provided original template, editing it and making it Default in the environment.

  • Setup > UI Design > Responsive Templates > Add New

Lakshmana_K_7-1711177790939.png

  • Here you will see two sections.
    • General Info
    • Content

Lakshmana_K_8-1711177892009.pngIn

  • In General Info section:
    • Select the page you want to customize.
    • Select the template you want to customize.
    • Give a name to your customized template.
    • Add some description to the template (Optional)
    • Toggle the is default to true (if not done to true your customizations do not apply).

Lakshmana_K_9-1711178336873.png

 

  • In Content section:
    • Do copy default template.
    • Default template will be copied to new template down.
    • Do your customizations and save the template.

Lakshmana_K_10-1711178389034.png

Template Versions

  • Template versions are states of development a template has gone through since being introduced into SAP CPQ. The list contains core templates which are added when a new release occurs (System templates) and customized templates that have been created by administrators in your environment. One of the template versions is marked as active, which means that it is currently applied to your environment’s UI.
  • When a new template version is added to SAP CPQ, it will be displayed above all other versions of that template.
  • If a customized template version is set as default, and a new core template version is added to SAP CPQ, this new version will be displayed at the top of the History list. However, it will not be applied unless you deselect the Is Default checkbox next to the currently applied custom template version in the Template tab.
  • The History tab is also useful for comparing two versions of templates. You may want to do this if you wish to see in what ways the new System template differs from the customized template that was previously applied in the environment. You can also compare version of the custom template you’ve customized with the version of the template that has been customized by another administrator in your environment.
  • To compare the templates, tick the checkboxes in the Version column, and click Compare. You can compare two template versions.

Lakshmana_K_11-1711178610329.png

Freeze Templates

This feature gives you an option to roll back the no customized (original) templates to the state they were in the previous SAP CPQ release.

The SAP CPQ development team only manages the original templates that customized templates are derived from. So, when a new release occurs, bear in mind that:

  • If the core template which you have customized has been modified in this release, you should apply the added changes to your customization, as well. If you don’t, some of the newly added SAP CPQ functionalities may be unavailable to you.
  • If the core template located in the same page as your customized template has been modified, check if these templates are compatible. If they aren’t, breaking changes may ensue, and you need to fix them independently or with the help of SAP CPQ Support team.

If the breaking changes occur in a page when the release A is deployed, and you didn’t manage to apply the necessary fixes to the customized templates before the release B is deployed, you can use the Freeze Templates feature to roll back all no customized templates on the broken pages to the state they were in during the release A. In this way, you will have more time to deal with incompatibilities between templates.

Rollback from SAP CPQ to version A can be applied only until the version C is released. Once that occurs, all pages will be deployed to the version C, new breaking changes may occur, and the no customized templates can only be rolled back to the version B.

Page rollback is only a temporary solution. If you roll back no customized templates, the pages will work as they did in the previous release, but you may not see new functionalities or fixes that were applied to the environment with the new release. For this reason, once you freeze templates, you need to apply necessary changes to templates as soon as possible, or try to avoid using this feature altogether by fixing templates on broken pages before the release is deployed.

This feature should ONLY be used in the following cases:

  • if the breaking changes prevent you from working.
  • if you can’t fix the issues caused by breaking changes on your own in the period between the sandbox and the production release.

 

Lakshmana1_4-1706763996598.png     Implementing SAP CPQ can lead to significant improvements in sales processes, driving efficiency, accuracy, and overall customer satisfaction.

In this article I have written a User Interface of SAP CPQ.

Stay tuned for Other Informative blogs related to SAP CPQ.

 

Popular Blog Posts