Using Responsive Templates

Each page in the application consists of at least one template. For example, the Catalog page consists of the CatalogPage template, while the ApprovalHistory page consists of  ApprovalHistoryPage and Editors/DelegatedApprovers  templates. Some templates are used on multiple pages in SAP CPQ. These templates are stored in the Shared page.

Responsive templates can be left as is. Core templates are always compatible with new SAP CPQ features; you don't need to modify them each time a release occurs. Preserving the original state of the core templates minimizes the risk of breaking changes and cause the software to work incorrectly. However, there's an option to customize environments by changing responsive templates. If you customize templates, manage them with each release. It's highly recommended that you customize responsive templates only when necessary and with minimal changes that can be easily tracked and modified.

Change the HTML content of any page in app while retaining its basic functionality: Use responsive templates, accessible at Setup → UI Design → Responsive Templates.

Drill through a sequence of dropdowns and find the exact section of an SAP CPQ page that you want to modify. Copy the default template to duplicate the default template (in the top pane) to your new template (in the bottom pane). The code in the lower pane is executed when the Quote Totals section is rendered for anyone assigned this template.

If you enable the Default checkbox, this template becomes the default HTML code for this section.

You can limit the visibility of customized templates to specific user groups. If you leave checkbox unchecked, the template will only be used when users of a particular user type visit the. For that to happen, you need to apply this template to one or more user types. For example, you can apply this template to one or more user types by assigning a custom template to the certain user type.

The Knockout framework keeps a link active between the browser page and ViewModel objects and another link between these objects and the server. You can access the Web methods on the SAP CPQ server by the JavaScript elements on the page.

The owner of the template isn't reminded of updates made after a customization. However, the template's History page displays a line for every update to the system version of the template. Consult the updated code to determine whether changes to the code are required.

For every SAP CPQ release that follows your implementation's go-live, the maintenance team verifies that every template with an updated system counterpart continues to operate correctly, according to requirements. Consider the impact on the maintenance team that is responsible with keeping customized pages up to date. Some changes could go unnoticed by your testing procedures.

To avoid breaking changes, fix the issues independently by editing the customized templates to ensure they're compatible with other templates on the same pages before the next release is deployed.

Freeze templates are a valuable feature that allows you to revert an uncustomized (original) template to its previous SAP CPQ state. Here are some key advantages of using this feature:

• Rollback for Stability: If breaking changes disrupt your workflow, freezing the template enables you to return to a stable version, minimizing downtime and operational issues.

• Support During Transition If you encounter issues from breaking changes that you can't resolve on your own before the production release, rolling back the template provides a safeguard, allowing you to continue working without interruptions.

By using the freeze templates feature, you can maintain continuity in your operations and effectively manage changes in the SAP CPQ environment.

The onboard development tools in SAP CPQ help locate a template page element that needs customize. View the page source and scroll to the nearest comment denoting the start of a responsive template.

Right-click any element available in CPQ and select Inspect. The HTML displays. Scroll up in the Elements panel and the item's HTML code is displayed by the Section/Items template.

The following document provides more information on customizing responsive templates.

The most complex toolkit in the SAP CPQ UI customization framework combines the use of the Knockout JavaScript framework, extension functions, and JavaScript inside responsive templates.

Knockout is an implementation of the MVVM pattern (Model-View-ViewModel). Inside the client browser, nested JavaScript objects provide the ViewModel, which stores SAP CPQ object data.

ViewModel objects reside between rendered pages in the browser and the SAP CPQ server in the background. An update in ViewModel is immediately reflected on your screen (in View) and then automatically synchronized with the server back end. This behavior happens when you bind individual HTML elements in your template to specific properties of ViewModel objects. Both ends of the sync process are handled by Knockout.

This process allows you to configure custom JavaScript logic to set and control behavior dynamically of UI elements. ViewModel objects and the properties (interface) they expose to a given UI control are context-dependent based on the current HTML section.

Find out which objects are accessible for a given UI element by using the Knockout context debugger (Knockouts) Chrome extension.