Custom branding, customizations, and theming are some of the most important activities that every user considers before finalizing on a solution when it comes to organizational portals. SAP Enterprise Portal has strong theming and custom-branding capabilities about which users are all well aware. Recently, SAP has released its cloud-based portal, commonly knowns SAP HANA Cloud Portal or just Cloud Portal. However, do not mistake SAP HANA Cloud Portal for a replacement for the traditional SAP Enterprise Portal. You should not expect the theming and branding processes to be similar. Unlike in SAP Enterprise Portal, themes are developed in a programmable stylesheet language called Leaner Cascading Style Sheets (LESS). I explain the process of customizing pre-delivered themes for the benefit of portal developers working on SAP HANA Cloud Portal. You can also take the learning further to develop a custom theme. SAP HANA Cloud Portal provides out-of-the-box theming and customization support. At this moment, there are seven standard themes available for the SAP HANA Cloud Portal. However, no theme editor is available at the moment and you must therefore understand how Cascading Style Sheets (CSS) and LESS work. It is important to have a good understanding of CSS concepts, which, in turn, helps you understand LESS. I first talk about LESS and its features including variables, operations, functions, and mixins, and then go on to explain how to use these in a LESS theme in SAP HANA Cloud Portal.

Prerequisites

• A basic understanding of CSS
• An SAP HANA Cloud Portal trial account
• A basic understanding of how to use Crunch or any other LESS editor

Introduction to LESS

LESS opens new avenues and extends the capabilities of CSS. With LESS, you can use global variables, which are similar to the constants used in programs. These variables can store values at a global level and can be applied to an entire file or just to a single property whenever required, thus reducing overhead efforts. For example, consider a theme customization activity that involves many color codes. Whenever you refer to a color property in CSS, you have to manually mention the color code. How easy life is if you instead can define the color once and then just refer to the variable name.

Working with a LESS Editor

For the purpose of this article, I am going to use Crunch. Crunch is a freely available software that runs with Adobe Air. You can download Crunch from here: https://crunchapp.net. Crunch allows you to create and edit LESS files and compile them in static CSS. Note that for SAP HANA Cloud Portal, you do not need LESS JavaScript library support. However, if you are going to replace CSS files in your portal application (such as a logon page or SAPUI5 application), then you need to specifically refer to the LESS JavaScript library. You can do this by using the piece of code shown in Figure 1. This means you first need to download the JavaScript library and copy it in your project. This file can be downloaded here: https://lesscss.org/.

Crunch Editor

Figure 2 shows a general overview of the Crunch editor. As you can see, you can either import an existing .less file and customize it to meet your branding requirements, or you can create a new file. Figure 3   Now that the context is set, let’s begin with SAP HANA Cloud Portal. You first download an existing or standard theme file from SAP HANA Cloud Portal and then import this file into Crunch for customizations. I’ll explain variables, operations, functions, mixins, and other features offered by LESS. After customizations are complete, I’ll generate a LESS file from Crunch and upload the custom theme file into SAP HANA Cloud Portal. This will complete the theme-customization process for SAP HANA Cloud Portal.

Step 1. Download a Standard Theme from SAP HANA Cloud Portal

Irrespective of whether you are working with an SAP HANA Cloud Portal trial account or a full license account, the process remains the same. Log in to your SAP HANA Cloud Portal account and navigate to the Themes tab (Figure 4). Figure 4Figure 5  

Step 2. Import the LESS Theme File into the Crunch Editor

From the Crunch editor follow menu path File > Open File and then browse to select the downloaded file (Figure 6). Figure 7 If you have worked with CSS, you will find working with LESS is similar to working with generic CSS. However, there are some variables defined with @variable_name and its associated values that are displayed. For example, the site font color is applied to the entire text of the site. This is a global property, defined as @SiteFontColor: #f2f2f2. Therefore, whenever you want to refer to the site font color, refer to it with SiteFontColor instead of #f2f2f2. Similarly, there are some more variables that you can observe in the LESS file you just downloaded.

Variables in LESS

A closer look at variables shows that variables in LESS are similar to variables defined in programming languages. You can use variables in LESS to store a value and then use the variable instead of the value itself whenever required. Refer to the code in Figure 8 to understand how to define a variable and use it. Similarly, you can also define the font family at a global level by using a variable. Although it has no effect on the speed at which a CSS or a LESS file is parsed while executing the application, variables provide ease when it comes to customization. Imagine you want to replace the existing color with some other color code. Instead of manually changing the color code everywhere in the file, all you have to do is change the value of @link-color and you are done.

Operations in LESS

With operations, you can get more control over generic CSS. You can multiply, add, or subtract values from variables to change something for a couple of properties. When change is not required at a global level, operations can work with global variables and still achieve the required effect. For example, say you need a white color as the background color. However, there is a part of the page where you need blue as the background color. In this case, you can use operations and convert white to blue for just one time and at only one place in the page. You can do this by referring to the background color global variable and adding some hex color code value to arrive at the blue color. This way, you can still use global variable and its white value without changing the code anywhere else. The code in Figure 9 defines a button that uses a variable called @button_values. You can manipulate the value of this variable to meet the required effect. Similarly, you can add or subtract two variables and even color codes.

Functions in LESS

There is a lot more you can do with functions in LESS. Especially when it comes to manipulating colors, you can lighten, darken, saturate, or fade-in/-out colors on the fly. Figure 10 shows the code to darken the site background color. Here is the darker color:

Mixin in LESS

Apart from variables, operations, and functions,, there is one more feature that is especially useful when you work with a browser-specific prefix such as border-radius. The code in Figure 11 is used to apply a border radius to a button. Now, imagine a situation in which there are many more buttons and you have to copy and paste the same code everywhere. Instead you can use the mixin code (Figure 12).  

Important Parameters for the SAP HANA Cloud Portal Theme

Now that you understand the features of LESS, I’ll take a look at the important parameters used for the SAP HANA Cloud Portal theme.

Basic Parameters

Figure 13 shows the basic site color and image parameters that are most commonly used to change the background or a logo image.

Advanced Parameters

Figure 14 shows font, font-family, and stylistic parameters that are changed often. However, priority wise, the logo and background parameters are still the most commonly edited parameters.

Widget Parameters

An SAP HANA Cloud site works on the basis of a widget. Every piece of content, including SAPUI5 applications, is loaded inside a widget. The parameters in Figure 15 are especially handy when you want to customize a widget area.

User Interface (UI) Control Parameters

The parameters in Figure 16 are handy when you want to customize the way SAPUI5 applications are rendered in the SAP HANA Cloud Portal site.

Smartphone Parameters

The parameters in Figure 17 are used to control smartphone-related properties such as header borders and header title font sizes. At this stage, I assume you have customized a logo image or a font color and ready to upload a customized theme onto the SAP HANA Cloud Portal.

Replacing Standard Images

It is important to understand how you can replace existing images with your organization’s logo, custom images, or icons. There are two ways to do so in a standard theme file. Either you upload the image or you convert it to a data URI and then use the URI instead of a physical image. A data URI is an alphanumerically converted image.

Upload Images to the SAP HANA Cloud Portal Document Repository

This is the SAP-recommended way of using custom images in SAP HANA Cloud Portal themes. Data URI is recommended if the primary use of SAP HANA Cloud Portal is on a desktop or a laptop. However, if the primary access point is a mobile device such as a tablet or a PDA, then uploading images is recommended. You can upload images to the document repository on the SAP HANA Cloud Portal dashboard. You then refer to the custom image with an uploaded URL. Log on to the SAP HANA Cloud Portal and navigate to the Documents tab (Figure 18). Figure 19 Start uploading your custom images in the folder that you just created. Once the files are uploaded, copy the image link by hovering over the Share Link button (Figure 20). When you hover, you are given a popover that contains the hyperlink. You click the hyperlink in order to get the link or you can simply copy the link by selecting it with mouse button.  

Convert the Image to a Data Uniform Resource Identifier (URI)

When page-loading speed is of utmost importance, you can convert the image to a data URI. A data URI is a long string of characters. The major advantage provided by a data URI is that it saves an HTTP request. This way, you can eliminate an HTTP request made to SAP HANA Cloud Portal to fetch the required image. This translates into an extremely fast page loading time. In addition, because there are fewer HTTP requests and fewer objects to be fetched from the server, the document size of your page is significantly reduced. This is one of the most ignored points when it comes to theme customizations. Figure 21 Figure 22  

Step 3. Export the Crunch File from the Crunch Editor

Now that you have made changes to the theme file, you export the custom theme from the Crunch editor. Click the Crunch File option to export a file in a LESS format that can directly be uploaded to SAP HANA Cloud Portal. You find it on the same screen you arrive at after uploading the file to Crunch. This is similar to Figure 7. However, Figure 7 was used to show the imported file. Figure 23 shows how to export a file from Crunch. Note the blue rectangle highlighting the action at the top right. After you complete step 3, the Crunch editor saves a LESS file on your local system. You upload this file to the SAP HANA Cloud Portal.

Step 4. Upload the Custom LESS theme to the SAP HANA Cloud Portal

Log on to the SAP HANA Cloud Portal account and navigate to the Themes tab (Figure 24). Click the Add Theme button. Figure 25

Step 5. Change the Site Theme

Now that you have uploaded the custom theme to the SAP HANA Cloud Portal site directory you can change the default theme and then take a look to see whether the changes are made. Navigate to site for which you want to change the theme (Figure 26). Follow menu path Edit Site > Design Settings and select the newly uploaded file. Figure 27