** 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

borderRadius:30px;backgroundColor:#7D9847;

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

borderRadius:30px;backgroundColor:#7D9847;hoverBackgroundColor:blue;

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:

Summary

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.