Human Capital Management Blogs by SAP
Get insider info on SAP SuccessFactors HCM suite for core HR and payroll, time and attendance, talent management, employee experience management, and more in this SAP blog.
cancel
Showing results for 
Search instead for 
Did you mean: 
gerald_reinhard
Product and Topic Expert
Product and Topic Expert
1,206
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.