Skip to Content
Author's profile photo Former Member

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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.



      Author's profile photo Eliel Schurman
      Eliel Schurman

      Hello Prasanna,

      In url widget you cant use the open social theme feature.

      You should create your own spec.xml and use the theme feature.

      I would recommend you to follow cloud portal documentation to adapt your SAPUI5 application accordingly.

      SAP HANA Cloud Portal Documentation



      Cloud Portal Development.

      Author's profile photo Former Member
      Former Member

      Hi Eliel,

      Thank you for the suggestion. I will create application for widget creation and will check the theme feature.



      Author's profile photo Former Member
      Former Member

      H Eliel,

      I tried the sample application given in the link Advanced Theming in HANA Cloud Portal
      above and I deployed in Hana Cloud Platform trial account.

      I kept  <Require feature="sap-theme" /> in spec.xml.

      Widget got created successfully but the styles which are there in .less file are not reflecting for the UI5 controls (Button).

      I checked in developer tools, only .css styles are loading in run time.I did not find any .less styles.

      Please suggest me how to apply style to the UI5 controls.



      Author's profile photo Eliel Schurman
      Eliel Schurman

      spec.xml should look like:

      <Require feature="sap-theme">

        <Param name="include-ui5">true</Param>


      See SAP HANA Cloud Portal Documentation for more info.

      Author's profile photo Former Member
      Former Member

      Thanks Eliel. It worked after adding the <Param> tag.