Integrate an SAPUI5 App into Your Portal Site (Cloud Foundry)

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

   

2. Click the dev 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 trial or other subaccount, and in the side navigation panel, click Connectivity > Destinations. Then click New Destination.

   

2. Enter the following properties:

   Property	Value
   Name	JobCoreApps
   Type	HTTP
   URL	https://<id>trial-trial-dev-mta-fioridemo-approuter.cfapps.eu10.hana.ondemand.com/ where <id> 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

   

5. Click Save.

1. In the side navigation panel of your trial account or subaccount, click Subscriptions and enter Portal in the search bar. Then click the Portal tile and Go to Application. The Site Manager opens with the Site Directory in focus.

   

2. Click the icon in the side panel of the Site Manager to open the Content Manager.

   

1. In 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). Note that it may take several minutes until the destination that you created in step 2 appears in the System list.
   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:

   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 (paste this icon code into the Select Icon screen )

   

6. Click Save in the top right hand corner of the screen.

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 assign it to a group. You also need to assign the app to a role.
This is exactly what you’re 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 on the right, 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 the Candidates app to the Everyone role. This is a default role - 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.

   

1. Click the Sites icon.

   

2. Click Go to site on the site tile.

   

You’ll 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.