CX Works

A single portal for curated, field-tested and SAP-verified expertise for your SAP C/4HANA suite. Whether it's a new implementation, adding new features, or getting additional value from an existing deployment, get it here, at CX Works.

Safe Way to Do UI Customizations

One of the main selling assets of SAP CPQ (Configure Price Quote) is its modern UI design and flexibility that CPQ provides with its customizations. It means that you can use arbitrary HTML as the code for almost any page in the application.
"How then do you provide page functioning?" is what one may ask. The answer is that with going that far with modifications of the out of the box solution you are taking over important responsibilities. 
Let us teach you what those responsibilities are, what is recommended to consider as the first choice and what are all the tools that you have in the UI-customization toolkit.

Table of Contents

Use layout setup in administration pages

Before we go with heavier and more powerful techniques, which is what software implementers by rule opt for, let us draw your attention to what CPQ offers already, as part of the setup, for many objects in the app.

For most of them, like quote custom fields here, you can set the position and order in the field setup itself:


Some modules, like Configuration Layout in products administration, offer drag and drop utilities to perform the mentioned setup:



Multiple objects offer system properties that determine its UI rendering and are included in the setup because of frequent use. Here, on the example of attributes, you will see "Spans across entire row" option that enables an attribute to take the hole horizontal line:



You can use properties like this for multiple UI customization workarounds. The previous one you can, for example, activate for a placeholder (empty space) attribute and by that direct Configurator to move to the new line, no matter what the screen size is.

The setup facilities depicted above are our recommended approach to layout elements in your UI.
"Why would I decide to go with an option that offers minimal set of ways to influence out of the box UI?" - might be your question here.
There are several good reasons:

  • You will learn later in this article about responsibility that you take over if you decide to customize a page HTML through responsive templates
  • CPQ has responsive design - it means that for all types of devices and browsers that it supports, the app is responsible to provide functional and tidy UI and neat elements layout.
    If you go with customizing HTML of even just CSS layouting, you will hardly test all the devices that we do and make sure your update works universally. As a rule, UI tweaks are tested just on the standard screens, in browsers that project team uses.
  • If something is not working after you implement your UI by using setup functionalities above - SAP will be responsible to fix it as we guarantee for the setup functionalities.
    If you go with fully custom UI and alter the page HTML or go far with CSS updates - SAP Support will return the issue to the project maintenance team.

UI brands and CSS

Every customer needs to change and fully adapt styling of the app to their company branding - this most often means coloring and logos.
For this CPQ offers the functionality of UI brands.

Individual users can be assigned to any brand, which is done in User setup. For each brand you can further define fully custom CSS in the following way:



Here, you can upload a brand new CSS file containing code created by your team.
The engine will, for every user belonging to the example brand, apply your CSS code atop of the system CSS - hence the resulting style will be a merge of the two CSS files.

Let us bring another reason for reaching out to CSS: not all pages in CPQ are covered in responsive templates.
One example of that would be the quote revisions page.
If there is a requirement to remove the option to delete an active quote revision, you do not have any means in setup to do that. Since the page content is also not exposed by responsive templates, the only way to perform this would be to remove Delete from the dropdown options, by using CSS selectors:


 .revactive select option[value="2"] {
    display: none;
}


"Why would I use a presentation-level technology like CCS to change logic of the app? That cannot be correct" - one might comment here.
In the next paragraph, as mentioned, you will learn about costs of using Responsive Templates - if there is, for example, a request to apply some detail-level change in the quote page it is much better to facilitate that through CSS than to go with a custom version of the whole quote-page template.
The CSS solution in the example above also has some stability risks, but you are expected to weight out the risks in your particular use case. Bear in mind the argument from the example of going with a custom version of one of the key quote-page templates.

Cost of use of Responsive Templates

CPQ also has built-in support to quickly overwrite html for big majority of the app pages. This is facilitated through Responsive Templates. 
You should just select the page, copy its code to the bottom textbox (or type in a complete new html there), mark the template as Default and CPQ will always use your html as the page code:



This seems quite handy - why would not you always use just this, as it offers the biggest flexibility of all ?
The issue is that when you modify the page html, CPQ will not be trying to merge future system updates to the page with your HTML - as the HTML can be literally anything. Even if a merging algorithm would have managed to merge the two nothing could have tested the page functionality and client-acceptability of the UI layout.
There is no difference between changing a single label or coding the whole page from scratch - you are becoming the owner of the page maintenance and the template is permanently frozen to your code version.

Does this mean that you are fully on your own at that moment?
No, the system will push notifications to the template history and you will see all system updates in the meantime. The page will look approximately like this:


Version 5 in the screen is the actual active version, 6 is just an unapplied entry in the file history that you can use to compare your file with the actual system version.

One might complain here: "Ok, so are you asking me to constantly check all templates, every day?"
The answer is No - CPQ has strictly defined release cycles and the sandbox is always deployed two weeks before the production. The reason is to give customers two weeks to test the new code version.
The two-window week is the only period at the start of which you should check your customized templates and work to merge the system updates or work to resolve the issues.

"Ok, but we are not an IT company" or "We probably cannot organize to complete production-ready development in two weeks" might be legitimate questions here.
There you also are not limited -  you can freeze updates in other (non-customized) templates in the system until the next release, if the templates' code conflicts with your customizations:



This way you will keep the original UI state (before the passed release) and have three more months to organize template code fixing and code merging. After that, the system updates will be forced for all non-customized templates.

All this still does not make the risks insignificant - a client company might not have the project-maintenance team and also side effects of non-applied system updates might stay invisible for long.
If you go with HTML updates of your page, you have to have the project maintenance plan set. This is why we advice that you go with alternatives before deciding to customize some of responsive templates.


Conclusion

CPQ offers multiple different means to modify the app UI. You have to be wise when choosing the right one and go with those which impose minimal stability risks (based on your post-go-live project plan).
We advise that you go with out of the box layout setup of UI elements and let the responsive design organize the flow of elements (as it knows the best what fits into CPQ page).

The system also has out of the box support for styling and CSS-level updates in the form of UI brands. 
If it is of importance for your project to go with custom pages that diverge from out of the box page content, than you might go with Responsive Templates. Still, for this you have to have a project-maintenance plan as your team takes over the pages' maintenance for the live of the project.

You can use the following links to do more reading on the customization techniques above: CPQ brandingResponsive Design FeaturesResponsive Design Customizations HelpResponsive Design Customizations Guide , but keep your attention focused on the risk assessment advice shared in the article.

SAP offers several different programs that might provide you with support on this or deliver implementation reviews. Please view the official page on Sales Cloud portfolio of services - it will give you more info and the starting links for individual offerings.