Set Up SAP Fiori launchpad in Cloud Foundry to Get Notifications

0 %

Set Up SAP Fiori launchpad in Cloud Foundry to Get Notifications

Details

Set Up SAP Fiori launchpad in Cloud Foundry to Get Notifications

Andrew Ng

June 23, 2020

Created by

October 15, 2019

Beginner

40 min.

Create and configure an SAP Fiori launchpad site to receive notifications from SAP IoT using SAP Web IDE.

You will learn

How to create a new MTA project
How to add a SAP Fiori launchpad site to a MTA project

An SAP Fiori launchpad site provides a user with access to their notifications and applications deployed on the cloud.

Step 1: Create MTA project

View Full Instructions

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.

Done

Log on to answer question

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.

Done

Log on to answer question

Step 3: Configure SAP IoT Notification service

View Full Instructions

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.

Done

Log on to answer question

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.

Done

Log on to answer question

Step 5: Add UAA service resource

View Full Instructions

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.

Which services have you created? Decision Support IoT Service Destination Service UAA Service

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.

Done

Log on to answer question

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.

Done

Log on to answer question

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.

Done

Log on to answer question

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.

Entitlement	Unit
Portal	1 (or unlimited)
HTML5 Application	2
Application Runtime Memory	1 Gib (Minimum)
Destination	1

Done

Log on to answer question

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.

Done

Log on to answer question

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.

Done

Log on to answer question

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.