Skip to Content

Styling UI5 Controls in HANA Cloud Portal Widgets

What does this mean?

When styling your HANA Cloud Portal site you use a set of colors that affect various components within the site.

If your site contains Open Social widgets/extensions with UI5 controls, you would like to apply the same styling of the site on these controls.

What do I need for this?

In your widgets you’ll need to add “sap-theme” as a required feature:


Besides that, you simply need to edit the relevant LESS parameters in the default theme.

We take care of the rest for you.

Read Inbal Sabag’s blog about Using LESS in HANA Cloud Portal for the technical aspects of modifying the default theme.

Check out HANA Cloud Portal Dev Guide section about Designing Site Themes for more info.

Which parameters should I modify?

After downloading the default theme use an editor (such as Notepad++) and search for ‘UI5’.

We’ve inserted comments above the relevant parameters to state that they affect UI5 controls.

You will also find a section within the theme containing a set of parameters that will affect only UI5 controls:

Besides these UI5-exclusive parameters the following parameters will affect the site as well as the UI5 controls:

@PageNavigationBarBackgroundColor    (Affects UI5 sapBaseColor)

@WidgetBackgroundColor                        (Affects UI5 sapBackgroundColor)

@SiteHeaderBorderTopColor                   (Affects UI5 sapBrandColor)

@SelectedPageTextHoverColor               (Affects UI5 sapHighlightColor)

@WidgetFontColor                                   (Affects UI5 sapTextColor)

How do I see the changes?

After you finished editing the theme, upload it as a new theme and assign it to your site.

Now either reload the authoring space to see the full effect, or publish the site and open it.

What if I need to change something that isn’t currently affected?

Check out the Expert Mode section in Advanced Theming in HANA Cloud Portal.

In any case, we’d be happy to hear about that, and if needed and possible extend our capabilities.

You must be Logged on to comment or reply to a post.
  • Hi Rony,

    I am customizing theme for my UI5 application, I embedded UI5 application in URL widget instead of creating new widget. The colors which i changed for UI5 controls in .less file are not reflecting. Now, please suggest me where I can include the 'sap-theme' code to reflect the changes into my application.