How to add a custom navigation menu to your SAP Cloud Platform Portal site

[SibylleBrehm]

Note that "SAP HANA Cloud Portal" and "SAP HANA Cloud Platform, Portal Service" are rebranded to SAP Cloud Platform Portal starting in March 2017.

------------------------------------------------------------------------

Have you already tested the new version of SAP HANA Cloud Portal? Have you created a site from the predelivered templates like the Starter Site or Basic Layout Set?

 

It is all pretty simple and straight forward, but one thing that slightly confused me first is the changed navigation menu. If you are familiar with the previous version of SAP HANA Cloud Portal, you know that there used to be a nice navigation menu on top of the page. In contrast, with the new version, the menu is closer to the SAP Fiori Launchpad UI - it can be reached by clicking the menu icon in the upper left corner. Since this might not be intuitive to all site users, you may want to replace this kind of navigation with a second bar below the header bar displaying the menu. Something like this:



Now, what is the best practice to include such a navigation menu? Well, the recommended approach is using a shell plugin which allows you to extend the functionality of the shell or the framework that runs the site. Shell Plugins can be created as full-blown SAPUI5 applications with Component.js and descriptor files, test suites, and more standard SAPUI5 components, but as the purpose of Shell Plugins is mostly to add a simple functionality to the site, it can be enough to create a simple Component.js file with the required code.

 

You can easily create such a plugin in SAP Web IDE. You can download an example project for a very simple top level navigation with just one level, which you can easily import to SAP Web IDE for testing. This example was kindly provided by guy.roth.

 

 

The main piece of the project is the Component.js file. It defines a NavigationMenu component with some functions:

• The init() function runs when the component is loaded. It calls the addNavigationMenu function which retrieves the menu hierarchy from the Cloud Portal SiteService API, and then creates an SAP UI5 SegmentedButton controls with a button for each page of the site. Finally, it adds a a new sub header menu bar to the site shell which contains the SegmentedButton.


• The navigate() function is called every time a button is pressed in the SegmentedButton control. It uses the shell CrossApplicationNavigation API to navigate to the selected page.

 

In addition to the Component.js there are some other files in the project: a css file, the descriptor file manifest.json and the application descriptor file neo-app.json. After importing the zip to SAP Web IDE, you can directly deploy it to SAP HANA Cloud Platform.

 

The next step is to integrate it into your site. This is pretty simple. Open the site to which you want to add the custom navigation menu for editing - I created a simple Marketing site with 4 pages.



 

You just need to go to Application Configuration (1.) and add a new app with the plus sign (2.). Select the navigationmenu app from the list of available apps on your HCP account (3.), assign one or more catalogs for access permissions(4.), set the app type to shell plugin (5.) and save your configuration (6.). Now you just need to publish your site again to make your changes available to the end users. Right after publishing, the new version of your site opens in a new tab and you can check your nice new custom navigation bar.

 

Hope that was helpful,

Sibylle