Develop your first SAP Fiori launchpad site with portal service on SAP Cloud Platform Multi Cloud – part 1

SAP just released a new version of the portal service (#sapcp) on SAP Cloud Platform (Multi Cloud). The new release became publicly available during #SAP TechEd Barcelona and allows organizations to deliver portal sites on the Cloud Foundry environment.

You can read more about SAP Cloud Platform Multi Cloud capabilities on the  SAP Cloud Platform on Multi Cloud and Cloud Foundry  page.

SAP Cloud Platform Portal empowers organizations to easily create digital experience business sites for your users. The scope of the recent multi cloud release includes key functionalities to deliver business sites based on the SAP Fiori launchpad user experience for your custom-developed apps. You can also consume content of Business Services from your launchpad site.

For the full list of capabilities with this release visit the Portal on Cloud Foundry help page

In this blog post you will learn step by step how to create an SAP Fiori launchpad site, from set-up of the Cloud Foundry environment, through design and configure a launchpad site, to accessing the site by end users.

Before we drill down to the technical end to end scenario, let’s review the SAP Cloud Platform domain model. 

SAP Cloud Platform domain model

SAP Cloud Platform provides different development environments including the Neo environment and the Cloud Foundry environment. You can read more about this in the SAP Cloud Platform environments help page

In the diagram below, you can see the domain model of SAP Cloud Platform Neo and Cloud Foundry environments. Note that the SAP Cloud Platform Cloud Foundry domain model follows the domain model of the Cloud Foundry technology, and differs from the Neo domain model.

A few notes on the Cloud Foundry domain model:

• A company can have multiple Global Accounts
• Each Global Account have at least one Sub-Account, that correspond to an Organization and resides in a Region. The global account controls the services and the resources that are available (Entitlements)
• Each Organization can have one Space or more, that is the area where your applications run and services are instantiated.

Let’s setup the environment

Setup of SAP Cloud Platform environment for developing your first portal site

To develop portal sites on the Cloud Foundry environment, you would need to configure the SAP Cloud Platform Cloud Foundry environment, and create your organization, subaccount and space, following the domain model described above.

Designing a portal site requires working with some development environment. In this blog we will use SAP Web IDE Full Stack service to design the portal site. Web IDE Full Stack is available on the SAP Cloud Platform Neo environment, so we would also need to have a subaccount on the Neo environment.

The setup part includes steps to configure the Cloud Foundry environment on the SAP Cloud Platform, accessing Web IDE Full Stack on the Neo environment, and creating apps that can be consumed later from a Fiori launchpad site.

Follow these steps to set your environment:

A. Configure the SAP Cloud Platform Cloud Foundry environment and create your own space

Let’s first connect to your SAP Cloud Platform and login (important: Portal service on the Cloud Foundry environment is currently available only on the production environment, so you cannot use a trial account to create your portal site)

Create a Cloud Foundry organization:

Click on enable Cloud Foundry. This will add Spaces menu item to the sidebar. A space provides users with access to a shared location for application development and deployment

Navigate to Spaces and click on New Space

Set the Space Name and click Save

B. Enable Web IDE Full Stack service on the Neo environment

In this blog post, we assume you already have a Neo subaccount. If you don’t have such, you can follow this tutorial, to get started with Web IDE Full Stack

Make sure the Space you created has sufficient quota (memory and routes), as your web IDE apps will be deployed to the Space you’ve created. If you need to configure quota, this is done from the Entitlements tab of the global account.

C. Configure Web IDE Full Stack to connect with Cloud Foundry

Access the SAP Cloud Platform Web IDE Full Stack service. You can follow this tutorial for a step by step guide on accessing it.

Before you can start developing your site, you need to configure Cloud Foundry in your Web IDE Full Stack

To configure Cloud Foundry on Web IDE Full Stack, click settings on the Web IDE Full Stack service,  select Cloud Foundry and set the Cloud Foundry end point. To do so, select the API endpoint (the service is currently available on eu10), and you will be requested to provide the credentials to the Cloud Foundry account. After logging in, select the organization and space you created, this is your Cloud Foundry end point for all your projects. You can also set up the Cloud Foundry space for a specific project, from the project settings in Web IDE.

Click on Install Builder. This installs Web IDE builder to the Cloud Foundry space.

Click Save to save your settings.

We are now ready to create our development project in Web IDE Full Stack.

D. Create a Multi Target Application development project with SAPUI5 apps on Web IDE Full Stack

The portal service functionality is available as part of a Multi Target Application (MTA) project.

Let’s create the project.

Navigate to the development section of Web IDE Full Stack.

Right click on the Workspace and create a new Project from Template.

In the opened wizard:

1. Select to create a Multi Target Application, and click next.
2. Set a name for your project
3. Select the Use HTML5 Application Repository checkbox. This is mandatory, as the Fiori launchpad solution stores static resources in the HTML5 repository.

4. Click Finish

A project was created in Web IDE Full Stack workspace. The project contains a file with the name mta.yaml that is a descriptor of the project and its resources.

There are also hidden files that can become visible if you click on the eye icon, that is located above your workspace. One of the important hidden folders is the appRouter module. The appRouter is responsible for the interaction with applications, services and resources during runtime.

E. Add SAPUI5 applications to your project

The goal of this blog is to present the Cloud Platform Portal launchpad experience. We will create dummy SAPUI5 apps, in order to add them later to a Fiori launchpad site. You can of course create your own apps.

Right click on your newly created project, and select to create new HTML5 module

In the opened wizard we select SAPUI5 application and click Next

Provide the Module name and namespace, click next, and click Finish.

The application was now added to your project.

In the same way, add another app to your project

F. Configure tile display for your SAPUI5 applications

On the Cloud Foundry environment, app tiles are configured in the SAPUI5 module.

To configure a tile, open the manifest.json file, that is located under the HTML5 module\webapp folder

Note: The manifest.json file settings tab shows the application ID, this ID is used to include the app in a Fiori launchpad site.

Click the Navigation tab to configure a tile for the app

A tile represents an application intent. Let’s create an intent by clicking on the + icon.

Select the newly created intent to edit the tile configuration, including its title, subtitle and icon.

In the same way, let’s add a tile to the other application

Click the save all icon to save all your setting

You are now ready to create a Fiori launchpad site. Visit the next blog in this series to see how.