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.