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:
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.
Interesting, Thanks for sharing.
Really cool. Shows the flexibility of the portal service with custom sites which are sometimes forgotten.
Very nice! Thanks for sharing.
Wow. It so cool. Rayman. Totally different with sap standard Fiori Launchpad.
Great blog Rayman.
Just note, in a few of the screenshots, the URL isn't completely blurred
Yes, you are right. Thank for your find and I have fixed now.
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!
Also thanks for your strong support.
Nice blog 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.