Skip to Content

** Team FPM ** – Instance Styling in FPM

With Instance Styling (which will be available with SAP_UI 7.40 SP 10) it’s now possible to “style” individual UI elements within FPM based applications. In this blog I will show you some examples, how this new feature can be used.

Instance Styling in FPM is based on the new Instance Styling feature of WebDynpro ABAP. However unlike as in freestyle Web Dynpro FPM is rendering the UI elements and you don’t have direct access to the UI elements as developer (or administrator) of FPM applications. Nevertheless you implicitly create UI elements, by adding fields or buttons to GUIBBs, by adding pages, by adding sections to pages, … And all these FPM entities added by
application development will result in UI elements rendered by FPM.

We added now new attributes (“Style”, “Label Style”,..) to the attributes panel of FLUID (which is the FPM configuration editor) for a lot of entities There you can enter CSS like style information, which then will be added by FPM’s rendering as Web Dynpro Instance Style to the related UI element(s).

In the following section I want to give you some examples how to use it. These are based on the Demo application /BOBF/EPM_FPM_SADL_PD which is available with the newest versions of SAP_BS_FND, but you can try it out with other FPM based applications as well.

When you start the application  and execute the search the demo application looks
like this:


Styling a Toolbar Button

We will start by styling the “Switch to Filter Page” button. Therefore we open the configuration editor for the floorplan configuration and adjust this button:


Select the “Search EPM Products” Page in the Navigation Panel, then select the “Switch to Filter Page” Button in the Preview (or in the toolbar schema), and finally enter


as Style.

After saving and restarting your application the button will now have rounded corners and a changed background color.


If you are now moving with your mouse over the button you can see that the hover background and font Color have been changed as well (although we didn’t change the Attributes “hoverBackgroundColor” or “hoverFontColor”).

Now let’s try what’s happening if we change the “hoverBackgroundColor
“in our Style. Change it to


The result should look like this:


So whenever you change a style attribute, other style attributes are adapted as well in order to make the whole style for this UI Element consistent. In our example the original “hoverFontColor” was Black and the original “hoverBackgroundColor” was a light gray. By setting the Background Color to a different darker color, the light gray would not be appropriate as hover background color any more. Therefore it has been changed to a darker green as the styled background color. This however would cause the black font to become hard to read on hovering. Therefore the hover font color was changed as well (to white). Now by explicitly changing the “hoverBackgroundColor” to blue this explicit setting overrides the implicit hover background color. Nevertheless the hover font color is still adjusted, as the readability still requires a white font.

Adding a Background Image

Another often requested feature is the option to add a background image to pages, forms, …. To achieve this you can use the style attribute backgroundImage”.

The backgroundImage must be accessible via URL. In my example I uploaded the image to the MIME Repository therefore I can use a relative URL

To use the image as background of a page I have to go to the configuration editor again, select the page and enter

backgroundImage:<Url to Image>;

as Style.


After restarting the application it might look like this:



Instance Styling offers a lot of options to adapt the visual appearance of individual UI elements to your needs. You can get an impression and an overview about all options instance styling offers in Web Dynpro Application WDR_TEST_CUSTOM_STYLES. There you can see all attributes supported by individual UI elements.

Nevertheless you should use this new feature only for real instance styling, only when you want to adapt individual UI elements, because they have some special semantic different from all others of same type. Don’t add rounded corners to buttons only because you like rounded corners. Only add them to special buttons, which need a different visual appearance as all the others. If you want to have rounded corners all over your system, than better use the theming editor.

You must be Logged on to comment or reply to a post.
  • Hi Christian,

    Can we change the style dynamic in feeder class, or it can be defined in configuration only and can't be changed via code.



    • Hello Jerry,

      if you are using a static configuration you can't change the instance style at runtime. However by using a dynamic configurations provided via the feeder's GET_DEFAULT_CONFIG method, allows you to provide instance styles at runtime. But then you have to provide the whole configuration at runtime.

      Best regards,


  • Hello Tudor,

    the answer is ease-of-use. Why should we bother the developers of FPM apps with this indirection, forcing them to create on style classes and adding them to the fields.

    I don't see anything you could achieve more or easier, if you could define your own style classes, Maybe we miss something?

    Best regards,


    • Well sometimes the customer has ideas or requirements that survive any consultation.

      Currently we discussed a similar case in our NET313 class: we searched a way to give a toolbar-button a fixed width since the width was changing with the length of the changing text (toggle-button). we wanted to prevent the line of following buttons to shift back and forth with the change of a button label.

      In another scenario someone wanted the toolbar button to be larger than the text since the button should be usable on a touchscreen easily. Certain CSS-properties can be set by a custom theme, but the identification of the toolbar button in CSS is very fragile, since no class or id is generated in the HTML-result. We found a way to identify via the id of e.g. '#WD60', but this ID may change with the customization of the layout, so any other element could be false-positive identified.

      A custom CSS-style class for a simple button outside of the toolbar in a view can be set in the component attributes.

      I personally would prefer UI5 in this heavy customization cases, since the identification of elements in the generated HTML is much more easy, and I guess in WebDynpro you do not want to leave the general look and feel by changing the standard elements that much.

      • As late-late reply to this topic 🙂 the reason for my request was simple: I didn't want to change the design of the FPM application (on this regard I totally agree with Christian), but I needed to add a "custom" attribute to the generated HTML. The app was split between a display of a document on the left and some form GUIBBs on the right. The idea was that when you click on a field in the form, the corresponding value is highlighted in the document. This worked through a script which was reacting to the "onClick" event of an input field and based on this "custom" ID field, it identified which attribute should be highlighted. Hope this clear a bit the topic and perhaps someone has a clever idea on how to solve this.


        Best regards,


  • Hi,


    Is there any way to use gradient colours? We would like to use these complex colours, like with CSS:


    We are trying to use this syntax for fpm chart background.(if_fpm_guibb_chart_config->set_chart_settings)


    We would also like to change the axis/legend Font color, but we are not able to do that 🙁


    Any suggestion?