Add an SAPUI5 App to Your Site
- How to add an existing SAPUI5 app to your site
Prerequisites
- You’ve already created the
JobCore
site
In this tutorial, you’ll use the Content Manager to add an SAPUI5 app to your site.
- Step 1
Click the Content Manager icon in the side panel to open the Content Manager.
The Content Manager has two tabs: My Content where you can manually configure content items and view any other available content items, and the Content Explorer where you can explore exposed content from available channels, select the content, and add it to your own content.
- Step 2
Click + New and select App from the list.
The app editor opens with the PROPERTIES tab in focus.
Enter the following values:
Title:
New Orders
Open App: In place
URL:
https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html
When working in your own environment, it’s better to integrate SAPUI5 apps by configuring a destination to the relevant system and setting the app properties to use this destination. In this case in the App UI Technology dropdown list, you would select
SAPUI5
. This configuration allows you to better manage your content in the Dev-QA-Prod lifecycle.Click the NAVIGATION tab to specify the intent of your app.
The unique combination of a semantic object and an action is called an intent. It is used to define navigation to an application.
Enter the following values:
Semantic Object:
Order
Action:
Display
Click the VISUALIZATION tab.
In this tab, you specify how the app will be displayed in the launchpad site.
Enter the following values:
Subtitle:
Shopping Cart
Information:
Order Now!
Icon: Click the browse icon, type
my-sales-order
, click on the displayed icon, and click OK.
On the right, you can see a preview of the tile with all the properties you entered.
Click Save.
- Step 3
Click the Content Manager icon in the left side panel to navigate back to the Content Manager.
You can see your app in the list of content items:
For end users to access the app in runtime, you must assign the app to a role. You also need to assign the app to a group so that it’s visible in the site.
This is described in the following steps.
- Step 4
Content assigned to the
Everyone
role is visible to all users.Click the Everyone role.
Click Edit.
Click the search box in the Assignments panel on the right. Any available apps are shown in the list below.
If you have many apps, you can type some letters of your app name in the search bar, (for example,
Or
) to search for the app.In the Results list, click the + icon next to the
New Orders
app to assign this role to your app.You’ll see that the icon changes.
Click Save.
- Step 5
A group is a set of one or more apps displayed together in a launchpad site.
Assigning apps to groups, makes them visible to the user.Click the Content Manager icon to navigate back to the Content Manager.
Click + New and select Group to create a group.
Enter
Purchasing
as the Title and in the Assignments panel, click inside the search box on the right of the screen, to show all available apps. You should seeNew Orders
.In the Results list, click + to assign the
New Orders
app to your group.Click Save.
- Step 6
Click the Site Directory icon in the left panel to open the Site Directory.
On the
JobCore
tile, click the Go to site icon.This is what you’ll see:
Your
New Orders
app is displayed in thePurchasing
group.Click the
New Orders
tile to launch the app. You can click on the different items in the opened app on the left to view their details.
You’ve successfully added an app to your site. In the next tutorial, you’ll add another app.
What is the name of the tool where you can use various editors to configure apps, roles, groups, and catalogs?