Skip to Content
Author's profile photo Manjunath Venkatesh

How to apply SuccessFactors header and footer to HTML5 extension app on SAP Cloud Platform


In this blog i want to showcase how to apply branding and theming that is header and footer of SuccessFactors instance to extension application developed on SAP Cloud Platform using Portal service. This is continuation  of  part 2 blog to demonstrate how to use portal service  site template “SuccessFactors template” to apply branding to HTML5 extension application.

The extension package for SuccessFactors enables customers to add custom functionality to meet their business requirements by easily extending the core functionality of SuccessFactors HCM suite . The extensions are well integrated into SuccessFactors applications data, administrations , security and provide consistent look and feel.

With  SAP Cloud Platform we can build  HTML5 as well as Java applications which are  loosely coupled extension application by consuming OData API’s exposed by SuccessFactors or  any custom objects build using extension center framework on SuccessFactors side. SAP Cloud Platform  integrates UI  extension  applications that mimic the SuccessFactors UI with theming and branding using SAP portal service. SAP Portal service provides template which basically Inherits theme and branding from SuccessFactors company settings when configured as a navigation link.  So that the footer and header of UI extension application will have look and feel of SuccessFactors.

Extension application running on SAP Cloud Platform can be accessed from SuccessFactors home page by  authorized end users, provided  extension applications is configured as a) as navigation link b) home page tiles.  In this blog i will be focusing on how  to configure extension application as a navigation link. If you want to learn how to configure extension application as home page title refer this blog and up coming blogs on home page title automation using SDK neo commands.

Note:- In order to complete  hands-on as describe in this blog, you need to have extension account paired with SuccessFactors instance. if you want to learn how to create extension account follow this blog.

if your still interested in trying out  similar hands-on exercise on SAP Cloud Platform trial account follow SuccessFactors open SAP week 2 hands-on course material.

Prerequisites : Once you have HTML5 application deployed to extension account paired with SuccessFactors instance, you can follow steps below to apply SuccessFactors branding and theming to the SuccessFactors extension apps.

Blog written my colleague Murali  focus on Basic Layout extension template whereas this blog shows how to use  Starter Extension template.To the most part the configuration steps are similar.

Configuring a Portal site based on SuccessFactors Starter Extension Template

Step 1: Logon to SuccessFactors  instance and search for extensions  in tool bar search.

Step 2:  The Extension Directory is opened, Click on the + sign to create a new extension

Step 3: Provide extension name, Select SuccessFactors Extensions as Template Source ,Select the Starter extension template and finally click  on Create to complete the site creation process.

Step 4: You will notice that header and footer of SuccessFactors instance is rendered as highlighted below for the newly created site.

Note:- Header and footer is rendered only on extension account that is paired with SuccessFactors instance.

Step 5:  To add extension apps to the Portal site template, click on content management and select Apps option from the menu.


Step 6: On the Starter page, click  Edit option on the lower bottom of the screen.

Step 7:  Click on drop down option to select the extension application

Step 8:Select your extension application from the list and click on OK button

Step 9: Navigate to catalog tab and assigned to your required catalog  and finally save the changes.

Step 10: Set  Starter page as home page for the site template. Go to Page Management, select pages option and click on drop down option next to wheel icon.

Step 11: Set Starter page as default  home page.

Step 12: if everything is configured correctly you should see extension app output displayed with SuccessFactors  header and footer as shown below.

Step 13: Let’s go ahead and publish the site by clicking on the icon as highlighted below.

Step 14: Click on Publish and Open option,  Once the site is published, output should  be  displayed


Step 15 : When you go back to “Extensions”, you will be able to see the published site listed in the extensions directory. Copy the site URL.


Step 16 : In Tool search area, type “Navigation” and  Select Configure Custom Navigation  option.  We are going to configure  HTML application as Custom Navigation on SuccessFactors side by providing  its site link address.

Step 17 : Maintain entries as shown below and finally save the changes.

Maintain name for Menu item, ID which can be numeric or alphanumeric value, Menu location as Top Navigaiton and permissions to restrict access to extension application based on SuccessFactors RBP concept.

URL is site URL address from the step 15).

Step 18: Refresh the screen and check menu options for newly added navigation link. Go ahead and select the menu option.


Step 19: You can see extension application  output shown with SuccessFactors Header and Footer.


In this  blog you learned how to configure extension application developed and running on SAP Cloud Platform as a custom navigation link on SuccessFactors. By applying SuccessFactors branding and theming to extension application the end users get to see same look and feel of native SuccessFactors application and extension application can be consumed from within the SuccessFactors home page.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Thanu Kumaraswamy
      Thanu Kumaraswamy

      Hello Manju Venkatesh,

      Nice blog!

      We have created a Portal Site and configured a UI5 app from SCP. The site opens up without any issues for admin users but for regular users get an error "you don't have permission to view this site, Contact your site administrator to get permission for this site". After some trial and error, we found out that the user needs to be part of the Permission Group "Extensions Administrators".

      The issue is that this group/ role has got some very critical access. Is there a way around?



      Author's profile photo Former Member
      Former Member

      In neo-app.json you can at least revoke authentication with inserting this ... it allows (saml and none).. maybe this helps.

        "authenticationMethod": "none",
        "welcomeFile": "/webapp/index.html",
      Author's profile photo Manjunath Venkatesh
      Manjunath Venkatesh
      Blog Post Author

      Hello Thanu,


      Sorry some how  i missed the notification !!

      I'm trying to understand why would end-user directly access portal site from the portal service ? You can configure  portal site address  as an top navigation link on SuccessFactors side.  That's how end-user would consume portal site/extension apps from the SuccessFactors side.  By default portal site i.e extensions on SuccessFactors is protected by Extensions Administrators group and the Extensions Admin permission role. Also we can't rename the above permission group and roles.

      Hope it answers your question.




      Author's profile photo Pranav Kumar
      Pranav Kumar

      Hi Manju Venkatesh

      Really its a nice and a clear blog to go through Thanks.


      I am facing an issue in Step 7, i am not able to select the application that i deployed to the cloud in SCP. When i click on edit button the app name field is disabled. So is there any authorization / roles needs to be assigned to the user to make it enable to edit. Please let me know how can i proceed.




      Author's profile photo Hung Hoang Ngoc
      Hung Hoang Ngoc

      Hi Divya Keludi,

      I've same issue with you. Do you find the way to fix it?

      Thank you!

      Author's profile photo Pranav Kumar
      Pranav Kumar

      Hi Hung Hoang Ngoc 

      I didn't find any solution for that.

      But i have done like

      1. Selecting the "SuccessFactors  Extension" option while creating extension and select templates available below.
      2. Then go to the "Content Management" add new application (+). There you can select the application deployed in sap cloud platform.
      3. And after this rest all are same from this blog, creating new tile on home page (Manage home page) using site id, url of the extension directory.


      Divya Keludi

      Author's profile photo Radoslav Asparuhov
      Radoslav Asparuhov

      This is a bit old and irrelevant article.


      Is there a way to do this in 2023?