Skip to Content
Technical Articles
Author's profile photo Sreedhar Chittari

CSS in FIORI elements via WEBIDE SAPUI5 Visual Editor

In this blog post, we will see about adapting the CSS to different fields in List report fields and buttons in smart table using WEBIDE SAPUI5 Visual Editor without any extra coding efforts.

Below are the simple steps to achieve this.

1.Create a CSS file in the WEBAPP path.

2. Add the CSS file details in manifest.json.

3. Select a field/Button to which CSS needs to be applied in SAPUI5 visual editor and set the class name in Style.

Come to the list report and check if CSS has been applied.

As List Reports templates are designed to have common UI experience, some of the CSS styles may not work at different levels.

Do update me if there is any updated version of this 🙂

Assigned Tags

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

      Many thanks for the sharing !

      Author's profile photo JAVIER RUBIO

      Hello Sreedhar,


      Thanks for your blog.

      Do you know why i have Style Class disabled to input ?