Skip to Content

Integrate SAP Fiori App into Your Portal Site on Cloud Foundry

0 %
Integrate SAP Fiori App into Your Portal Site on Cloud Foundry
// Explore More Tutorials

Integrate SAP Fiori App into Your Portal Site on Cloud Foundry


Add the app that you created in SAP Web IDE to your Portal site on Cloud Foundry.

You will learn

  • How to consume your own developed apps in a Portal site
  • How to add the app to the Launchpad page in your Portal site.

The Launchpad page in your JobCore Portal site already contains a URL app. In this tutorial, you’re going to add the SAP Fiori app that you created in SAP Web IDE to a different group in the launchpad of your Portal site.

To consume apps that you created in the Portal, you first need to configure a destination to your developed content.

The entry point for your developed content is the App Router URL of the MTA file that you developed. So let’s first find the URL of the App Router of our deployed MTA file and then we’ll add a destination to this App Router.

Step 1: Find App Router URL of deployed MTA file
  1. Open your subaccount and click Spaces in the left navigation panel.

    Open subaccount
  2. Click the JobCore Portal Space.

    Open space
  3. Click the mta_FioriDemo_appRouter app.

    Open appRouter app
  4. Under Application Routes, copy the App Router URL and save it. You will need it when you create a destination in the next step of this tutorial.

    Copy URL

Now you are ready to create a destination to your SAP HTML5 app in SAP Cloud Platform.

Log on to answer question
Step 2: Create destination to SAPUI5 app
  1. Open your subaccount and in the side navigation panel, click Connectivity > Destinations. Then click New Destination.

    New destination
  2. Enter the following properties and then click Save.

    Property Value
    Name JobCoreApps
    Type HTTP
    URL https://portal-dev-companyportal-jobcore-portal-space-mta-<id> where is your ID number
    Proxy Type Internet
    Authentication NoAuthentication

    Note that the URL is the App Router URL that you saved in step 1.

  3. Click New Property

    Add new property
  4. Add the following additional property: sap-platform = CF

    Add destination properties
Log on to answer question
Step 3: Open your Portal site
  1. In the side navigation panel of your subaccount, click Subscriptions. Click the Portal tile and then click Go to Application.

    Open Portal site
  2. In the Site Directory, look for your JobCore Portal site and click Edit (the pencil icon), to open it for editing.

    Edit Portal
Log on to answer question
Step 4: Add your app to your site
  1. Click the Content icon in the side panel of the Site Manager to open the Content Manager. Click + New -> App.

    Add app
  2. In the Properties tab enter the following values:

    Field Name Value
    Title Candidates
    System JobCoreApps (this is the name of the system that your app is running on - same name as the destination name)
    App UI Technology SAPUI5 - this is the type of app that you are adding.
    SAPUI5 Component Name mynamespace.FioriDemo - this is the registered name of the SAPUI5 component. To get this name, ask your developer to open the component.js file in SAP Web IDE - it is defined in the component.js file without the .component suffix as shown here: Find component name

    When you’re done click Save and your screen will look like this:

    Add app properties
  3. Click the Navigation tab and enter the following intent:

    • Semantic Object: candidates

    • Object: display

    Define intent
  4. Click the Visualization tab.

    Visualization properties
  5. Leave the Title as is and then enter the other properties as follows:

    • Subtitle: Developers

    • Information: Current recruits

    • Icon: idea-wall

  6. Click Save and your screen will look like this:

    Save visualization settings

  7. Click the back arrow to go back to the Content Manager.

    Back to content manager

    You can see that your new app is in the content items list.

    View app

You can now integrate this app with your Portal site and add it to the Launchpad page or to a page that you’ve designed yourself. We will add the Candidates app to the Launchpad page in our site.

To make the app visible in the Launchpad page, you need to add it to a group. You also need to add the app to a role.
This is exactly what we are going to do in the next two steps.

Log on to answer question
Step 5: Assign your app to a group

In this step you’re going to create a new group and you’ll assign the Candidates app to it.

  1. Click + New in the Content Manager and click Group to open the Group editor.

    Select group
  2. Enter Work in Progress as the Title.

  3. In the Assignments panel, type ca to search for your Candidates app and the click the + to assign your app to this group.

    Assign group
  4. Click Save.

Log on to answer question
Step 6: Assign your app to the Everyone role

In this step, you’ll assign Candidates app to the Everyone role. This is a default role and content assigned to the Everyone role is visible to all users.

  1. Click the back arrow to go back to the Content Manager.

  2. Click the Everyone role to open the Role editor.

    Select Everyone role
  3. Click Edit.

  4. Search for your app. Type ca in the search field to find the Candidates app and then click + to assign the Everyone role to it. And then click Save.

    Save role
Log on to answer question
Step 7: Review your site

At the top right of the screen click the Go to site icon.

Go to site

You will see that both groups appear in the runtime site – the SAP group with the URL app and the Work in Progress group with the SAP HTML5 app.

View runtime site


You have successfully created a great looking Portal site with two pages: a Launchpad (with your apps) and a well-designed Home page with web content. Both pages are part of your site’s menu, making it easy for end users to navigate between your pages.

This is just the start – you can continue to add more pages and extend your site to include additional apps and content.

Which of these editors will you find in the Content Manager?

Next Steps


You have created a SAP HTML5 module in SAP Web IDE and deployed it to your SAP Cloud Platform subaccount.
For more information about how to create the app, see the tutorial: Develop Your First SAP Fiori App for Use in a Portal Site on SAP Cloud Platform on Cloud Foundry.

Back to top