Skip to Content
Author's profile photo Murali Shanmugham

Create HTML5 based SuccessFactors extension app using SAP Cloud Platform – Part 3

In this part of the blog series, I will create a Portal site based on the extension template and embed the HTML5 app as a widget.

Configuring a Portal site based on SuccessFactors extension template

Let’s switch back to SuccessFactors Tenant and navigate to “Extensions”. In the extensions site directory, click on the + icon to create an extension site.

Provide a name for the site and select the template as “Basic Layout Extension” as shown below.

Select “Header Footer” page and add couple of widgets.

I have selected the first section and added a widget called “Header Image with aligned links” and customized the content of this widget as shown below

In the next section, I can search for and add “DirectReports” custom widget which I created earlier.

I can use the Menu editor and add additional menus to launch other pages and apps.

Finally publish the site (using the third icon from top right) and view the site. You should be able to see the HTML5 app showing up as a widget within the page.

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

The URL for this site is of the format https://flpnwc-<subaccount>.dispatcher.<landscape><siteID>#page1-Display

The next step is to integrate this site within the SuccessFactors home page. Navigate to “Manage Home Page” and click on “Add custom tile” as shown below.

This will provide you with a wizard and guide you through the process of create a custom tile. In the Properties tab, provide the Tile name and description.

In the Tile tab, you can select a Graphical tile type and provide an image background, Title/Subtitle which will show up in the home page.

In the Navigation tab, select the “URL” for Tile Target and provide the full URL of the extension portal site created earlier.

Finally, in the assignments tab, select the section where this custom tile needs to appear.

You can also customize the SuccessFactors menu to have an entry for the custom application which has been built. Navigate to “Configure Custom Navigation”.

Add your Application name, order of its appearance in the menu and URL as shown below.

When you reload SuccessFactors home page, you should see the custom tile.

You should also be able to see the custom application in the Menu navigation as shown below.

Launching the custom application will take you to the extension Portal site created earlier. The navigation would be seamless for the user as they feel they are still within their SuccessFactors tenant. You have the header and footer along with the “Home” icon and the same navigation menu. Once the user finishes viewing the extension application, they can use the navigation menu to switch to other SuccessFactors applications.

Accessing the HTML5 app directly

In the previous blog, I showed how you could deploy the HTML5 app to an extension account.

When you try to launch this app, it will give you a SuccessFactors authentication error “The requested operation is not available”.  In order to be able to directly access the app using the URL or even embedding this URL within SuccessFactors, you would need to make additional settings.

Navigate to the SuccessFactors provisioning screen and click on “Authorized SP Assertion Consumer Service Settings”

Click on “Add another service provider ACS” and provide value for the first three columns.

Assertion Consumer Service : Link to your HTML5 application. In my case it is

Logout URL:  https://authn.<landscape><sub-accountname>/<sub-accountname>. In my example, it is

Audience URL: https://<landscape><sub-accountname>. In the below example, it is

With this configuration, you should be able to directly launch the HTML5 apps by the app URL.


I hope this blog was able to give you a good understanding of the tasks involved in creating a simple HTML5 based extension application. As I mentioned earlier, I am new to SuccessFactors and if you think there is a better way of achieving the same, please do share your feedback.

I would also like to thank my colleagues for supporting me with various steps in this blog – Ido Shemesh & Manju Venkatesha & Former Member


Assigned Tags

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

      Its Really Helpful for me Thank you  ... But i have a question below

      I deployed Launchpad successfully and  created a Tile  in success Factor Home Page which navigate to Launchpad. where I Have two Groups and two roles. my question is

      How can I assign Extension Launchpad Application roles to different SF user??

      mean if any Role contains  two application Test and JsonDemo than assign user can see only that two application from same Navigation Tile.

      please Provide solutions of helpful guides .

      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Ramchandra,

      Can you please post this as a question in Portal forum. Thanks.

      Author's profile photo Blazej Smigielski
      Blazej Smigielski


      Your post its really helpful for me.

      It is possibly to add counter to custom tile with external URL?

      Thank in advance for your answer.



      Author's profile photo Murali Shanmugham
      Murali Shanmugham
      Blog Post Author

      Hi Blazej, Thanks. I believe custom dynamic tiles are in the roadmap and currently not available.


      Author's profile photo Ravi Shankar
      Ravi Shankar

      Hi Murali,

      I am facing one issue where i am able to navigate to SCP extension from SF launchpad. SSO and everything works fine. But when i try to access direct URL we are getting below url.

      Error: Please contact your administrator to set up active SAML asserting party.



      Ravi S.


      Author's profile photo Mahesh Batta
      Mahesh Batta

      Hi  Murali Shanmugham

      Thanks its a nice blog and we are able to configure , deploy the application. But as per this blog we are unable to navigate to extension directory from extensions. We went to the note

      2613081 - Unable to access extensions on SuccessFactors all the permissions mentioned are available for the user. But still we are not able to navigate to directory.

      Please let me know is there any role or any permission to be assigned to the user.

      or can you provide some more details regarding the URL "The URL for this site is of the format https://flpnwc-<subaccount>.dispatcher.<landscape><siteID>#page1-Display" Mentioned above.



      Author's profile photo David Law
      David Law

      There’s nothing resembling Extensions here in the current SuccessFactors. Extension Center is something else. And Extensions leads to the SAP App Center.

      What replaces it?