How to use the SAP SuccessFactors Theming APIs to adapt your Extension Application

[gerald_reinhard]

The Theming of the SAP SuccessFactors system can be managed using the Theme Manager.

This Theme manager allows to define own themes or select preselected themes for the product. Customer use this functionality to adapt the look and feel of the product to their corporate colors and logos.

When Partner or Customers are building an extension application to the SAP SuccessFactors products there is often the need to apply the same theming to the extension. The good news is that all this Theming information is stored within the product and is accessible to a series of APIs.

In this blog post I will show how to retrieve this information based on the example of the company logo which can be set in the Theme Manager using the fine tuning logo section as shown below

The SAP SuccessFactors Theming APIs are documented in the OData V2 Reference Guide and the first API to know is the ThemingInfo API. This API will return the ID of the current selected Theme in the Theme Manager.

GET https://api68sales.successfactors.com/odata/v2/ThemeInfo?$format=JSON

The result of this API looks like this:

{

    "d": {

        "results": [

            {

                "__metadata": {

                    "uri": "https://api68sales.successfactors.com/odata/v2/ThemeInfo('11uyoqg2t8')",

                    "type": "SFOData.ThemeInfo"

                },

                "id": "11uyoqg2t8",

                "ui5Theme": "sap_fiori_3",

                "urls": {

                    "baseUrl": "https://hcm68sales.successfactors.com",

                    "configUrl": "/public/theme-api/config/SFPRO001234/11uyoqg2t8;mod=1853f8061b1",

                    "cssUrl": "/public/theme-api/css/SFPRO001234/11uyoqg2t8/.dcss;mod=1853f8061b1",

                    "ui5BaseThemeRootUrl": "/public/theme-api/css/SFPRO001234/11uyoqg2t8/.dcss/merge_v1/verp/ui/sapui5-aux/resources_1.1.27/theming!/verp/ui/sapui5-main/resources_1.102.6/resources/"

                },

                "lastModifiedDate": "1671807656369",

                "accessibilityPreferences": {

                    "blindnessSupport": false,

                    "colorVisionType": null,

                    "keyboardOnlyNavigation": false,

                    "lowVisionType": null

                },

                "locale": "en_US",

                "modules": null,

                "fingerprints": {

                    "config": "1853f8061b1",

                    "css": "1853f8061b1",

                    "ui5BaseThemeRoot": "v1"

                }

            }

        ]

    }

}

With the id from the above response of the API the next API can be called which is the ThemingConfig API:

GET https://api68sales.successfactors.com/odata/v2/ThemeConfig('11uyoqg2t8')?$format=JSON

This API returns all the information provided in the Theme Manager including the URL to company Logo:

"logo": {

                "backdropColor": {

                    "value": "#FFFFFF"

                },

                "position": "left",

                "url": {

                    "value": "uires:638?mod=dcc48fc2b3b390735e7673714fe66323&name=sap%2dlogo%2dpng%5f2285421small.png"

                },

                "useBackdrop": false,

                "useUploadedLogo": true

            },

 

This information together with the URLs for the UI resources (uires) which is the UI URL of the SuccessFactors system plus "public/ui-resources/<company ID>"

https://hcm68sales.successfactors.com/public/ui-resource/SFPRO001234/

can be used to retrieve the Logo of the company. By appending the value of the "url" parameter from the response of the ThemingConfig API (excluding the "uires:" part):

https://hcm68sales.successfactors.com/public/ui-resource/SFPRO001234/638;mod=dcc48fc2b3b390735e76737...

The above URL can be used without any additional authentication from any application which needs the company logo. Please note that if you copy the above URL you will not get the logo since in all examples above the company ID was replaced by a fake one.

In a similar fashion all other resources can be accessed or CSS information extracted to apply it to your extension application.