Design your own theme for SAP Operational Process Intelligence using SAP Fiori UI Theme Designer

Ever since we have released SAP Operational Process Intelligence, there have been requests for customization of workspace for a seamless business user experience matching the brand of a company. The most common requests are changing the company logo, background image, font and colors of text and many more based on company’s branding and marketing strategies.

We have now addressed these requests through SAP Fiori – UI Theme Designer – which is a comprehensive web-based tool that can be used to design, build and store the themes in SAP Cloud Platform. Later these themes can be quickly applied on SAP Operational Process Intelligence application, without any hassle and with few additional URL parameters. The intention was to give our users a high quality, easy-to-use and full range of rich customization options to design-your-own-theme.

In this blog, I will cover the steps required to build and use a theme for SAP Operational Process Intelligence, based on company’s individual brand. These steps are very simple to run and follow. I have personally used the theme designer for few of my customers, and the results were very satisfactory.

Before we start with theme designer, there are some prerequisite that you should know:

1. Theme designer is ONLY supported in SAP Cloud Platform
2. If you do not have SAP CP account, then register on SAP CP Trail Account from here
3. Logon on to the SAP CP account
4. Enable “UI Theme Designer” service from SAP Cloud Platform Cockpit

The theme can be designed and used in 2 simple steps:

1. Create and Design new theme using SAP Theme Designer service
2. Use the theme for SAP Operational Process Intelligence

Create and Design new theme in SAP Theme Designer Application

1. Click “UI Theme Designer” tile in SAP Cloud Platform Cockpit
2. Click on “Go to Service” link
3. Click “Create New Theme” option in the top panel
4. In “NewTheme” popup, select the base there from the drop down as “SAP Blue Crystal”
5. Click on “Step 2” button
6. In the “Name your theme” section, give the required information as :
   Theme ID     : <any name for the ID like opinttheme>
   Title  : <Name of your choice like “UtilitiesTheme”>
7. Click on “Create Theme” button
8. In the theme page, click on SAPUI5 Application Previews and
   select “SAP Fiori Launchpad” checkbox
9. Click on “+” button next to “Target Pages and give the required information as :
   Link to Application     :  <Link to the theme designer page>
   Like: https://themedesignertrial.dispatcher.hanatrial.ondemand.com/index.html
   Name of Application  : <Name of your choice like “UtilitiesTheme”>
10. The given application should be loaded within the center section of the UI theme designer application. Now you can use various style options in the right panel of the UI theme designer application to design your theme.Note:  As the theme designer is a WYSIWYG editor, you can preview your changes as and when you make them in the too
11. Once you are done with the design, export the new theme by clicking on Theme –> Export option on the top left corner of the page
    1. In the “Export” dialog, enter the theme id and name of your choice.
       ℹ Note: This id has to be all in small letters, without any spaces and it will be used to provide theme for SAP Operational Process Intelligence
    2. If you want to support your application in RTL mode(Right to Left like in Arabic languages), check “Support RTL” checkbox
    3. After entering all the required details, click “OK” button

1. It will take few minutes to create and save the zip file with the new theme content.
   ℹ Note: Depending on your browser settings, it might ask the location to save or can save automatically to the pre-defined location

Use the theme for SAP Operational Process Intelligence

1. Open SAP HANA Web-based Development Workbench:
   http://<host>:<port>/sap/hana/ide/editor/
2. Login with a HANA user, who has access to create package
3. In the editor, create new package under “Content” folder (For Example: themes)
4. Import the exported zip from previous section into the newly created package using Import –> Archive option on the package.
5. Create an xsapp file with empty name (“.xsapp”) in the new package. Save and Activate the file
6. Create an xsaccess file with empty name (“.xsaccess”) in the new package and add the following content in it to enable public access to this package.

   { 
   	"exposed":true,
   	"authentication": null,
   	"authorization": null
   }​

7. Save and Activate the file.

   The new theme is ready to be consumed in SAP Operational Process Intelligence application

8. Open SAP Operational Process Intelligence space.me application using following URL:

http://<hostname>:<port>/sap/opi/pv/workspace/?sap-theme=<Custom Theme Id>@<Custom Theme Package>

hostname                        : <hana server hostname>,

port                                 : <hana server port>

Custom Theme Id            : Theme id that is specified while exporting the theme

Custom Theme Package  :  relative package path where the custom theme zip is imported

For Example:
http://hanahost:8082/sap/opi/pv/workspace/?sap-theme=insurancethemeid@/opint/themes/insurance

SAP Operational Process Intelligence now opens in the applied theme.

Isn’t looking good?

With these few simple steps you can build your applications on your own custom themes. In this example, I have used very simple customization properties to build this theme – and it is just scratching the surface. You can do a whole lot of designing based on your need and requirements.

Be sure to give us your feedback and suggestions, after you use the theme designer to create your theme for SAP Operational Process Intelligence