Skip to Content

Add the SAP Launchpad Service

test
0 %

Add the SAP Launchpad Service

November 16, 2021
Created by
June 14, 2021
This tutorial shows you how to add the SAP Launchpad application.

You will learn

  • How to add Navigation Targets
  • How to add SAP Cloud Service
  • How to add the Destination Service and destinations
  • How to subscribe to SAP Launchpad service
  • How to test your SAP Launchpad site
QR code

To start with this tutorial use the result in the cap-mta-deployment branch.


Step 1: Add navigation targets

In this tutorial, you will use the SAP Launchpad service to access your CAP service and its UI. Additionally, the SAP Launchpad service provides features like personalization, role-based visibility, theming, and more. You can add multiple applications to one launchpad, including subscribed ones and applications from SAP S/4HANA or SAP BTP.

Navigation targets are required to navigate between applications, but also to start the applications from SAP Launchpad service. In the next steps, you add the navigation targets Risks-display and Mitigations-display to the application manifest (manifest.json) file.

Log on to answer question

Step 2: Add navigation target for Risks UI
  1. Open the file app/risks/webapp/manifest.json.

  2. Add the external navigation target to the sap.app JSON object. You can add it right behind the sourceTemplate object:

{
  ...
  "sap.app": {
    "id": "ns.risks",
    ...
    "sourceTemplate": {
      ...
    },
    "crossNavigation": {
      "inbounds": {
        "Risks-display": {
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          },
          "semanticObject": "Risks",
          "action": "display"
        }
      }
    }
  }
}
Which technical concept is introduced and configured in this tutorial?
×

Step 3: Add navigation target for Mitigations UI

Do the same with the mitigations manifest file app/mitigations/webapp/manifest.json, but with the semanticObject name Mitigations.

{
  ...
  "sap.app": {
    "id": "ns.mitigations",
    ...
    "dataSources": {
      ...
    },
    "crossNavigation": {
      "inbounds": {
        "Mitigations-display": {
          "signature": {
            "parameters": {},
            "additionalParameters": "allowed"
          },
          "semanticObject": "Mitigations",
          "action": "display"
        }
      }
    }
  }
}
Log on to answer question

Step 4: Add SAP Cloud service

Add your SAP Cloud service at the end of app/risks/webapp/manifest.json and app/mitigations/webapp/manifest.json files:

{
  "_version": "",
  ...
  "sap.fiori": {
    ...
  },
  "sap.cloud": {
    "public": true,
    "service": "cpapp.service"
  }
}

The name of your SAP Cloud service (cpapp in this case) should be unique within an SAP BTP region. It is used to identify the resources that belong to one UI in the SAP Launchpad service.

Log on to answer question

Step 5: Add the SAP Destination service

Add the following lines to the resources section of the mta.yaml file:

resources:
   ...
 - name: cpapp-destination
   type: org.cloudfoundry.managed-service
   parameters:
     service: destination
     service-plan: lite
     config:
       HTML5Runtime_enabled: true

The SAP Destination service stores URLs and credentials (so called “destinations”) to access applications and services.

The service configuration option HTML5Runtime_enabled: true is required to make the destinations available to the SAP Launchpad service.

Log on to answer question

Step 6: Add SAP HTML5 Application Repository service

Add the following lines to the resources section of the mta.yaml file:

resources:
   ...
 - name: cpapp-html5-repo-host
   type: org.cloudfoundry.managed-service
   parameters:
     service: html5-apps-repo
     service-plan: app-host

The SAP HTML5 Application Repository service stores static UI files. In the deployment, the SAP Fiori UI applications are uploaded to this service and the SAP Launchpad service serves the UIs from there.

Log on to answer question

Step 7: Add destinations

You add three destinations for the SAP Destination service that are used by the SAP Launchpad service:

  1. cpapp-app-srv - The destination to the CAP service. It is required by your UIs running in SAP Launchpad service to access your service.

  2. cpapp-html5-repo-host - The destination to your SAP HTML5 Application Repository service instance. It allows the SAP Launchpad service to access your UI applications.

  3. cpapp-uaa - The destination to your XSUAA service instance. The SAP Launchpad service needs it to convert OAuth tokens for use with your CAP service.

Add the following lines to the modules section of the mta.yaml file:

modules:
   ...
 - name: cpapp-destinations
   type: com.sap.application.content
   requires:
     - name: cpapp-uaa
       parameters:
         service-key:
           name: cpapp-uaa-key
     - name: cpapp-html5-repo-host
       parameters:
         service-key:
           name: cpapp-html5-repo-host-key
     - name: srv-api
     - name: cpapp-destination
       parameters:
         content-target: true
   parameters:
     content:
       instance:
         destinations:
           - Authentication: OAuth2UserTokenExchange
             Name: cpapp-app-srv
             TokenServiceInstanceName: cpapp-uaa
             TokenServiceKeyName: cpapp-uaa-key
             URL: '~{srv-api/srv-url}'
             sap.cloud.service: cpapp.service
           - Name: cpapp-html5-repo-host
             ServiceInstanceName: cpapp-html5-repo-host
             ServiceKeyName: cpapp-html5-repo-host-key
             sap.cloud.service: cpapp.service
           - Authentication: OAuth2UserTokenExchange
             Name: cpapp-uaa
             ServiceInstanceName: cpapp-uaa
             ServiceKeyName: cpapp-uaa-key
             sap.cloud.service: cpapp.service
         existing_destinations_policy: update
   build-parameters:
     no-source: true

What happens now? The cpapp-app-srv destination uses the URL exported from the cpapp-srv module. Besides exporting the CAP service’s URL as srv-url property, the XSUAA service instance that is required for authentication and authorization checks is added here.

modules:
   ...
   provides:
    - name: srv-api      # required by consumers of CAP services (for example, approuter)
      properties:
        srv-url: ${default-url}
 # -------------------- SIDECAR MODULE ------------------------
Log on to answer question

Step 8: Install required UI tools and MTA
  1. Install SAPUI5 tooling package as global module in the root folder of your project:

    npm install --global @sap/ux-ui5-tooling
    
  2. Install SAP Fiori application generator package as global module:

    npm install --global @sap/generator-fiori
    
  3. Install MTA package as global module:

    npm install --global mta
    
Log on to answer question

Step 9: Add SAP Fiori elements Risks application
  1. Switch to app/risks folder:

    cd app/risks
    
  2. Add deployment configuration:

    fiori add deploy-config cf
    

    If the SAP Fiori generator fails, make sure to remove other .yo-rc.json files you might have in any of your project’s directories and try again.

  3. It will ask for the destination name.

  4. Enter cpapp-app-srv for the destination name.

Log on to answer question

Step 10: Add SAPUI5 freestyle Mitigations application

Repeat the procedure from the previous step for the app/mitigation folder.

  1. Switch to app/mitigations folder:

    cd ../../app/mitigations
    
  2. Add deployment configuration:

    fiori add deploy-config cf
    

    It will ask for the destination name.

  3. Enter cpapp-app-srv for the destination name again.

Log on to answer question

Step 11: Check the results in mta.yaml

The newly added modules nsrisks and nsmitigations do the build of the SAP Fiori application. Each build result is a ZIP file that contains optimized UI resources and a ZIP file manifest-bundle.zip with the manifest.json and the i18n files. The latter is required by the SAP Launchpad service.

  1. Check the risks application module nsrisks:

    modules:
      ...
    - name: nsrisks
      type: html5
      path: app/risks
      build-parameters:
        build-result: dist
        builder: custom
        commands:
        - npm install
        - npm run build:cf
        supported-platforms: []
    
  2. Check the mitigations application module nsmitigations:

    modules:
      ...
    - name: nsmitigations
      type: html5
      path: app/mitigations
      build-parameters:
        build-result: dist
        builder: custom
        commands:
        - npm install
        - npm run build:cf
        supported-platforms: []
    
  3. Check the HTML5 application deployer.

    The module cpapp-app-content deploys the ZIP files from the nsrisks.zip and nsmitigations.zip to the SAP HTML5 Application Repository service, where it can be accessed by the SAP Launchpad service using the previously added destinations.

    modules:
      ...
    - name: cpapp-app-content
      type: com.sap.application.content
      path: .
      requires:
      - name: cpapp-html5-repo-host
        parameters:
          content-target: true
      build-parameters:
        build-result: resources
        requires:
        - artifacts:
          - nsrisks.zip
          name: nsrisks
          target-path: resources/
        - artifacts:
          - nsmitigations.zip
          name: nsmitigations
          target-path: resources/
    
Log on to answer question

Step 12: Add UI build files to .gitignore

The SAP Fiori build files do not need to be stored in GitHub. You can add it to your .gitignore file:

dist/
resources/
app/*/package-lock.json

Can’t see .gitignore?

.gitignore files are excluded by default from the file types shown in the VS Code workspace. In VS Code, go to File (for macOS: Code) Preferences Settings, search for fileexclude, and delete the setting for .gitignore files under the Workspace tab.

Log on to answer question

Step 13: Re-build and re-deploy the .mtar file
  1. Build your project with the MTA Build Tool (MBT) in the root folder of your project:

    mbt build -t ./
    
  2. Deploy your project to SAP BTP:

    cf deploy cpapp_1.0.0.mtar
    

    Your SAP HANA Cloud instance will be automatically stopped overnight, according to the server region time zone. That means you need to restart your instance every day before you start working with it.

    Additional Documentation:

    How to build an MTA archive from the project sources

  3. Go to SAP BTP cockpit to check the deployed content.

Log on to answer question

Step 14: Subscribe to SAP Launchpad service
  1. Enter your Global Account. If you’re using a trial account, choose Go To Your Trial Account.

  2. Choose Account Explorer.

  3. In the Subaccounts tab, choose the subaccount where you have deployed your service and application.

    Choose Subaccount
  4. Choose Services Service Marketplace on the left.

  5. Search for the Launchpad Service tile and choose Create.

    Create Launchpad Service
  6. Keep the default settings for Service and Plan and choose Create.

    New Instance or Subscription

You have now subscribed to the SAP Launchpad service.

Log on to answer question

Step 15: Assing SAP Launchpad role collection

You need to assign your user to the Launchpad_Admin role collection, so you don’t get an error accessing the Launchpad Service site later on.

  1. Choose Security Users on the left.

  2. Choose your user.

  3. Under Role Collections on the right, choose Assign Role Collection and assign the Launchpad_Admin role collection to your user.

    Add role
  4. Open another browser or clear your browser’s cache.

See section Initial Setup in the SAP Launchpad service’s documentation for more details.

Log on to answer question

Step 16: Create your SAP Launchpad site
  1. Choose Services Instances and Subscriptions on the left.

  2. Locate the Launchpad Service under Subscriptions and choose Go to Application.

    Instances and Subscriptions
  3. Choose Provider Manager on the left and refresh the HTML5 Apps entry there.

    Refresh HTML5 Apps

    Content providers aren’t reloaded automatically when you push an app, so it’s important to manually refresh.

  4. Choose Content Manager Content Explorer and open the content provider HTML5 Apps.

    HTML5 Apps Content Provider
  5. Add the Risks and Mitigations to My Content.

    Add Apps to My Content
  6. Choose Content Manager My Content.

  7. In the item list, choose the item Everyone.

    Role Everyone

    Everyone is a role that has to be assigned to the Risks and Mitigations apps so all users can access them.

  8. Choose Edit, click on the search field, assign the Risks and Mitigations apps to the role, and choose Save.

    Add Apps to Role
  9. Navigate back to My Content.

  10. Choose New Group.

    New Group
  11. Type in Risk Management as the title of the group and assign the Risks and Mitigations apps to it.

    Create Group

    This way, you’re telling the SAP Launchpad service to display the Risks and Mitigations apps in a group called Risk Management.

  12. Choose Site Directory Create Site.

    Create Site
  13. Type in Risk Management Site for the site name and choose Create.

    The new site gets the Everyone role by default, so you don’t have to assign it explicitly. The default site properties are sufficient for the purposes of this tutorial.

Log on to answer question

Step 17: Test your SAP Launchpad site
  1. Choose Go to site.

    Go to site

    You can see the Risk Management group that includes the Mitigations and Risks apps.

  2. Open the Risks app.

    Risk Management Site

You have launched your Risks app through the SAP Launchpad service.

Risks App

If you choose Go, you will get an error because you haven’t assigned a role collection to your user yet. We’ll do it in the next tutorial.

Log on to answer question

The result of this tutorial can be found in the launchpad-service branch.


Next Steps

Back to top