A flexible header including top level navigation for your SAP Jam intranet

[former_member47640]

The modern intranet powered by SAP Jam

A lot of customers are using SAP Jam Collaboration as their modern intranet solution, or have integrated it as their collaboration platform in an existing IT landscape of multiple solutions, all together making up their intranet. (See these videos from customer Sunpower or Durham County)

With the upcoming Q4 release of SAP Jam we now offer these customers a lot more flexibility to customize the header to either change it slightly, add icons to pages or apps they want to have available to every employee from wherever they are in the intranet, or even to completely replace it with an html-based header that aligns with the layout of their already existing intranet solutions.

In this blog I’ll introduce this concept with two examples.

 

Intranet landscapes consist of multiple apps

SAP offers a wide variety of business applications to its customers, from CRM solutions like SAP Hybris Marketing or SAP Hybris Cloud for Customer, to HR solutions from SuccessFactors, to ERP solutions like S/4HANA.

All these apps can be accessed and launched by employees from the Fiori Launchpad. The Fiori Launchpad then displays the apps, personalized for every user based on his role and authorizations.

Customers who are using SAP Jam as their intranet and any other SAP business application might want to provide a prominent link to the respective Fiori Launchpad.

In a similar way customers might want to provide a link to something like a phone book. In our example we will just use the employee search page of SAP Jam and also highlight that at the top of the intranet page.

 

How to add top-level navigation buttons in the custom header

Here’s the final result we want to achieve: Two additional icon-buttons in the top left corner, one that launches the Fiori Launchpad, the other one that opens the employee search in SAP Jam.



 

1. Provide icon pictures

First thing we need to, are the two icons. You can host these icons on any webserver to get a publicly accessible URL for them. The easier way in my opinion though is to just upload them into a public group or into the home page content section in Jam directly.



Once you uploaded them, navigate to it in Jam and do a right click on the Download button and copy a shortcut to the picture directly.



 

2. Enable custom header

Now that you have the URLs of the pictures you can include them into your header.

For that, go to the branding section in the Admin panel and enable the custom header:



 

3. Add custom html code

Once you enabled the custom header option you will see html code for the standard delivery of SAP Jam. You can now easily remove certain icons if needed, or you edit the html to exactly how you want it.

In our example we just add the following code before and behind the divider line (<li class="jdch-divider" aria-hidden="true"><div>&nbsp;</div></li>):

<a href="<https://<your SAP Jam datacenter>.sapjam.com/universal_search/search?category=people>"> <img src="<URL of the people image that you copied earlier>>" alt="Fiori Launchpad" style="width:25px;height:25px;"> </a>

<a href="<URL of your Fiori Launchpad>"> <img src="<URL of the Fiori Launchpad image that you copied earlier>>" alt="Fiori Launchpad" style="width:25px;height:25px;"> </a>



Now save your changes and the header changes as following:





 

 

Fully customized sample code

In addition to this simple example you can also try out how a fully customized header would look like. Just use the sample code we published here:

https://help.sap.com/viewer/u_admin_help/33b48b5890484c5c9be06c0d4f3e42ce.html

This is how the header will look like using the sample code:



 

 

Let us know your feedback and what you come up with in your customized header.