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 🙂