Integrate SAP Fiori App into Your Portal Site on Cloud Foundry

1. Open your subaccount and click Spaces in the left navigation panel.

   

2. Click the JobCore Portal Space.

   

3. Click the mta_FioriDemo_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.

   

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

1. Open your subaccount and in the side navigation panel, click Connectivity > Destinations. Then click 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>.cfapps.sap.hana.ondemand.com 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

   

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

   

1. In the side navigation panel of your subaccount, click Subscriptions. Click the Portal tile and then click Go to Application.

   

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

   

1. Click the Content icon in the side panel of the Site Manager to open the Content Manager. Click + New -> 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:

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

   

3. Click the Navigation tab and enter the following intent:

   • Semantic Object: candidates

   • Object: display

   

4. Click the Visualization tab.

   

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:

   

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

   

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

   

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.

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.

   

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.

   

4. Click Save.

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.

   

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.

   

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

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.

Congratulations!

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.