Skip to Content
Author's profile photo Johann Fößleitner

Embedding a custom CSS style class to a SAPUI5 control

The visual display of SAP UI5 controls can be edited in various ways. One simple way is to define an own CSS style class and to embed it to the SAP UI5 Control. It is verry simple:

Extending the SAP UI5 INDEX file

Add a new css class to the index.html. Of Course, there are also other ways (external css file, … ) – but in this example we will add the style-class direct in the index.html file;

democssclass1

Adjusting the SAP UI5

Use the method addStyleClass to add the new css class to the sap ui5 control:

democssclass2

Result

Not very surprisingly, the font color is whit, black background and italic:

democssclass3

Assigned Tags

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

      Hi Johann,

       

      Can you also let us know how to use external css file. thanks in advance

      Author's profile photo Alexander Ryabov
      Alexander Ryabov

      Hello Rohan,

      just tried and it worked.

      Just add this line to HEAD in index.html:

       

      <link href="custom.css" rel="stylesheet" type="text/css">

      Author's profile photo Former Member
      Former Member

      hello Alexander,

       

      <link href="custom.css" rel="stylesheet" type="text/css">

      it was not working with classes(.hims), but it is working with Id(#hims).

      Author's profile photo Deep Agrawal
      Deep Agrawal

      Hi Himshwet,

      I also found the same

      custom css not working on classes eg (.hims)

       

      you found at any reasons for this?

      How to override standard SAP UI5 classes that applies in DOM?

       

       

       

      Author's profile photo Former Member
      Former Member

      I also tried the same one but it is working only in eclipse internal browser not working in any external browser what could be the issue?

      Author's profile photo Johann Fößleitner
      Johann Fößleitner
      Blog Post Author

      Hi,

       

      which external browser do you use?

       

      Regards, Johann

      Author's profile photo Amber .
      Amber .

      What if we are following Component approach by using Component.js instead of index.html and lets say deploying our application to launchpad. In that case ,we won't be writing our own index.html so where are we going to write our code of defining Custom CSS

      Author's profile photo Former Member
      Former Member

      You can add the following code to your createContent() method of your Component:

       

      var csspath = jQuery.sap.getModulePath("your.component.name","/foldername/filename.css");

       

        jQuery.sap.includeStyleSheet(csspath);

       

       

      Regards,

      Anjana

      Author's profile photo Former Member
      Former Member

      what do you mean by your component name is it the name of the view ??

      Author's profile photo Former Member
      Former Member

      No, it is the name of your component. The namespace that you have used for your project to be specific.

      eg: sap.trans.eg is the name of your component or the namespace of the app

      and your view name would be: sap.trans.eg.view.App

       

      Regards,

       

      Anjana.

      Author's profile photo Gabriel Souza
      Gabriel Souza

      Use into onInit  ...

       

      Correctly!!!!!!!!!! 100% for my use case.

      Author's profile photo Former Member
      Former Member

      How to do the same with XML view?

      Author's profile photo Former Member
      Former Member

      Did you get the answer ? I need to apply custom css to one of my form element.

      Author's profile photo Former Member
      Former Member

      how to apply Custom CSS for Calendar (sap.me.Calendar)