Integrate Your Application with SAP Build Work Zone, Standard Edition

Update content

1. Open your subaccount and navigate to Instances and Subscriptions.

2. Choose the application SAP Build Work Zone, standard edition.

   

3. In the menu on the left side, choose the icon for Channel Manager.

4. Fetch the updated content.

   

Add application to Content Explorer

1. Choose Content Manager in the menu on the left and choose Content Explorer.

   

2. Select the tile HTML5 Apps with your respective subdomain name.

   

3. In the items table, select the checkbox for incident-management app and choose Add.

   

Create a group

1. Go back to the Content Manager and choose Create → Group.

   

2. In the Group title field, enter Incident Management Group.

3. Assign the Incident-Management app to the group.

4. Choose Save.

   

Add application to the Everyone role

1. Back in the Content Manager, choose the Everyone role and choose Edit.

2. In the Assignment Status, assign the Incident-Management app to the role.

3. Choose Save.

   

Create site

1. Navigate to Site Directory and choose Create Site.

   

2. In the Site Name field, enter Incident Management Site and choose Create.

   

3. Now, you’re forwarded to your created site.

The Common Data Model (CDM) is the basis for interoperability and content federation of business content from various SAP and third-party products, all integrated in a unified manner in one site that serves as a central entry point. Business content items such as roles, catalogs, groups, spaces, and pages can be included in the CDM. For this purpose, developers must specify the business content of the site in a cdm.json file that is part of the multitarget application (MTA) and also define design-time and runtime destinations in the mta.yaml file. For more information, see Developing HTML5 Business Solutions as Content Providers and About the Common Data Model.

Create the CDM configuration

1. Create a new folder workzone in the root of your project.

2. Create file cdm.json in the workzone folder and paste the following code snippet in the file:

   JSON Copy

   [
       {
       "_version": "3.0",
       "identification": {
           "id": "defaultCatalogId",
           "title": "{{title}}",
           "entityType": "catalog"
       },
       "payload": {
           "viz": [
           {
               "appId": "ns.incidents",
               "vizId": "incidents-display"
           }
           ]
       },
       "texts": [
           {
           "locale": "",
           "textDictionary": {
               "title": "Default Catalog Title"
           }
           }
       ]
       },
       {
       "_version": "3.0",
       "identification": {
           "id": "defaultGroupId",
           "title": "{{title}}",
           "entityType": "group"
       },
       "payload": {
           "viz": [
           {
               "appId": "ns.incidents",
               "vizId": "incidents-display"
           }
           ]
       },
       "texts": [
           {
           "locale": "",
           "textDictionary": {
               "title": "Business Apps"
           }
           }
       ]
       },
       {
       "_version": "3.0",
       "identification": {
           "id": "defaultRole",
           "entityType": "role",
           "title": "Default Role"
       },
       "payload": {
           "apps": [
           {
               "id": "ns.incidents"
           }
           ],
           "catalogs": [
           {
               "id": "defaultCatalogId"
           }
           ],
           "groups": [
           {
               "id": "defaultGroupId"
           }
           ]
       }
       }
   ]

   Show all 75 lines Show less

Update the mta.yaml file

1. Add html5-repo-runtime under resources:

   yaml[3-7] Copy

      resources:
       ...
       - name: incident-management-html5-repo-runtime
         type: org.cloudfoundry.managed-service
         parameters:
           service: html5-apps-repo
           service-plan: app-runtime

2. Update the incident-management-destinations module:

   1. Add the incidents-html-repo-runtime to the requires section:

      yaml[4-7] Copy

      - name: incident-management-destinations
        type: com.sap.application.content
        requires:
        - name: incident-management-html5-repo-runtime
          parameters:
            service-key: 
              name: incident-management-html5-repo-runtime-service-key

   2. Add the following code snippet for subaccount destinations in the parameters.content section:

      yaml[7-12] Copy

      - name: incident-management-destinations
        type: com.sap.application.content
        requires:
        ...
        parameters:
          content:
              subaccount:
                  destinations:
                  - Name: incident-management-cdm
                    ServiceInstanceName: incident-management-html5-repo-runtime
                    ServiceKeyName: incident-management-html5-repo-runtime-service-key
                    URL: https://html5-apps-repo-rt.${default-domain}/applications/cdm/<cloud-service-name>
              instance:
                  existing_destinations_policy: update
                  destinations:
                  ...

   You can find the value for <cloud-service-name> in the app/incidents/webapp/manifest.json file.

   json[3] Copy

   "sap.cloud": {
      "public": true,
      "service": "incidentmanagement.service"
   }

3. Update the incident-management-destination resource:

   1. Add the following code snippet for destinations to the parameters.config.init_data section:

      [8-15] Copy

      - name: incident-management-destination
        type: org.cloudfoundry.managed-service
        parameters:
          ...
          config:
          ...
            init_data:
              subaccount:
                destinations:
                - Name: incident-management-rt
                  Authentication: NoAuthentication
                  ProxyType: Internet
                  Type: HTTP
                  URL: https://<subdomain>.launchpad.${default-domain}
                  CEP.HTML5contentprovider: true
              instance:
                existing_destinations_policy: update
                destinations:
                ...

      Replace <subdomain> with your SAP BTP account’s subdomain. You can find the subdomain in the Overview page in SAP BTP cockpit.

4. Create a new module incident-management-workzone-cdm to add the CDM Configuration from the cdm.json file as part of the incident-management-app-deployer.

   YAML Copy

     - name: incident-management-workzone-cdm
       type: html5
       path: workzone
       build-parameters:
         build-result: .
         supported-platforms:
           []

5. Update the incident-management-app-deployer module:

   1. Update (path, build-result, and target-path parameters) of the incident-management-app-deployer module as follows:

      YAML Copy

      - name: incident-management-app-deployer
        type: com.sap.application.content
        path: gen
        ...
        build-parameters:
          build-result: app/
          requires:
            - name: incidentmanagementincidents
              artifacts:
                - incidents.zip
              target-path: app/

   2. Add the following lines to the requires section:

      yaml[5-6] Copy

        - name: incident-management-app-deployer
          type: com.sap.application.content
          path: gen
          requires:
            - name: incident-management-auth
            - name: incident-management-destination

   3. Add the following to the build-parameters.requires section:

      YAML Copy

        - name: incident-management-workzone-cdm
          artifacts:
            - cdm.json
          target-path: app/

6. Verify. Here’s how your mta.yaml file looks like at this stage:

   YAML Copy

   _schema-version: 3.3.0
   ID: incident-management
   version: 1.0.0
   description: "A simple CAP project."
   parameters:
     enable-parallel-deployments: true
     deploy_mode: html5-repo
   build-parameters:
     before-all:
       - builder: custom
         commands:
           - npm ci
           - npx cds build --production
   modules:
     - name: incident-management-srv
       type: nodejs
       path: gen/srv
       parameters:
         buildpack: nodejs_buildpack
         readiness-health-check-type: http
         readiness-health-check-http-endpoint: /health
       build-parameters:
         builder: npm
       provides:
         - name: srv-api # required by consumers of CAP services (e.g. approuter)
           properties:
             srv-url: ${default-url}
       requires:
         - name: incident-management-db
         - name: incident-management-auth
         - name: incident-management-destination
   
     - name: incident-management-db-deployer
       type: hdb
       path: gen/db
       parameters:
         buildpack: nodejs_buildpack
       requires:
         - name: incident-management-db
   
       - name: incident-management-app-deployer
         type: com.sap.application.content
         path: gen
         requires:
           - name: incident-management-auth
           - name: incident-management-destination
           - name: incident-management-html5-repo-host
             parameters:
               content-target: true
         build-parameters:
           build-result: app/
           requires:
             - name: incident-management-workzone-cdm
               artifacts:
                 - cdm.json
               target-path: app/
             - name: incidentmanagementincidents
               artifacts:
                 - incidents.zip
               target-path: app/
   
     - name: incident-management-app-deployer
       type: com.sap.application.content
       path: gen
       parameters:
         config:
           destinations:
           - forwardAuthToken: true
             name: incident-management-srv-api
             url: ~{srv-api/srv-url}
           - name: ui5
             url: https://ui5.sap.com
       requires:
         - name: srv-api
         - name: incident-management-auth
         - name: incident-management-html5-repo-host
           parameters:
             content-target: true
       build-parameters:
         build-result: app/
         requires:
           - name: incident-management-workzone-cdm
             artifacts:
               - cdm.json
             target-path: app/
           - name: incidentmanagementincidents
             artifacts:
               - incidents.zip
             target-path: app/
   
     - name: incidentmanagementincidents
       type: html5
       path: app/incidents
       build-parameters:
         build-result: dist
         builder: custom
         commands:
           - npm ci
           - npm run build
         supported-platforms:
           []
   
     - name: incident-management-destinations
       type: com.sap.application.content
       requires:
         - name: incidents_html_repo_runtime
           parameters:
             service-key:
               name: incidents-html5-app-runtime-service-key
         - name: incident-management-auth
           parameters:
             service-key:
               name: incident-management-auth-key
         - name: incident-management-html5-repo-host
           parameters:
             service-key:
               name: incident-management-html5-repo-host-key
         - name: srv-api
         - name: incident-management-destination
           parameters:
             content-target: true
       build-parameters:
         no-source: true
       parameters:
         content:
           subaccount:
             existing_destinations_policy: update
             destinations:
               - Name: incident-management_cdm
                 ServiceInstanceName: incidents-html5-app-runtime-service
                 ServiceKeyName: incidents-html5-app-runtime-service-key
                 URL: https://html5-apps-repo-rt.${default-domain}/applications/cdm/<cloud-service-name>
   
   resources:
     - name: incident-management-db
       type: com.sap.xs.hdi-container
       parameters:
         service: hana
         service-plan: hdi-shared
     - name: incident-management-html5-repo-host
       type: org.cloudfoundry.managed-service
       parameters:
         service: html5-apps-repo
         service-plan: app-host
     - name: incident-management-auth
       type: org.cloudfoundry.managed-service
       parameters:
         service: xsuaa
         service-plan: application
         path: ./xs-security.json
         config:
           xsappname: incident-management-${org}-${space}
           tenant-mode: dedicated
     - name: incidents_html_repo_runtime
       type: org.cloudfoundry.managed-service
       parameters:
         service: html5-apps-repo
         service-name: incidents-html5-app-runtime-service
         service-plan: app-runtime
     - name: incident-management-destination
       type: org.cloudfoundry.managed-service
       parameters:
         service: destination
         service-plan: lite
         config:
           init_data:
             subaccount:
               existing_destinations_policy: update
               destinations:
                 - Authentication: NoAuthentication
                   Name: incident-management-rt
                   ProxyType: Internet
                   Type: HTTP
                   URL: https://<subdomain>.launchpad.${default-domain}
                   CEP.HTML5contentprovider: true

   Show all 175 lines Show less

Deploy your application in SAP BTP, Cloud Foundry runtime

1. Open a terminal in your project’s root folder and run the following commands:

   Shell Copy

   mbt build
   cf deploy mta_archives/incident-management_1.0.0.mtar 

Create a new content provider

1. Open your subaccount and navigate to Instances and Subscriptions.

2. Choose the application SAP Build Work Zone, standard edition.

   

3. In the menu on the left side, choose the icon for Channel Manager.

4. Choose New → Content Provider on the right.

   

5. In the New Content Provider dialog:

   1. In the Title field еnter CDM.

   2. In the Design-Time Destination field, choose incident-management-cdm from the dropdown.

   3. In the Runtime Destination field, choose incident-management-rt from the dropdown.

   4. Choose Save.

   

6. Fetch the updated content from the CDM content provider.

   

Create site

1. Navigate to Site Directory and choose Create Site.

   

2. In the Site Name field, enter Incident Management Site and choose Create.

   

3. When you’re forwarded to your created site, choose Role Assignments and then choose Edit.

   

4. In the Assignment status field, switch on Default Role for your site and choose Save.

   

Assign CDM role collection

You need to assign your user to the ~cdm_defaultRole role collection, so you’re able to see the application tile when accessing the SAP Build Work Zone, standard edition site later on.

1. Open your subaccount and navigate to Security → Users.

2. Choose your user.

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

   

   You’ve assigned the ~cdm_defaultRole role collection to your user.

Log out and log in again to make sure your new role collection is considered.