An SAP Fiori launchpad site provides a user with access to their notifications and applications deployed on the cloud.
Step 1: Create MTA project
-
Launch SAP Web IDE in a browser tab.
-
If you have a SAP Cloud Platform trial account, click here to open home page and click Launch SAP Web IDE.
-
To access SAP Web IDE from your Neo sub-account, open SAP Cloud Platform Cockpit and navigate to your Neo sub-account.
Select SAP Web IDE Full-Stack service.
Select Go to Service to launch SAP Web IDE.
-
In the development perspective, right-click on your workspace and create a new project from a template (there are other ways to do this, for example, from the home page).
-
Choose Multi-Target Application from the Cloud Foundry
Environment and Featured
Category, click Next.
-
Enter iot-ds
as a project name, click Next.
-
Check the Use HTML5 Application Repository checkbox, click Finish.
-
SAP Web IDE will generate the new project in your workspace. Click Show Hidden Files button to see all the files in the application.
-
Create a new file by right clicking on iot-ds
project.
-
Enter xs-security.json
as File Name and click OK.
-
A blank xs-security.json
file should be opened in the code editor.
-
Paste the following content into the file.
{
"xsappname": "iot-ds-app",
"tenant-mode": "dedicated",
"description": "Security profile of called application",
"scopes": [
{
"name": "uaa.user",
"description": "UAA"
}
],
"role-templates": [
{
"name": "Token_Exchange",
"description": "UAA",
"scope-references": [
"uaa.user"
]
}
]
}
-
Click Save.
Step 2: Create SAP Fiori launchpad site
-
Enable SAP Fiori launchpad site Web IDE feature. Go to Web IDE Preference, search for portal
in Extensions. Turn on this feature. Click Save to save the change.
-
In Development perspective, right click on the project and add a new SAP Fiori Launchpad Site Module.
-
Enter PortalSite
as Module name.
-
Click Finish.
-
SAP Fiori launchpad site has been added to the MTA project.
Step 3: Configure SAP IoT Notification service
-
Open CommonDataModel.json
in Code Editor.
-
Find the location of the JSON key payload.sites.payload.config
in the file.
-
Update the value as follows:
"config": {
"ushellConfig": {
"renderers": {
"fiori2": {
"componentData": {
"config": {
"enableRecentActivity": false,
"enableNotificationsUI": true,
"applications": {
"Shell-home": {
"enableNotificationsPreview": true
}
}
}
}
}
},
"services": {
"Notifications": {
"config": {
"enabled": true,
"serviceUrl": "/ns/Consumer.svc",
"webSocketUrl": "/ns/WebSocket.svc",
"pollingIntervalInSeconds": 10
}
}
}
}
}
-
Save the changes.
-
Double click xs-app.json
file in the folder iot-ds_appRouter
to open it in the Code Editor.
-
Add the following route for notification service:
{
"source": "^/ns/(.*)",
"target": "$1",
"service": "com.sap.leonardo.iot",
"endpoint": "notifications"
}
-
Save the file.
Step 4: Add IoT service resource
-
Right click the iot-ds
project and add new SAP Cloud Platform service.
-
If you were prompted to login, enter your user name and password for the Cloud Foundry space which you have configured in the SAP Web IDE Cloud Foundry preferences.
-
Enter iotae
in the Search field.
-
Select the entry in the search result.
-
Click Next.
-
In the field Add or Reuse an Existing Instance, select Reuse Service.
-
In the field Service Name (Instance), select your service instance from the dropdown. The service instance name is customer specific.
-
In the field Resource Name, enter the same service instance name selected in the previous step.
-
The field Plan should be automatically filled.
-
Click Next.
-
Click Finish.
Step 5: Add UAA service resource
-
Open mta.yaml
in Code Editor.
-
Add the following UAA resource under resources
. Please use the Copy button to copy the formatted configuration and paste it in the specified location in the yaml
file.
- name: uaa_iot-ds
parameters:
path: ./xs-security.json
service-plan: application
service: xsuaa
type: org.cloudfoundry.managed-service
If you see a red exclamation point on a line in the code editor, it usually indicates a formatting issue with the line. Please check the indentation of the indicated line as well as the line above or below it. In this example, the entry -name: uaa-iot-ds
is misaligned with the entry -name: iot-ds-html5_repo_host
.
Note: Please use spaces and not tabs when applying indentations in the mta.yaml file.
-
Save the changes.
Step 6: Configure service bindings
-
Open mta.yaml
file in MTA Editor.
-
Select iot-ds_appRouter
in Modules.
-
Scroll down to the Requires section.
-
Click the + button.
-
A new entry will be created in the table. Select the same iotae
service instance name selected in step 4.
-
Click the + button.
-
A new entry will be created in the table. Select the uaa
instance name created in step 5.
-
Select PortalSite
in Modules.
-
Scroll down to the Requires section.
-
Click the + button.
-
A new entry will be created in the table. Select the iotae
service instance name selected in step 4.
-
Save the file.
Step 7: Test notification in launchpad site
If you want to test notifications in SAP Fiori launchpad site at this point, you’ll need to comment out the references to UI Deployer
in mta.yaml
. The UI Deployer
is used for deploying UI components but we have not added any UI components to our project yet and it will cause the deployment to fail. We’ll add UI components to our project in the next tutorial Build a Decision Support UI in the Web IDE and we will be able to test notifications without having to make these changes.
Testing notification is optional at this point. To continue, please following the instructions below and complete Steps 8 to 12.
Otherwise, you can continue with the next tutorial Build a Decision Support UI in SAP Web IDE.
To comment out the references to UI Deployer
:
-
Open mta.yaml
in the code editor.
-
Type a #
character in front of the lines shown below.
-
Save the file.
Step 8: Build MTA project
-
In SAP Web IDE, right-click the iot-ds
project and click Build to start the build of the project.
-
When the build is completed, a notification will be displayed at the top right corner of the SAP Web IDE.
-
You can also check the status of the build by viewing the logs in the SAP Web IDE console.
Step 9: Deploy MTA project
-
You need to have the following entitlements in your Cloud Foundry sub-account to deploy and run our application. You can find more information on how to configure entitlements in Configure Entitlements and Quotas for Subaccounts.
Entitlement |
Unit |
Portal |
1 (or unlimited) |
HTML5 Application |
2 |
Application Runtime Memory |
1 Gib (Minimum) |
Destination |
1 |
-
To start a deployment, expand the mta_archives
folder in your project, right click on the mtar
file inside the folder and click Deploy to SAP Cloud Platform.
-
Select the appropriate Cloud Foundry API Endpoint, Organization and Space for your deployment. If you cannot find your selections, please check your Cloud Foundry settings in Web IDE preference. For more information, please see Step 6 and Step 7 of Prepare SAP Web IDE for Cloud Foundry Development.
-
Click Deploy.
-
When the deployment is completed, a notification will be displayed at the top right corner of the SAP Web IDE.
-
You can also check the status of the deployment by viewing the logs in the SAP Web IDE console.
Step 10: Retrieve thing id
We will need to retrieve the thing id for the next Step. If you already have the thing id, please proceed to the next step.
-
From SAP IoT launchpad, select the Thing Modeler tile.
-
Select the greenhouse
package and select Things on the left panel.
-
Click the Connectivity Information icon on the top right corner.
-
Copy the thing id. We’ll use it in the next step.
Step 11: Generate test notification
-
From SAP IoT launchpad, select the Actions tile.
-
Select Greenhouse Action.
-
Click Test.
-
Enter the Thing Id in the Test Action dialog. Click Test.
Step 12: Check notification in Portal site
-
To find the URL of the SAP Fiori launchpad site, go to the SAP Cloud Platform Cockpit, navigate to the space of the sub-account where the MTA project is deployed.
-
Navigate to the Applications screen.
-
Click iot-ds_appRouter
.
-
You should see the route displayed under Application Routes.
-
Append /cp.portal/site
at the end of the application route to create the URL of the SAP Fiori launchpad site.
For example:
Application route:
mytenant-space1-approuter1.cfapps.eu10.hana.ondemand.com
The SAP Fiori launchpad site URL will be
https://mytenant-space1-approuter1.cfapps.eu10.hana.ondemand.com/cp.portal/site
-
Launch SAP Fiori launchpad site in a browser. You should see a SAP Fiori notification alert.
-
Click on the alert icon and the SAP Fiori notification panel will be opened.