Integrate Your SAP Fiori Elements App into a New Launchpad Site
- How to create a new launchpad site
- How to add a deployed SAP Fiori elements app to your launchpad site
- You’ve deployed your SAP Fiori elements app (including the navigation properties) to SAP BTP, Cloud Foundry environment.
Once you’ve deployed your SAPUI5 app to SAP BTP, it becomes available to add to your launchpad site.
- Step 1
Open the SAP BTP Cockpit.
In the side navigation panel of your subaccount, click Instances and Subscriptions, and then from the Subscriptions tab, click SAP Launchpad Service and the Go to Application icon.
The Site Manager opens with the Site Directory in focus. From here, you’ll create your new site.
Note: In the side panel of the SAP Launchpad service, you’ll see four tools. You can see all existing sites in the Site Directory. This is also where you can create new sites. The Content Manager is where you’ll manage cross-site content such as business apps. And the Provider Manager helps you to manage content providers. Content providers expose business content that you can integrate into your launchpad sites. The fourth icon opens Settings to configure various settings related to the SAP Launchpad service.
Click Create Site.
hana-cloud-appsas the site name and click Create.
- Step 2
When you create a site, you are directed to the Site Settings screen, where you can edit the site settings and assign a site to a specific user role.
Navigate back to the Site Directory to view the site tile.
Your site is empty for now. In the following steps, you’re going to add business apps to your launchpad site.
- Step 3
Click the Provider Manager icon to view any available content providers. In there, click the Fetch updated content icon the HTML5 Apps content provider.
The HTML5 Apps content provider is created automatically. Any app that you deploy to SAP BTP is automatically added as content to this provider.
Note that you’ll see a “Content is being updated” message. Wait until this message disappears again before you continue with the next step.
The HTML5 Apps content provider should now expose any newly deployed app for integration.
- Step 4
Click the Content Manager icon in the side panel to open the Content Manager. Click the Content Explorer tab to explore content from the available content providers and select the HTML5 Apps provider.
The Content Manager has two tabs: You can manually configure content items and view any other available content items in My Content. And the Content Explorer is where you can explore exposed content from available content providers, select the content, and add it to your own content.
You’ll see that your
List Reportapp that you’ve just created in SAP Business Application Studio already exists in this provider. Select it and click + Add to My Content.
Click the My Content tab.
Note that your
List Reportapp is in the list of content items.
- Step 5
In this step, you’ll create a new group and assign the
List Reportapp to it.
A group is a set of one or more apps displayed together on a launchpad site. Assigning apps to groups makes them visible to the user.
Click + New in the Content Manager and select Group to create a new group.
Defaultas the Title and in the Assignments panel on the right, click in the search box to see a list of apps.
If you have many apps, you can type some letters of your app name in the search field (for example,
List) to search for the app.
Next to the
List Reportapp, click the + icon to assign your app to this group.
You’ll see that the icon changes.
You now see that the app has been added to the group. Go back to the start page of the content manager.
- Step 6
In this step, you’ll assign the
List Reportapp to the
Everyonerole. This is a default role - content assigned to the
Everyonerole is visible to all users.
Everyonerole to open the role editor.
Click the search box in the Assignments panel on the right. Any available apps are shown in the list below. Click the + icon next to the
List Reportapp, and confirm with Save.
Similar to in the last step, you should see that the app has been added to the role.
- Step 7
Click the Site Directory icon to open the Site Directory and click Go to site on the site tile.
You’ll see all the apps that you have added to your launchpad. In the
Defaultgroup, you’ll see the
Show Itemsapp that we’ve just created. This looks similar to what you’ve seen in the previous tutorial, but this time the app runs in a production-ready SAP Fiori Launchpad. You can see the difference when you look at the top-right corner; you can find the initials of your user there.
Click the app to launch it and to display all columns.
- Step 8
Display all available data items.
Note that your might see no records if you didn’t explicitly fill the HDI container that is used for this deployment.
Apply a new filter to display only items with the German language code
Click on the ˅ button and click Save As to save the current filter settings.
You can use any name (for example,
GermanItem) for this view. Make sure to check both boxes before you confirm with Save.
Open the page in an incognito tab and log in with the same user. You’ll notice that you see the same view, which means that it has been successfully persisted in the backend.
Congratulations! You have successfully embedded and tested the SAP Fiori elements app in a production level SAP Fiori Launchpad. On top of that, you’ve used a SAPUI5 Flexibility feature to persist custom filter views in the backend.
Copy the URL of the newly created site from the site settings and paste it below.