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 HANA 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 HANA Cloud Platform
  2. If you do not have SAP HCP account, then register on SAP HCP Trail Account from here
  3. Logon on to the SAP HCP account
  4. Enable “Portal Service” from SAP HANA Cloud Platform Cockpit

/wp-content/uploads/2016/09/pic1_1041196.png

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

  1. Publish mock Fiori Launchpad application
  2. Create and Design new theme in SAP Theme Designer Application
  3. Use the theme for SAP Operational Process Intelligence



Publish Mock Fiori Launchpad

  1. Click on “Portal Service” tile in SAP HCP Cockpit
  2. Click on “Go to Service” link,
    ℹ Note : This link will open the “Cloud Portal Admin Space” application in new tab/window
  3. Click on “Site Directory” option in the left panel
    /wp-content/uploads/2016/09/pic2_1041206.png
  4. Create new site of template “SAP Fiori Launchpad” with name of your choice
    This will open the new site configuration cockpit
    /wp-content/uploads/2016/09/pic3_1041207.png

  5. Close it and go to “Site Directory” in “Cloud Portal Admin Space”
  6. Publish the newly created site using “Edit” menu on the site tile

    /wp-content/uploads/2016/09/pic5_1041208.png

  7. Once publish is finished, the tile is updated with the Fiori Launchpad link on it
  8. Click the link, which opens the SAP Fiori Launchpad, you have just created
  9. Copy the link from browser address bar

Create and Design new theme in SAP Theme Designer Application

  1. Click “Portal Service” tile in SAP HANA Cloud Platform Cockpit
  2. Click on “Go to Service” link
  3. Select “Services and Tools” option in the left panel
  4. Click “UI Theme Designer” tile

    /wp-content/uploads/2016/09/pic7_1041211.png

  5. In “UI Theme Designer” application, select the row which has theme ID as “sap_bluecrystal”
  6. Click on “Open” button
  7. In the “Add Target Pages”, give the required information as :
    Link to Application     : <Mock Fiori Launchpad link>
    Name of Application : <Name of your choice like “UtilitiesTheme”>

    /wp-content/uploads/2016/09/pic8_1041224.png

  8. 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 tool

  9. 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
  10. 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 the following content in it to enable public access to this package.
    Save and Activate the file.

    /wp-content/uploads/2016/09/pic9_1041225.png

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

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


/wp-content/uploads/2016/09/pic10_1041226.png

      

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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply