Skip to Content
Author's profile photo Former Member

Accelerate your SAP Cloud Platform Portal Implementation

Note that “SAP HANA Cloud Platform, Portal Service” is rebranded to SAP Cloud Platform Portal in March 2017.


Welcome SAP HCP portal service advocates!
Today I would like to talk about a new and exciting way to accelerate your portal implementation:

  1. Site accelerators – sample site templates demonstrating the capabilities available for both portal developers and administrators
  2. Widget accelerators – sample widgets to be used in your portal sites.
  3. Shell Plugins accelerators – sample plugins to enhance your portal service sites


Those pre-built content assets are delivered via GitHub for easy access and consumption.
You can download those accelerators, upload them to your Web IDE, customize them, deploy them to your HCP account and consume via the Admin Space (sites) or Freestyle content directory (widgets).


To set the right expectations, please be advised that any downloads are subject to the following:

  • These accelerators are provided as a starting point for your implementation.
  • These accelerators are provided without any warranty or support obligations.
  • These accelerators are subject to the full terms of the license agreement (see details on GitHub).

Site Accelerators

Accelerator Description
/wp-content/uploads/2016/06/1_974622.jpg Marketing Site

This site template contains marketing-related content. It is built mostly using HTML widgets. You can view the project structure in SAP Web IDE, and preview the site from there, or from the Site Designer.


/wp-content/uploads/2016/06/2_974633.png Parallax Site

A site template which implements many types of parallax scrolling effects and transitions in the sample “Parallax Page”, built in portal service widgets. A prerequisite for working with the parallax site is the deployment of the social networks widget, also available in the SAP HCP portal service GitHub account.

The first parallax element includes a built-in editor for choosing between an image and a video, setting the pace of the scroll and the image/video alignment. The other elements which make up the scrolling effects can be configured in SAP Web IDE. For more information on configuring the parallax site template, see this blog post.

API Developer Portal This site template was designed and developed by SAP API Management, with the aim to let companies have a custom-branded developer portal for their developers to get the information about all available API proxies, products, and subscriptions.
Read this blog post for more information how to download and import this site accelerator.

Widget Accelerators

Accelerator Description
/wp-content/uploads/2016/06/3_974634.png Breadcrumbs Shows the position of the current page in the site hierarchy, allowing the user to click on any of its parent pages, for convenient navigation
/wp-content/uploads/2016/06/6_974662.png Side Navigation This widget uses the SAPUI5 side navigation control. Side navigation is available both as a widget and as a plugin. The widget supports up to two levels of page hierarchy. A widget side navigation menu would appear in specific pages whereas a plugin side navigation menu is always available. For information regarding the side navigation plugin, see Plugins for SAP HCP Portal Service Freestyle Sites
/wp-content/uploads/2016/06/7_974663.png Social Networks Add quick links to your company’s social pages, each with its own instantly recognizable icon (e.g. Twitter, Facebook). In the Site Designer, after adding the widget, open the widget settings screen, enable the relevant social network and enter the URL of your company’s page there. At runtime, users will click on the icons to access your pages.
/wp-content/uploads/2016/06/9_974665.png Video You can embed any standard YouTube URL in a site page using this widget. In the Site Designer, after adding the widget to a page, open the widget settings screen to enter the URL and the height of the video’s frame.
RTE.png Rich Text Editor

Using this extension project, you can customize and extend the out-of-the-box Rich Text Editor widget with your own set of menus, plugins, templates and initial content.

Click here for the full guide on extending the Rich Text Editor.

Shell Plugins Accelerators

Accelerator Description
Side Navigation This plugin uses the SAPUI5 side navigation control. Side navigation is available both as a widget and as a plugin. The plugin supports up to two levels of page hierarchy. A plugin side navigation menu is always available to users, whereas a plugin would appear only in specific pages. For information regarding the side navigation widget, see Widgets for SAP HCP Portal Service Freestyle Sites
SCI Login

When added to a site, this plugin generates an SCI login overlay (popup), or redirects to a login screen. It is typically used in sites with restricted content. After the user logs in, the browser is refreshed and he or she can access content according to their role-based access definitions. When adding this plugin to a site, some configuration is required of the developer.

Define the following in the plugin root folder, in the manifest.json file, under the sap.ui5 section:

  1. Enter the SCI tenant
  2. Optional: Set the overlay option to “true” to determine that the login opens as a popup, and the user is not redirected to a login page.
    "config": {
      "sci": {
      "useOverlay": true,
      "sci_tenant": "",
      "sap_ids_path": "/ui/resources/javascripts/SAP_IDS.js"
Horizontal Navigation Menu This menu displays your site pages in a horizontal bar. The plugin supports up to three levels of page hierarchy.


Q: How do I upload the accelerators to my SAP Cloud Platform Portal edition space?

A: All of the accelerators are available on GitHub. You can download this content from GitHub and import it to your SAP Web IDE.
Using the Web IDE you can extend it, and deploy it to your SAP Cloud Platform account for consumption in the portal site, to enhance and boost your site.
See article Uploading accelerators to your SAP HANA Cloud Platform, portal service space for more technical details.

Q: How can I upload only a specific accelerator from GitHub?

A: You can only download the entire samples repository from GitHub, that includes all of the sites, widgets and plugins templates.

After you clone the entire repository locally, you can then upload a single accelerator instance to Web IDE by choosing a specific accelerator from the local repository.


Q: Do the accelerators have translations files?

A: No. In order to add translations you need to maintain them independently by following the product translation support


Q: How can I preview my project before uploading it to my SAP Cloud Platform Portal edition space?

A: You can preview your project in SAP Web IDE and test the changes you make. To do so, you must first do the following:

  1. Click Run > Run Configuration
  2. Click the + button and select Preview Site Template
  3. Select the provider account from the drop-down. If it is marked with a red X, deselect Run <sitename> template, then select it again
  4. Click Save and Run


You can now preview the project, by right clicking it and selecting Run > Run as > Preview Site Template

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Guy Soffer
      Guy Soffer

      Great post with valuable information!

      Author's profile photo Jamie Louangaphay
      Jamie Louangaphay

      Hi Amit,

      This is great.  I have a question on previewing the site from WEB IDE, I don't have the option 'Preview Site Template'.  Do I need to add some plugins for this?



      Author's profile photo Guy Soffer
      Guy Soffer

      Hi Jamie,

      Yes. You need to activate the Portal Service plugin. Here are the steps:

      CPv2 Documentation

      Author's profile photo RAJNI KUMARI


      I wanted to preview the site from WEB IDE.

      Even if i enable the portal service plugin i am not getting the option ‘Preview Site Template’.

      Kindly help !!