Migrating stylesheets in Oracle CPQ Cloud

on

Since it's inception, Oracle CPQ Cloud (aka BigMachines) was more about functionality and less about design and style.

Out of the box, Oracle CPQ Cloud offers the ability to create a custom style to all pages using primary point and click settings. Usually, this is not enough as most clients are used to have experiences with Google, Apple, Amazon, Salesforce and the likes, which raised the expectations concerning web design.

CPQ Consultants have to get creative and create very nice looking frontends using raw CSS. Most of the time the work is done outside CPQ, and the result is stored as an alternate CSS file in the Stylesheet Manager or for minor changes within <style> tags in the Header HTML under Header & Footer. Both approaches work when you have a small team and not many style changes.

Thing get difficult when you have a bigger team and style changes in multiple modules places within the commerce and configuration modules.

Main challenges being:

  • the alternate stylesheets are not migratable through Migration Center as per Oracle help documentation;

  • there is no way to compare the style changes between environments;

  • it's confusing and may take a longer time to migrate manually;

Good news is, there is a better way to do that, and the change would take about 5 minutes. All you need to do it to store the alternate file in File Manager and reference to it from CSS through an @import statement[1]. The file that you upload as Alternate CSS File in Stylesheet Manager would look like this:

/*
'style' is the folder where you will the file in File Manager
'alternate.css' is a copy of the file you were previously uploading as Alternate CSS File in Stylesheet Manager
*/
@import url("./image/style/alternate.css");
This solution allows us to:

  • migrate the stylesheet through Migration Center (WOW !!!);

  • ability to compare the style changes before migration;

  • it is becoming part of your migration and takes a click to select the file;

  • you can have multiple CSS files for different modules

Hope you enjoyed the article !

--
1. https://developer.mozilla.org/en-US/docs/Web/CSS/@import

Comments

Post a Comment