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 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 a SAP CPQ page you want to modify. Select Copy 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 will be executed when the Quote Totals section is rendered for anyone assigned this template.

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

You can limit 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. Web methods on the SAP CPQ server can be accessed by the JavaScript elements on the page.

Important: When deciding to modify responsive templates to implement a given requirement, remember that you will now own that page's functionality. You are now responsible for keeping up with updates to the system templates. SAP CPQ will not merge later updates to its HTML templates with your customized version.

The owner of the template will not be reminded of updates made after a customization. However, the template's History page will display 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 implementation maintenance team will verify that every template with an updated system counterpart continues to operate correctly according to your requirements. Consider the impact on the maintenance team tasked with keeping customized pages up to date. Some changes may go unnoticed by your testing procedures.

Note: It is recommended to exhaust all other options before choosing to modify the HTML. This approach should only be considered when the benefits outweigh the maintenance costs and risks.

Two options for avoiding breaking changes:

• Fix the issues independently by editing the customized templates and making them compatible with other templates in the same pages before the next release is deployed.
• Seek assistance from SAP CPQ Support Team.

Freeze Templates:

Freeze templates is a feature that provides an option to roll back an uncustomized (original) template to its previous SAP CPQ release state. Consider rolling back the template for the following reasons:

• 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.

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

Right-click on any element available in CPQ and select Inspect, the HTML will display. Scroll up in the Elements panel and the item's HTML code will display by the Section/Items template.

The following document provides more information on customizing responsive templates.

Let's consider the tools available to modify page HTML.

Razor is a markup syntax used by .NET for adding server-based code to web pages. It is a server-side markup syntax much like ASP and PHP and supports C# code to insert dynamic elements into your HTML.

For example, the following statement allows you to dynamically nest the contents of another template inside your current template:

@Html.PartialWithNameAsComment("TemplateNumber2")

In addition to the official Microsoft Razor pages, you can read more about Razor in SAP CPQ at the following URL.

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 backend. This 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 allows you to configure custom JavaScript logic to dynamically set and control behavior 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.