2563398 - SAP Jam - Adding a top-level navigation buttons in the custom header

• How to add top-level navigation buttons in the custom header
• Adding icons for navigation in the header

Image/data in this KBA is from SAP internal systems, sample data, or demo systems. Any resemblance to real data is purely coincidental. 

SAP Jam Collaboration

* This is limited to only SAP Jam Advanced Plus Edition and SAP Jam Enterprise Edition

This is a part of the modern intranet approach of 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)

This KBA will introduce you 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:

2218301 - SAP Jam: Customize email templates & what is the difference between 'email background style' and 'page background style'?

Jam custom header, Add navigation buttons in custom header, Add icons in custom header , KBA , LOD-SF-JAM-UI , User Interface Issues , LOD-SF-JAM , SAP Jam , How To