Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Active Participant
Note that the term "SAP HANA Cloud Platform, Portal Service" which is used in this blog is rebranded to SAP Cloud Platform Portal starting in March 2017.

About this document

This document is intended to serve as a road map for

  • New users who want to learn how to create new business sites

  • Existing users who already created business sites using the Portal Service ((formerly known as SAP HANA Cloud Portal) and would like to upgrade it to the new release.

We will start off with a high level introduction to the new Portal service release and then dive in to the technical details and how-to's using a 3-part step by step hands-on document describing the process of upgrading a portal site to the new Portal Service version.

Introducing SAP HANA Cloud Platform, Portal Service

The new version of SAP HANA Cloud Platform, Portal Service has been released earlier this year introducing a complete makeover of the previous versions. One of the major differences is the complete alignment with SAPUI5 and Fiori design and development concepts. This is good news for business site developers who enjoy a smooth integration with

  • Apps developed in SAP Web IDE

  • Themes designed with the SAP Theme Designer

  • Roles and Access Permission defined in their HANA Cloud Platform Cockpit

  • Tight Integraction with HCP services - Jam, SAP Cloud Identity service, etc

  • Mobile scenarios empowered by Fiori Mobile Services*.

  • And more

Lets go over some of the major new changes introduced into the new Portal release:

Main Personas
The new release gives more power to the Site Developer. It enables the development of site templates, page templates and layouts, together with business applications from the SAP Web IDE available in your HANA Cloud Platform (HCP) account. This is achieved by using the Portal Service plugin for Web IDE which provides the capabilities of developing and previewing of Site and Page templates.Once the developer deploys the site template project to the HCP account, the Site Administrator creates site instances from the template and customizes its content, applications, permissions etc. The administrator is also responsible for the site life cycle – as in the previous Cloud Portal release.Click here for more details on the main personas using the Portal Service.

Unified Shell
The new site authoring and runtime environments are based on the SAPUI5 Unified Shell control used in the Fiori Launchpad. This enables users to use SAP Fiori Launchpad as their site, or just integrate a Launchpad as one of the pages in their site side by side with freestyle pages (hybrid).This also means that the Portal sites you develop and design are completely responsive – whether they are Fiori Launchpad based, hybrid, or Freestyle. (To ensure complete responsiveness the site developer should use the SAPUI5 mobile libraries when developing page templates and business applications.)

Open Social (OS) and Iframes
In the previous release the Cloud Portal applications were implemented as OS widgets, running in an OS container, and displayed in the site runtime environment through iframes.The new Portal Service release has departed from OS and iframes and business applications running in our sites are in fact running embedded in the Unified Shell from within the HANA Cloud Platforms HTML5 application container.OS features enabled by the container (like site navigation, events between widgets, etc) – have been substituted in the new release with SAPUI5 capabilities and new APIs provided by the Portal.We will cover these changes in details in the following hands-on exercise.

Lets introduce some of the new concepts by aligning with the following terminology:

  • The new Portal Service makes a distinction between a Site Developer – who develops Site and Page Templates and business applications using the Web IDE and a Site Administrator who creates Site Instances from these templates, adds content, and customizes the site properties, themes, menus, access permissions etc. using the Portal Service Site Designer.

  • A Site template is the starting point of the developer's flow. Developers create Site Templates in the Web IDE based on available Templates. The project contains all the underlying objects, such as page templates, page instances, widgets configurations, menu definitions, catalogs, etc., these are added as components to the site template project. Once deployed to the HCP account, Site Administrators can then create Site Instances based on these Site templates.

  • Developers can create new Page Templates in their project. The Page Template is in fact a UI5 Component that may contain pieces of content. It defines the page’s layout by using SAPUI5 HTML or XML views. Developers can then create Page Instances based on these templates and make them available in their site template.

  • The page layout contains Sections which are content placeholders in the layout containers. A developer can create empty sections that will be populated by the Site Administrator. Alternatively he can predefine the content for selected sections for the page template or for specific page instances. The available content (or Widgets) can be any custom SAPUI5 app available in the users account or a set of out of the box portal widgets (Image, HTML, Rich Text Editor, Navigation and more). In both cases the developer can predefine the Widget settings and content (for instance, set the image or HTML markup to display in one of the sections).

Creating a Business Site with the New Portal Service

Following is a step by step hands on exercise describing the process of creating a portal site using the new Portal Service version. The site is based on an existing site created with the previous Portal release - this will allow us to elaborate on the changes introduced to the new Portal release.

For this purpose we will use the ATOMIC Conference site created with the previous version of Cloud Portal. The site is an event promoting site for a fictitious brand owner named ATOMIC containing several pages, apps and static content.

The Original Site

The Upgraded Site

Pretty similar....


  1. Register for an SAP HANA Cloud Platform Trial account

  2. Enable SAP Web IDE and Portal Service for your Trial account

  3. Enable the Portal Service Plugin on SAP Web IDE

  4. Download the resources required for this exercise. The resources will be used to build the site and contain 2 business applications, 1 custom navigation application, and static resources (images, html snippets, and json files).

    1. Navigate to our github repository.

    2. Download the file to your desktop.

    3. Unzip the folder

For more info check out Getting Started Checklist

The Exercise

The process of creating/ upgrading the new ATOMIC site is described in 3 guides, click on the title of each guide to start the exercise

  1. Creating the ATOMIC Site Template

    • Create a site template project

    • Create page templates

    • Customize the page template layouts to fit the ATOMIC site

    • Add content to the page template

    • Deploy the project and create the site instance

  2. Creating content for the ATOMIC site instance

    • Add static content to the site instance (images, videos, HTML snippets)

    • Add applications to the site and convert Open Social applications and features to SAPUI5 and Fiori capabilities

  3. Finalizing the ATOMIC Site Instance

    • Creating a Theme

    • Editing the Site Settings

    • Setting Navigation Hierarchy

    • Configuring Access Permissions

    • Adding Translations