Integrate Your Application Deployed in SAP BTP, Kyma Runtime 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. Choose the refresh icon to fetch the updated content.

   

Add application to Content Explorer

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

   

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

   

3. In the items table, set the checkmark for the app Incidents and choose the button Add.

   

Create a group

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

   

2. Add the title Incident Management Group.

3. In the Assignment Status, choose the slider to assign the Incident-Management app to the group.

4. Choose Save.

   

Add application to the Everyone role

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

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

3. Choose Save.

   

Create site

1. Navigate to Site Directory and choose Create Site.

   

2. Enter the site name as 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.

Update the Chart.yaml file and the values.yaml file

1. Add the following code snippet to chart/Chart.yaml file:

   YAML Copy

   - name: service-instance
     alias: html5-apps-repo-runtime
     version: ">0.0.0"

2. Run the following command to automate the setup for HTML5 application deployment:

   Shell Copy

   cds add html5-repo

3. Add the following configurations for creating an html5-apps-repo-runtime service instance in the values.yaml file:

   YAML Copy

   html5-apps-repo-runtime: 
     serviceOfferingName: html5-apps-repo
     servicePlanName: app-runtime

4. Delete the destination configuration from chart/values.yaml:

   YAML Copy

   destination:
     serviceOfferingName: 'destination'
     servicePlanName: 'lite'
     parameters:
       version: '1.0.0'
       HTML5Runtime_enabled: true

5. Update the html5-apps-deployer section:

   1. Delete the SAP_CLOUD_SERVICEline and the lines destination: and serviceInstanceName: destination:

      YAML Copy

      html5-apps-deployer:
        env:
          SAP_CLOUD_SERVICE: incidentmanagementservice
        image:
          repository: "incident-management-html5-deployer"
        bindings:
          xsuaa:
            serviceInstanceName: xsuaa
          destination:
            serviceInstanceName: destination

   2. Delete envFrom: and the fields under it:

      YAML Copy

      envFrom:
      - configMapRef:
          name: "{{ .Release.Name }}-html5-apps-deployer-configmap"

   3. Delete backendDestinations: and its properties.

   4. Under env, add the following:

      yaml[2-3] Copy

        env:
           ASYNC_UPLOAD: "true"
           destinations: '[{"forwardAuthToken":true,"name":"srv-api","url":"https://incident-management-srv-incident-management.<cluster-domain>"}]'

   Update the placeholder <cluster-domain> with the domain of your Kyma cluster.

   Run the following command to get your Kyma cluster’s domain:

   Shell Copy

   kubectl get gateway -n kyma-system kyma-gateway \
          -o jsonpath='{.spec.servers[0].hosts[0]}'

   Add the result without the leading *. in the placeholder <cluster-domain>.

Create the CDM configuration

1. In the ui-resources/resources folder, create a new file cdm.json 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

Build the images and deploy your application in SAP BTP, Kyma runtime

1. Build the UI deployer image:

   Shell Copy

   pack build <your-container-registry>/incident-management-html5-deployer:<image-version> \
       --path ui-resources \
       --builder paketobuildpacks/builder-jammy-base \
       --publish

   Make sure to replace <your-container-registry> with the link to your container registry and keep in mind that <image version> is a string.

   Looking for your docker server URL?

   The docker server URL is the same as the path used for docker login, so you can quickly check it by running the following command in your terminal:

   JSON Copy

   cat ~/.docker/config.json

   In case you’re using Docker Hub as your container registry, replace the placeholder <your-container-registry> with your Docker Hub user ID.

2. Update the productive CAP build for your application:

   Shell Copy

   cds build --production

3. Deploy using the Helm command:

   Shell Copy

   helm upgrade --install incident-management --namespace incident-management ./gen/chart \
   --set-file xsuaa.jsonParameters=xs-security.json

   With the helm upgrade –install command, you can install a new chart as well as upgrade an existing chart.

Create destinations

When the application is successfully deployed, you have to configure design and runtime destinations. Design and runtime destinations enable SAP Build Work Zone, standard edition to configure sites with the application configurations like groups, roles, categories, and so on.

1. Create a runtime destination:

   1. Navigate to your subaccount and choose Connectivity → Destinations on the left.

   2. Choose Create Destination.

      

   3. Enter the following values:

      • Name = incident-management-rt
      • Type = HTTP
      • URL = https://<subaccount-subdomain>.launchpad.cfapps.sap.hana.ondemand.com
      • Proxy Type = Internet
      • Authentication = NoAuthentication

   4. Choose New Property on the right and add the following property:

      • CEP.HTML5contentprovider = true

   5. Select the Use default JDK truststore checkbox and choose Save.

      

   6. Choose Check Connection. You get a message Connection to "incident-management-rt" established. Response returned: "400: Bad Request".

2. Create a service binding in your Kyma cluster:

   1. Navigate to your subaccount and choose Dashboard URL under the Kyma Environment tab to open Kyma dashboard.

      

   2. Choose Namespaces on the left and choose incident-management.

      

   3. Choose Service Management → Service Bindings and choose Create.

      

   4. In the Name field, enter incidents-runtime.

   5. In the Service Instance Name dropdown, choose incident-management-html5-apps-repo-runtime and choose Create.

      

   6. When the status of the service binding changes to Provisioned, scroll to the Specification section and choose the Secret Name incidents-runtime.

      

   7. In the incidents-runtime secret’s page, scroll to the Data section and choose Decode.

      

   8. Keep the decoded details at hand, you need them in the next step.

3. Create design-time destination:

   1. Navigate to your subaccount and choose Connectivity → Destinations on the left.

   2. Choose Create Destination.

   3. Enter the following values:

      • Name = incident-management_cdm
      • Type = HTTP
      • URL = https://html5-apps-repo-rt.cfapps.<subaccount-region>.hana.ondemand.com/applications/cdm/<cloud-service-name>
      • Proxy Type = Internet
      • Authentication = OAuth2ClientCredentials
      • Client ID = <Client ID from decoded secret details>
      • Client Secret = <Client Secret from decoded secret details>
      • Token Service URL = <url from decoded secret details> + /oauth/token

      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": "incidents"
      }

   4. Choose New Property on the right and add the following properties:

      • grant_type = client_credentials
      • saasregistryenabled = true
      • sap.cloud.service = html5-apps-repo-rt
      • ServiceKeyName = incidents-runtime
      • uri = uri from decoded secret details
      • xsappname = xsappname from decoded secret details

      

   5. Select the Use default JDK truststore checkbox.

   6. Save your settings.

   7. Choose Check Connection. You get a message Connection to "incident-management_cdm" established. Response returned: "401: Unauthorized".

      

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. Enter CDM in the Title field.

   2. Choose incident-management_cdm from the dropdown in the Design-Time Destination field.

   3. Choose incident-management-rt from the dropdown in the Runtime Destination field.

   4. Choose Save.

   

6. Choose the refresh icon to 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 Incident Management Site in SAP Build Work Zone, standard edition 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.