How to apply SuccessFactors header and footer to ...

i834235 · ‎2018 Jan 04

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.