Skip to Content
Actions

Embedding a custom CSS style class to a SAPUI5 control

January 6, 2015 | 9,485 Views |
Follow

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

To report this post you need to login first.

13 Comments

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

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

      (0) 
      1. Himshwet Dwivedi

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

        (0) 
        1. 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?

           

           

           

          (0) 
  3. 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

    (0) 
    1. Anjana NB

      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

      (1) 
        1. Anjana NB

          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.

          (0) 

Leave a Reply