Skip to Content

Set Up SAP Fiori launchpad in Cloud Foundry to Get Notifications

test
0 %
Set Up SAP Fiori launchpad in Cloud Foundry to Get Notifications
Details

Set Up SAP Fiori launchpad in Cloud Foundry to Get Notifications

June 23, 2020
Created by
October 15, 2019
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
  1. 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.

      Launch SAP Web IDE from SCP Trial account
    • To access SAP Web IDE from your Neo sub-account, open SAP Cloud Platform Cockpit and navigate to your Neo sub-account.

      Subaccount page in SCP cockpit

      Select SAP Web IDE Full-Stack service.

      SAP Web IDE service in SCP subaccount page

      Select Go to Service to launch SAP Web IDE.

      SAP Web IDE service overview page
  2. 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).

    Select create new project from template
  3. Choose Multi-Target Application from the Cloud Foundry Environment and Featured Category, click Next.

    Select multi-target application
  4. Enter iot-ds as a project name, click Next.

    Enter project name
  5. Check the Use HTML5 Application Repository checkbox, click Finish.

    Enter MTA details
  6. SAP Web IDE will generate the new project in your workspace. Click Show Hidden Files button to see all the files in the application.

    Show hidden files in project
  7. Create a new file by right clicking on iot-ds project.

    Create a new file
  8. Enter xs-security.json as File Name and click OK.

    Enter file name
  9. A blank xs-security.json file should be opened in the code editor.

  10. 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"
          ]
        }
      ]
    }  
    
  11. Click Save.

    Save the file
Log on to answer question
Step 2: Create SAP Fiori launchpad site
  1. 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.

    Enable SAP Fiori launchpad site SAP Web IDE extension
  2. In Development perspective, right click on the project and add a new SAP Fiori Launchpad Site Module.

    Add new SAP Fiori launchpad site module
  3. Enter PortalSite as Module name.

  4. Click Finish.

    Enter module name
  5. SAP Fiori launchpad site has been added to the MTA project.

    New SAP Fiori launchpad site created
Log on to answer question
Step 3: Configure SAP IoT Notification service
  1. Open CommonDataModel.json in Code Editor.

    Open file CommonDataModel.json in code editor
  2. Find the location of the JSON key payload.sites.payload.config in the file.

    Position in file where changes should be made
  3. 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
    				}
    			}
    		}
    	}
    }	  
    
    File with changes made
  4. Save the changes.

  5. Double click xs-app.json file in the folder iot-ds_appRouter to open it in the Code Editor.

  6. Add the following route for notification service:

    {
      "source": "^/ns/(.*)",
      "target": "$1",
      "service": "com.sap.leonardo.iot",
      "endpoint": "notifications"
    }  	  
    
    File xs-app.json with changes made
  7. Save the file.

Log on to answer question
Step 4: Add IoT service resource
  1. Right click the iot-ds project and add new SAP Cloud Platform service.

    Add new SAP cloud platform service
  2. 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.

  3. Enter iotae in the Search field.

  4. Select the entry in the search result.

  5. Click Next.

    Enter search term
  6. In the field Add or Reuse an Existing Instance, select Reuse Service.

  7. In the field Service Name (Instance), select your service instance from the dropdown. The service instance name is customer specific.

  8. In the field Resource Name, enter the same service instance name selected in the previous step.

  9. The field Plan should be automatically filled.

  10. Click Next.

    Enter service defintion
  11. Click Finish.

    Confirm service creation
Log on to answer question
Step 5: Add UAA service resource
  1. Open mta.yaml in Code Editor.

    Open mta.yaml file in code editor
  2. 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
    
    Update file and save changes

    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 .

    Sample indentation error in code editor

    Note: Please use spaces and not tabs when applying indentations in the mta.yaml file.

  3. Save the changes.

Which services have you created?
×
Step 6: Configure service bindings
  1. Open mta.yaml file in MTA Editor.

  2. Select iot-ds_appRouter in Modules.

    Select module in MTA editor
  3. Scroll down to the Requires section.

  4. Click the + button.

  5. A new entry will be created in the table. Select the same iotae service instance name selected in step 4.

    Add iot resource to approuter module
  6. Click the + button.

  7. A new entry will be created in the table. Select the uaa instance name created in step 5.

    Add uaa resource to approuter module
  8. Select PortalSite in Modules.

  9. Scroll down to the Requires section.

  10. Click the + button.

  11. A new entry will be created in the table. Select the iotae service instance name selected in step 4.

  12. Save the file.

    Add iot resource to portal module
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:

  1. Open mta.yaml in the code editor.

  2. Type a # character in front of the lines shown below.

    Disable UI Deployer in mta.yaml file
  3. Save the file.

Log on to answer question
Step 8: Build MTA project
  1. In SAP Web IDE, right-click the iot-ds project and click Build to start the build of the project.

    Build project is SAP Web IDE
  2. When the build is completed, a notification will be displayed at the top right corner of the SAP Web IDE.

  3. You can also check the status of the build by viewing the logs in the SAP Web IDE console.

    Project is built successfully
Log on to answer question
Step 9: Deploy MTA project
  1. 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
  2. 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.

    Start deployment of project to SAP Cloud Platform
  3. 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.

  4. Click Deploy.

    Enter SAP Cloud Platform information
  5. When the deployment is completed, a notification will be displayed at the top right corner of the SAP Web IDE.

  6. You can also check the status of the deployment by viewing the logs in the SAP Web IDE console.

    Project is deployed successfully
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.

  1. From SAP IoT launchpad, select the Thing Modeler tile.

    Select Thing Modeler in SAP Fiori launchpad
  2. Select the greenhouse package and select Things on the left panel.

  3. Click the Connectivity Information icon on the top right corner.

    Select greenhouse package and click connectivity information
  4. Copy the thing id. We’ll use it in the next step.

    Copy thing id
Log on to answer question
Step 11: Generate test notification
  1. From SAP IoT launchpad, select the Actions tile.

    Select Actions from SAP Fiori launchpad
  2. Select Greenhouse Action.

    Select greenhouse action
  3. Click Test.

    Click Test
  4. Enter the Thing Id in the Test Action dialog. Click Test.

    Click Test
Log on to answer question
Step 12: Check notification in Portal site
  1. 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.

  2. Navigate to the Applications screen.

  3. Click iot-ds_appRouter.

    Find deployed application in SAP Cloud Platform cockpit
  4. You should see the route displayed under Application Routes.

    Find application route
  5. 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

  6. Launch SAP Fiori launchpad site in a browser. You should see a SAP Fiori notification alert.

    Notification alert displayed in SAP Fiori launchpad
  7. Click on the alert icon and the SAP Fiori notification panel will be opened.

    Open notification
Log on to answer question

Next Steps

Back to top