Skip to Content
Author's profile photo Rayman Li

SAP Cloud Platform Portal Freestyle Solution – Fully Customized

SAP Cloud Platform Portal provides two different site style: Launchpad and Freestyle. For Freestyle, we can customize the portal page layout using preconfigured page template and widgets without coding. But sometime it is still not flexible enough. I have recently done a portal project with screenshot below.

This portal landing page has fixed-width navigation on the left and notification on the right, which can’t be achieved with out-of-box freestyle functions. And the whole page is fully responsive too, so it will display like below for a smaller screen.

So my solution is creating a customized site template to change the portal site header and a new Fiori app as the page body. As to the site template, it is well illustrated in the openSAP course “Building Portal Sites on SAP Cloud Platform”, here I just highlight the following three points.

  • When using Web IDE to create site template, please select the correct Category as below, otherwise you may not find the project template.
  • Use the “onInit” hook method of page template controller to customize the site header, as the code snippet below.
  • When user click app tile (like “My Leave Request”) in the landing page, the site header remains at the page top to keep consistency.

Now I talk about the new Fiori app which displays all the page content except site header, which is created using template “SAP Fiori Master-Detail Application” but converted as portal widget using the right-hand menu in Web IDE, as shown below. And later this widget will be added to the custom site using the standard portal function.

The page layout of the Fiori app is shown below. Here FixFlex control is used to display the main page structure and UI5 custom control to display different tile groups.

In order to allow different user group see different app tiles, portal standard function “role/catalog/group/app” are re-used. So IT admin can add/remove tiles without code changes. The key APIs used to get tile metadata are shown below.

var oLocalSiteService = sap.ushell.cpv2.services.cloudServices.SiteService();
var groups = oLocalSiteService.siteModel.getProperty("/groups");
var applications = oLocalSiteService.siteModel.getProperty("/applications");

And tile metadata like title and icon can be retrieved using:

applications["{app_guid}"] ["sap.app"].crossNavigation.inbounds;

Furthermore, this freestyle portal solution also allows the users to personalize the tile display. So user can move up/down or show/hide tiles in each tile group. Currently these personalization data is saved back to ECC backend, but it may be worth a try to store in the SAP cloud platform as the normal Lauchpad site.

In the end, with this freestyle approach, we basically can display any web page style, while not losing the powerful standard portal functions like portal site header and user apps management.

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Interesting, Thanks for sharing.

       

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær

      Really cool. Shows the flexibility of the portal service with custom sites which are sometimes forgotten.

      Author's profile photo Aviad Rivlin
      Aviad Rivlin

      Very nice! Thanks for sharing.

      Author's profile photo Ido Shemesh
      Ido Shemesh

      Very impressive.

      Author's profile photo Kemin Li
      Kemin Li

      Wow. It so cool. Rayman. Totally different with sap standard Fiori Launchpad.

       

      Author's profile photo Stephen Kringas
      Stephen Kringas

      Great blog Rayman.

      Just note, in a few of the screenshots, the URL isn't completely blurred

      Regards,

      Stephen

       

      Author's profile photo Rayman Li
      Rayman Li
      Blog Post Author

      Yes, you are right. Thank for your find and I have fixed now.

      Author's profile photo Phil Cooley
      Phil Cooley

      Great work Rayman, I was nervous when asked to help deliver this to our customer but your efforts have been fantastic. Very nice blog and definitely shows how flexible the Freestyle sites can be and how many customised controls can apply while still utilising the existing standard frameworks!

      Well done!

      Thanks

      Phil

       

      Author's profile photo Rayman Li
      Rayman Li

      Also thanks for your strong support.

      Author's profile photo Gurbhej Singh
      Gurbhej Singh

      Nice blog Rayman.

      Author's profile photo prodyot sen
      prodyot sen

      Hello Rayman,

      Trully, your blog would be lifesaver for many who wants to implement freestyle portal. I've few issues where need your help.

      I don't see Site Template while choosing option 'project from template' in web ide full-stack. So, which one should be selected you can please guide. Also, would this be possible to share the zip version of any sample template that you would have as I don't see any sample template available over GitHub and not much blog as well in this area.

      And, it would be great if you can give some reference as well.

      Cheers,

      Sen