Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
i834235
Product and Topic Expert
Product and Topic Expert

Overview


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.

https://flpnwc-<extensionsubaccount>.dispatcher.us2.hana.ondemand.com/sites?siteId=e783c2bc-313a-481...



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.


Summary


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.

 
7 Comments