Skip to Content
Technical Articles
Author's profile photo Tapishnu Sengupta

Consumption of Reuse UI from SAP Document Management Service in SAP Fiori Application

In this blog post, I would like to share how you can consume SAP Document Management Service , Integration Option and integrate the UI into a consuming SAPUI5 Application.

We will focus on building and deploying an UI5 application from scratch through which you will be able to perform Content Management Capabilities provided by SAP Document Management Service.

SAP Document Management Service ,Integration Option provides a SAPUI5 Component hosted on a html5 repository service. This component primarily needs the Repository Id and Object Id as a configuration to successfully load a particular object via UI.  We will be embedding this component inside a Component Container and load the UI .

Although the embedding. of SAPUI5 component can be done either via the manifest.json or it can be done programatically . For simplicity in this blog post i will be configuring via manifest but will also provide a snippet on how it can be done programmatically .

I have added reference screenshots and code blocks for every step along the way wherever required so that it does not lead to any confusion.

 

After successful completion of the below mentioned steps you will see the following UI.

FinalResult

 

This blog post consists of 4 parts:

  • Onboard a repository using api’s in SAP Document Management Service , Integration Option.
  • Create a SAPUI5 Application using Business Application Studio.
  • Integrate the Document Management Component aka Reuse UI into the SAPUI5 application.
  • Build and deploy the project.

 

To achieve this scenario, you should have to fulfil the following pre-requisites.

 

  1. You’ve an access to the SAP BTP Cockpit.
  2. You’ve subscribed to the service SAP Document Management Service, Integration Option.
  3. You’ve subscribed to the service SAP Business Application Studio.

 

  • Onboard a repository using via api in SAP Document Management Service , Integration Option.

  1. Create a service instance of SAP Document Management Integration Option.

This will take some time before the instance is created.

 

2. Now create a service key by clicking on the 3 dots.

 3. View the service key and note down the following data:

Token URL uaa.url/oauth/token?grant_type=client_credentials
client secret uaa.clientsecret
clientid uaa.clientid
service url endpoints.ecmservice.url/rest/v2/repositories

 

4. Now using postman obtain the JWT token using the above details. For more details follow the help

 

5. Add your repository using the onboarding API. For more details follow the help You can            choose internal or external repositories. Document Service repository are referred to as Internal Repository whereas any cmis compliant repository apart from Document Service are referred to as External Repository. For this example we will be creating an internal repository.

 

If you want to onboard any external repository follow the help documentation.

 

Now in postman paste the following body as

 

{
  "repository": {
		"displayName": "Name of the repository",
		"description": "Description for the repository",
		"repositoryType": "internal",
		"isVersionEnabled":"true",
		"isVirusScanEnabled":"true",
		"skipVirusScanForLargeFile": "false",
		"hashAlgorithms":"SHA-256"
  }
}

In authorization provide the previously generated JWT token using Authorization type as Bearer Token.

Now click “Send” to create the repository. Then the repository will be created.

 

Note down the Repository Id and RootFolder Id.

  • Create a SAPUI5 Application using SAP Business Application Studio.
  1. Goto your Cloud Foundry trial account of SAP BTP. –  CF-Trial

 

2. Inside trial account goto Service Marketplace and search for SAP Business Application Studio.

 

3. Create a subscription for SAP Business Application Studio and click on the goto app link

   4. Click on Create Dev Space

   5. Create space with any name a, select SAP Fiori and click Create Dev Space

   6. Once the space is created start the dev space.

   7. Then click on the space url to navigate to Sap Business Application Studio.

From below landing page, go with New project from template

Follow the below steps to create the project.

8.  Select SAP Fiori Freestyle Project and then Click Start.

 

  9.  Choose Target Running Environment as Cloud Foundry and select SAPUI5 Application.

 

  10.  Give a suitable  project Name

  11. In Approuter Configuration select Standalone Approuter.

 

12.  In Basic Attributes enter the HTM5 module name, select authentication to Yes and enter a namespace.

 

13.  Enter a view name and click next. As we don’t require a data service select no.

 

14.  After the final step there will be two modules in the explorer. One is approuter module and the other one is the html5 module

 

  • Integrate the Reuse UI into the SAPUI5 application.

 

Update mta.yaml  file of your SAP Fiori application.

  1. Add Document Management Service, Integration Option Component under resources, add the same as a requirement for the nodejs module.
modules:
- name: reuseuidemo-approuter
  type: approuter.nodejs
  path: reuseuidemo-approuter
  requires:
  - name: ReuseUIDemo_html_repo_runtime
  - name: uaa_ReuseUIDemo
  - name: sdm-di-test
  properties:
        destinations: "[{\"name\": \"sdibackend\", \"url\": \"https://api-sdm-di.cfapps.sap.hana.ondemand.com\", \"forwardAuthToken\": true}]"
  parameters:
    disk-quota: 256M
    memory: 256M

resources:
- name: sdm-di-test
  type: org.cloudfoundry.managed-service
  parameters:
    service: sdm

2.  Update the xsapp.json file in UI module as follows

To route the API calls to Document Management Service, Integration Option’s server, add a route to /api.

       3.  To use Document Management Service, Integration Option’s reuse UI as a component in your application, declare a componentUsage in the json file of your SAP Fiori applications. Also, declare a resourceRoots to point to the HTML5 repository path that contains the reuse UI.

 

In The <Repository_ID> and <objectId> enter the repository Id and rootfolder Id generated in the previous steps

4.  Update the View.xml by defining a componentContainer to place the ReuseUi inside the SAPUI5 app view.

 

Alternative to manifest.json the settings for Component Container can also be defined in the View Controller and then by implementing event handler “onComponentCreated” you can request navigation to repositories and folders during runtime. The below code provides a reference on how this can be achieved.

sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
  "use strict";
  return Controller.extend("com.sap.sample.sdm", {
    onInit: function () {
      // OPTIONAL: pass the same settings here, if not added in 'manifest.json' as per previous steps
      this.getView().byId("sdi-container").setSettings({
        "repositoryId": <REPOSITORY_ID>,
        "objectId": <OBJECT_ID>,
        "forceLoad": false
      });
    },
    // registered event handler for 'componentCreated' event of Component Container
    onComponentCreated: function(oEvent) {
      this._oDocumentTable = oEvent.getParameter("component");
      // OPTIONAL: set a folder as home folder
      this._oDocumentTable.setHomeFolder(<OBJECT_ID>);
      // OPTIONAL: request a navigation to a repository & folder during runtime
      this._oDocumentTable.requestNavigationAndOpen(<REPOSITORY_ID>, <OBJECT_ID>);
    },
  });
});

5.  Update the xs-app.json in approuter folder

Goto xs-app.json in the approuter folder and add the welcome page

  • Build and deploy the project.

  1. Build and deploy to SAP CP CF. Goto Terminal in SAP Business Application Studio and run the following command “mbt build”. This will generate the mtar under mta_archives folder.

 

     2.  Right click on the mtar generated and click deploy. (You should be logged on to the subaccount and space before deployment)

Finally after deployment goto the space in SAP BTP and you will find an approuter app deployed. Click on the app and hit the app route which got generated .

     3. Go to your subaccount where the app was deployed and add the following two roles as a part of Role Collection. Assign SDM_Admin and SDM_User roles to the Role collection and assign the Role Collection to your user. This step is required as the api call are protected with the above scopes and you will face “User does not have required scope” while loading the application.

 

Finally you should be able to see The Document Management UI embedded inside a SAPUI5 Application .

 

So to conclude from this blog post you will be able to onboard repositories in SAP Document Management Service , Create basic fiori application as a mtar project via Business Application Studio and finally integrate the SAP Document Management UI in the Fiori App where you will be able to perform Document/ Folder creation and other Document Management Capabilities supported for a particular Repository.

Please provide your feedback and thoughts !!!

You can also refer to Connect SAP Document Management, Application Option to DMS to integrate with DMS repositories.

 

 

 

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vikram Kulkarni
      Vikram Kulkarni

      Thanks, Tapishnu Sengupta for this blog post. It's very informative.

      Author's profile photo Debapriya Sarkar
      Debapriya Sarkar

      Nicely done! Thank you!

      Author's profile photo Abhijeet Kankani
      Abhijeet Kankani

      Hi Tapishnu,

       

      Indeed a nice blog and similar kind of blog I saw from  @MaheshKumarPalavalli

      https://blogs.sap.com/2020/10/22/integrating-sap-cp-document-management-service-ui-in-the-fiori-app/

      I just used the same and able to replicate the same --

       

      I have doubt regarding object id and repository id, we can create in Dev system but how about QA or Production system do we need to create manually in QA ?

      Or we can move TR using CI/CD pipeline and it will be same across all environment.

       

      Regards,

      Abhijeet Kankani

       

       

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta
      Blog Post Author

      Hi Abhijeet,

       

      The Repository Id and Object Id will be different in different landscapes. So you have to dynamically fetch the Repository Id and Object Id for that purpose. You can do a /browser ajax call which will return you the repository related information. Fetch the Repository Id and Object Id and pass it to requestNavigationAndOpen() method.

      https://help.sap.com/viewer/f6e70dd4bffa4b65965b43feed4c9429/Cloud/en-US/2c99a03a2b7e42d5be44a7ef07c5f917.html

       

      Author's profile photo Abhijeet Kankani
      Abhijeet Kankani

       

       

      Thanks for the reply Tapishnu,

       

      I tried the event method and removed the hardcoded value from the manifest but obj and repoid was not picked up, only UI is rendering.

      I did little debugging and I am able to fetch the repo and obj but there is no method called setSetting (calling

      this.getView().byId("sdi-container").setSettings in side the oninit event but I can see appySetting method.

      Furthermore, for

      this._oDocumentTable there is no oDocumentTable in this.

      Not sure what I am missing.

       

      Regards,

      Abhijeet Kankani

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta
      Blog Post Author

      Hi Abhijeet,

      Please follow the below code snippet to dynamically load the repository . Also in your manifest.json pass the settings as empty object otherwise configuration defined in your manifest will be considered.

      Something Like this:

      "componentUsages": {
      "documentTable": {
      "name": "com.sap.ecm.reuse.documentTable",
      "settings": {}
      }
      }

      In the view controller you can code like this. I have given comments inline.

      sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
        "use strict";
        return Controller.extend("com.sap.sample.sdm", {
          onInit: function () {
            // OPTIONAL: pass the same settings here, if not added in 'manifest.json' as per previous steps
            this.getView().byId("sdi-container").setSettings({
              "forceLoad": false
            });
          },
          // registered event handler for 'componentCreated' event of Component Container
          // This event needs to be registered in your View.xml
          //<core:ComponentContainer usage="documentTable" height="100%" width="100%" async="true"  
          //manifest="true" componentCreated=".onComponentCreated"/>
          onComponentCreated: function(oEvent) {
            this._oDocumentTable = oEvent.getParameter("component")
      *******
      Here you call the api through ajax request and fetch the repoid and rootfolderId/objectId
      Once you have the repoid and rootfolderId pass it to the below requestNavigationAndOpen method
      ********
            // OPTIONAL: request a navigation to a repository & folder during runtime
            this._oDocumentTable.requestNavigationAndOpen(<REPOSITORY_ID>, <OBJECT_ID>);
          },
        });
      });
      
      Author's profile photo Amelia Scott
      Amelia Scott

      This is really a helpful blog I am really impressed with your work, keep it up the good work

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta
      Blog Post Author

      Thanks Amelia Scott for the feedback 🙂

      Author's profile photo Jonas Wang
      Jonas Wang

      Any idea how to load reusable ui5 component when using managed app router instead of standalone app router.

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta
      Blog Post Author

      Everything remains same as per my blog post here the only difference will be instead of using the standalone app router select the Managed Approuter in SAP BTP Application Studio . The mta.yaml will be auto generated . Although you need to do some changes in mta . For that please refer to the attached sample mta.

      _schema-version: "3.2"
      ID: managed-managedui
      description: A Sample Fiori application.
      version: 0.0.1
      modules:
      - name: managed-managedui-dest-content
        type: com.sap.application.content
        requires:
        - name: managed-managedui-dest-srv
          parameters:
            content-target: true     
        - name: managed-managedui-repo-host
          parameters:
            service-key:
              name: managed-managedui-repo-host-key
        - name: managed-managedui-uaa
          parameters:
            service-key:
              name: managed-managedui-uaa-key
        - name: sdi
          parameters:
            service-key:
              name: sdm-key      
        parameters:
          content:
            instance:
              destinations:
              - Name: managed-managedui_repo_host
                ServiceInstanceName: managed-managedui-html5-srv
                ServiceKeyName: managed-managedui-repo-host-key
                sap.cloud.service: managed-managedui
              - Authentication: OAuth2UserTokenExchange
                Name: managed-managedui_uaa
                ServiceInstanceName: managed-managedui-xsuaa-srv
                ServiceKeyName: managed-managedui-uaa-key
                sap.cloud.service: managed-managedui
              - Name: test
                Authentication: OAuth2UserTokenExchange
                ServiceInstanceName: sdi
                ServiceKeyName: sdm-key
              existing_destinations_policy: update
        build-parameters:
          no-source: true
      - name: managed-managedui-app-content
        type: com.sap.application.content
        path: .
        requires:
        - name: managed-managedui-repo-host
          parameters:
            content-target: true
        build-parameters:
          build-result: resources
          requires:
          - artifacts:
            - managedmanagedui.zip
            name: managedmanagedui
            target-path: resources/
      - name: managedmanagedui
        type: html5
        path: .
        build-parameters:
          build-result: dist
          builder: custom
          commands:
          - npm install
          - npm run build:cf
          supported-platforms: []
      resources:
      - name: managed-managedui-dest-srv
        type: org.cloudfoundry.managed-service
        parameters:
          config:
            HTML5Runtime_enabled: true
            init_data:
              instance:
                destinations:
                - Authentication: NoAuthentication
                  Name: ui5
                  ProxyType: Internet
                  Type: HTTP
                  URL: https://ui5.sap.com
                - Authentication: NoAuthentication
                  Name: sdibackend
                  ProxyType: Internet
                  Type: HTTP
                  URL: https://XXXX.cfapps.XXX.hana.ondemand.com
                  forwardAuthToken: true
                existing_destinations_policy: update
            version: 1.0.0
          service: destination
          service-name: managed-managedui-dest-srv
          service-plan: lite   
      - name: managed-managedui-uaa
        type: org.cloudfoundry.managed-service
        parameters:
          path: ./xs-security.json
          service: xsuaa
          service-name: managed-managedui-xsuaa-srv
          service-plan: application
      - name: managed-managedui-repo-host
        type: org.cloudfoundry.managed-service
        parameters:
          service: html5-apps-repo
          service-name: managed-managedui-html5-srv
          service-plan: app-host
      - name: sdi
        type: org.cloudfoundry.managed-service
        parameters:
          service: sdm
          service-name: sdi
          service-plan: standard    
      parameters:
        deploy_mode: html5-repo
        enable-parallel-deployments: true
      Author's profile photo Pankaj Yadav
      Pankaj Yadav

      Hi Tapishnu Sengupta

      Hope you are doing gr8.

      Have you worked on object storage service of BTP? Can we compare these two service as both can do attachment storage? Which one is more preferable when it comes to providing an attachment option in fiori based apps with BTP ABAP as programming model ?

      Please let me know your ideas on this.

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta
      Blog Post Author

      Document Management Service internally uses object store to store unstructured content metadata where as the content in stored in AWS S3 . DMS has much more to offer in terms of Content Management Capabilities . For more information please refer to the help documentation.
      https://help.sap.com/viewer/product/DOCUMENT_MANAGEMENT/Cloud/en-US

       

      Author's profile photo Meenakshi A N
      Meenakshi A N

      Hi

      Can you please let us the know the changes need to be done in mta.yaml in case if we are using MTA Application - Inside Workflow Start-UI (Fiori Module created) with Managed App Router.

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta
      Blog Post Author

      You can refer to below mta.yaml to configure a fiori app with Managed Approuter and Document Management Service.

      _schema-version: "3.2"
      ID: managed-managedui
      description: A Sample Fiori application.
      version: 0.0.1
      modules:
      - name: managed-managedui-dest-content
        type: com.sap.application.content
        requires:
        - name: managed-managedui-dest-srv
          parameters:
            content-target: true     
        - name: managed-managedui-repo-host
          parameters:
            service-key:
              name: managed-managedui-repo-host-key
        - name: managed-managedui-uaa
          parameters:
            service-key:
              name: managed-managedui-uaa-key
        - name: sdi
          parameters:
            service-key:
              name: sdm-key      
        parameters:
          content:
            instance:
              destinations:
              - Name: managed-managedui_repo_host
                ServiceInstanceName: managed-managedui-html5-srv
                ServiceKeyName: managed-managedui-repo-host-key
                sap.cloud.service: managed-managedui
              - Authentication: OAuth2UserTokenExchange
                Name: managed-managedui_uaa
                ServiceInstanceName: managed-managedui-xsuaa-srv
                ServiceKeyName: managed-managedui-uaa-key
                sap.cloud.service: managed-managedui
              - Name: test
                Authentication: OAuth2UserTokenExchange
                ServiceInstanceName: sdi
                ServiceKeyName: sdm-key
              existing_destinations_policy: update
        build-parameters:
          no-source: true
      - name: managed-managedui-app-content
        type: com.sap.application.content
        path: .
        requires:
        - name: managed-managedui-repo-host
          parameters:
            content-target: true
        build-parameters:
          build-result: resources
          requires:
          - artifacts:
            - managedmanagedui.zip
            name: managedmanagedui
            target-path: resources/
      - name: managedmanagedui
        type: html5
        path: .
        build-parameters:
          build-result: dist
          builder: custom
          commands:
          - npm install
          - npm run build:cf
          supported-platforms: []
      resources:
      - name: managed-managedui-dest-srv
        type: org.cloudfoundry.managed-service
        parameters:
          config:
            HTML5Runtime_enabled: true
            init_data:
              instance:
                destinations:
                - Authentication: NoAuthentication
                  Name: ui5
                  ProxyType: Internet
                  Type: HTTP
                  URL: https://ui5.sap.com
                - Authentication: NoAuthentication
                  Name: sdibackend
                  ProxyType: Internet
                  Type: HTTP
                  URL: https://XXXX.cfapps.XXX.hana.ondemand.com
                  forwardAuthToken: true
                existing_destinations_policy: update
            version: 1.0.0
          service: destination
          service-name: managed-managedui-dest-srv
          service-plan: lite   
      - name: managed-managedui-uaa
        type: org.cloudfoundry.managed-service
        parameters:
          path: ./xs-security.json
          service: xsuaa
          service-name: managed-managedui-xsuaa-srv
          service-plan: application
      - name: managed-managedui-repo-host
        type: org.cloudfoundry.managed-service
        parameters:
          service: html5-apps-repo
          service-name: managed-managedui-html5-srv
          service-plan: app-host
      - name: sdi
        type: org.cloudfoundry.managed-service
        parameters:
          service: sdm
          service-name: sdi
          service-plan: standard    
      parameters:
        deploy_mode: html5-repo
        enable-parallel-deployments: true
      
      Author's profile photo Meenakshi A N
      Meenakshi A N

      Hi,

      Thanks I have updated my mta.yaml as above. I am getting 404 error while calling manifest,json and component. But the same steps works fine for Standalone app router and I am able to load fiori app without any issues by followed ur entire blog. The only difference is that I m using WorkFlow UI Module(Start UI/Task UI)- Created using Start UI Template in BAS inside MTA Project with managed app router. Doing this getting below errors .Pls see the below error snaps

      manifest.json

       

       "componentUsages": {
            "documentTable": {
              "name": "com.sap.ecm.reuse.documentTable",
              "settings": {
                "destinationPath": "/comsapecmreuse.comsapecmreusedocumentTable/api",
                "repositoryId": ,
                "objectId": 
                }
              }
            },
           "resourceRoots": {
             "com.sap.ecm.reuse.documentTable": "./../comsapecmreuse.comsapecmreusedocumentTable/"
           },​

      xsapp.jsom

      {
            "source": "^(.*)$",
            "target": "$1",
            "service": "html5-apps-repo-rt",
            "authenticationType": "xsuaa"
          },
          {
            "source": "^/comsapecmreuse.comsapecmreusedocumentTable/api(.*)$",
            "target": "$1",
            "authenticationType": "xsuaa",
            "service": "com.sap.ecm.reuse",
            "endpoint":"ecmservice"
          }
      Author's profile photo Yergali Yertuganov
      Yergali Yertuganov

      Dear Tapishnu,

      First of all thank you very much for a great guide, which I have followed and got my initial app up and running. However we face problem of integrating this Reuse UI Component of DMS in Adaptation Project and since this is more of a extension of this blog I have created another question under here if you could have a look:

      https://answers.sap.com/questions/13499614/adaptation-of-standard-fiori-apps-with-reuse-ui-co.html

      Many thanks in advance.

      Best regards,

      Yergali