How to add a custom navigation menu to your SAP Cloud Platform Portal site
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
Thanks for a great post! very useful.
Hi Syblle Can this be used to configure the navigation screen on the SAP Demo Cloud Self-Service Portal ?
Thanks!
Hi Sarah, are you refering to this site: SAP Demo Cloud Self-Service Portal. It depends on the technology it uses. I think that this was not built with the new version of SAP HANA Cloud Portal, so this kind of custom navigation could not be used here. Anyhow, it would be the task of an administrator.
Regards,
Sibylle
Hi Sibylle
BTW: Great article.
Thank you for your response.
Yes, I was referring to the SAP Demo Cloud Self-Service Portal. I have a client who likes the "look and feel" of the site and wishes to use this for the start-up screen after logon to SAP MII. They have seen this on the portal and wish it to be used with SAP MII.
There are other options z.B SAPUI5 MWC. I was interested to know what was done or appears to be have been configured on the Portal.
Any ideas who I could reach out to ask more questions about the navigation menus on the Demo Self-Service Portal ?
Thanks
Sarah
Great stuff! Thanks for sharing this Sibylle and Guy.
Thanks for this blog, Sibylle.
However, the link for the example project from Guy Roth you mentioned is dead. Is it still available somewhere else?
Hi Daniel,
please try again - for me, it works fine now.
Regards,
Sibylle
Hi Sibylle,
thanks for sharing! I was wondering if the timing could be changed. At the moment the plugin is loaded after the ushell and the selected page is shown on screen. So the user has to deal with ui changes while there is already content to work with.
Is there any method to load a plugin before rendering of the header and page content?
Best regards,
Tobias
Hi Sibylle,
I followed your guide by correctly importing the project you have linked.
When I select the correct app in step 3, the "app type" is automatically selected to SAPUI5 instead of Shell Plugin.
Am I doing something wrong?
Thanks a lot
Nicola
Hi Nicola,
no, that is not a problem - you can simply change the app type to Shell Plugin. It is described a bit further down in the text. Since this blog is quite old, the app editor UI has changed and so the order of the settings is no longer as described in the blog, but it should still work fine.
Keep in mind that while you can use this as an example for how to create and deploy shell plugins, it is not required any more for having a navigation menu, as a navigation menu and even more complex options like the mega menu are now part of the product.
Regards,
Sibylle