Skip to Content
Technical Articles
Author's profile photo Iris Sasson

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.

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Aviad Rivlin
      Aviad Rivlin

      Nice, Thanks for sharing, Iris! Murali Shanmugham check this out 😉

      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Thanks. what a coincidence – I just reached out to Iris asking for the same.

      Its a great step towards offering Portal service on multi-cloud.

      To be honest, I was a bit surprised when I couldn’t locate Fiori Configuration Cockpit ?. Are there plans to provide tools/wizards which make it more easy to create sites (similar to Neo environment)

       

      Author's profile photo Iris Sasson
      Iris Sasson
      Blog Post Author

      Hi Murali,

      Yes,  we plan to provide a tool for administrators in the future. This tool will allow administrators to create portal sites with content coming from multiple development projects.

      Author's profile photo Andre Fernandes
      Andre Fernandes

      Hi Iris Sasson ,

      Currently there is no way to add more applications to the FLP in CF besides adding them to the same MTA, right?

      In neo we created the portal site and then added the tiles for any deployed app. It isn't currently possible to do that, correct?

       

      Best regards,

      André

      Author's profile photo Iris Sasson
      Iris Sasson
      Blog Post Author

      Hi André

       

      Yes, this is correct. This capability is part of the future roadmap of Portal on Cloud Foundry

      Best,

      Iris.

      Author's profile photo Andre Fernandes
      Andre Fernandes

      Hi Iris Sasson ,

      Thank you very much for your reply.

      Since that's the case, what is SAP's recommended approach for multiple Fiori apps (and thus many Component.js files) inside the mta?

      1. one HTML5 module per app/Component or
      2. a single module with all the apps

      I saw some SAP examples with a single "web" HTML5 module with several different apps under a "resources" folder, like option 2. Those examples however didn't contain FLP module. So I wonder how that would work, since the FLP uses the appId (which is linked to the HTML5 module).

      Best regards,
      André

      Author's profile photo Iris Sasson
      Iris Sasson
      Blog Post Author

      Hi Andre

      It depends more on your code, and need, and I don't see a generic recommendation on how to build your apps. When we build demo solutions, we usually create an HTML5 module per app

      Yuval Morad Do you have a specific recommendation for Andre?

       

      Thanks,

      Iris.

       

      Author's profile photo Sasi Reddy
      Sasi Reddy

      Hi Iris Sasson Yuval Morad 

       

      Do you have any recommendation or a solution on how to create the FLP tiles for the different apps in the single Web Module?

       

      Thanks

      Sasi

       

      Author's profile photo Iris Sasson
      Iris Sasson
      Blog Post Author

      By design, you should have a module for each app. What are you trying to do?

      Author's profile photo Paige Ola
      Paige Ola

      Hi Iris Sasson,

      very nice blog entry ?

      Can you maybe share your code on github? Or ust showing the to files xs-app.js and mta.yaml for the case without flp and with flp module.

      I’d especially like to see your xs-app.js and mta-file, as I have some problems with routing to my backend-module from app-router, because apparently the destination property is not supported with a html repo. Do you have an idea, how I can access my other module's api then? 

      That would be great.

      Regards,

      Paige

      Author's profile photo Iris Sasson
      Iris Sasson
      Blog Post Author

      Hi Ola,

      I used the default and described any changes I did in this blog post. As you can see, the used app is very basic and the target is to explain about FLP. I suggest you open a BCP with the issue to UI5 team. Let me know if you need any support with this

       

      Best

      Iris.

      Author's profile photo Iris Sasson
      Iris Sasson
      Blog Post Author

      Follow this blog post: https://blogs.sap.com/2019/08/05/deliver-sap-fiori-user-experience-on-sap-cloud-platform-on-the-cloud-foundry-environment/ for a more comprehensive guide for delivering Portal sites on SAP Cloud Platform on the Cloud Foundry environment