Skip to Content
Technical Articles
Author's profile photo Mahesh Palavalli

Integrating SAP BTP Document Management Service UI in the Fiori App

Background:

Last year at SAP Teched, I saw two interesting demos related to document & attachment services. One is the demo of SAP Attachment Service in S4HANA and the other is the document management service in the SAP Cloud platform environment.

I really liked those demos as they were showcasing the ease of using those services and how they offer a UI, which we can easily integrate them into ourFiori Apps. Of course, S4HANA attachment service is free as it is part of that suite and the other one, you have to purchase to use it 😉

 

Then I wrote a blog post about the attachment service and how to consume it.

https://blogs.sap.com/2019/12/16/attachment-service-to-your-rescue-in-s4hana-fiori-elements-using-reuse-components-gos-dms/

 

and now here I am writing about the SAP CP Document Management service. I am planning to write two blog posts, In the first one(this), I will show a simple use case of creating a repository and how to show that repository in a Fiori Application. In the second one, I will show how to integrate into a CAP application.

 

This Blog Post:

In this post I will show a step by step approach to integrate SAP CP Document Management service in an ui5 app, which uses a reuse ui5 component from document management service.

So no need of any coding to handle documents, just use that reuse component in any UI5 app to handle documents. This will be a very basic app and probably be considered as an Admin UI.

The end UI looks like below:

 

Help Links:

https://help.sap.com/viewer/f6e70dd4bffa4b65965b43feed4c9429/Cloud/en-US/27e742e062924d72a9f1cb94a8c8346c.html

 

Creating a Repository:

You can find the below steps in the help here.

Step 1: Create an Instance for the Document Management, Integration Option in the Service Market Place.

Step 2: Create a Service Key

Step 3: Get Access Token

Before this step, if you want to know more about OAuth token and stuff, I would recommend to go check out the videos of DJ Adams , that are part of Devtoberfest.

https://github.com/SAP-samples/sap-devtoberfest-2020/tree/master/topics/cloud-apis

 

First View the service key and note down the below 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

 

Now go to the postman and create a post request, give your service URL in the input field

Now Select Authorization type as “OAuth2.0” and click on get a new access token.

Provide the Token URL in the postman Access Token URL and clientid, client secret as well. Then click on the Request Token and then click “Use Token” Button.

 

Step 3: Create Repository

Now Select the Body and provide the below information and select, Raw – JSON.

{
  "repository": {
		"displayName": "SAP Community",
		"description": "SAP Community",
		"repositoryType": "internal",
		"isVersionEnabled":"true",
		"isVirusScanEnabled":"false",
		"skipVirusScanForLargeFile": "true",
		"hashAlgorithms":"None"
  }
}

 

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

Step 4: Get the Folder ID and Repository ID

Now replace the URL: /rest/v2/repositories with /browser and change the request type to “GET”

 

You can get the repositoryId from the step3, now in this step, get the rootFolderId for the created repository and save it somewhere, which will be used in other steps.

 

Basic MTA Fiori Application

Step 1: Generate a Basic MTA Application

On the Welcome page, select Create Project From Template and select “SAP Fiori Freestyle Project”.

Go next and select the Cloud Foundry environment from drop down and Select SAP UI5 Application and click next.

Give a project name: (CommunityDMAdmin)

Standalone Approuter

Give the name for your html module(communitydmadminui5)

Authentication : Yes

Finish.

 

It would now generate a basic Fiori app that has authentication and stuff. Now let’s go and configure the Document Management UI in the Fiori Application.

 

Step 2: Update MTA.YAML

Let’s update the yaml file with the Document Management instance that we created in step 1.

In the resources section, add below

- name: sapcommunity_dm
  type: org.cloudfoundry.managed-service
  parameters:
    service: sdm
    service-plan: standard

 

and add this resource under the approuter(in the same yaml file) as dependency under “requires”, and add properties which has the destination.. It should like below finally.

- name: communitydmadmin-approuter
  type: approuter.nodejs
  path: communitydmadmin-approuter
  requires:
  - name: CommunityDMAdmin_html_repo_runtime
  - name: uaa_CommunityDMAdmin
  - name: sapcommunity_dm
    properties: 
      destinations: "[{\"name\": \"sdibackend\", \"url\": \"https://api-sdm-di.cfapps.sap.hana.ondemand.com\", \"forwardAuthToken\": true}]"
  parameters:
    disk-quota: 256M
    memory: 256M

 

Step 3: Update xs-app.json in the ui5 app

add the below route, this is used when the ui5 send a request to ecmservice to fetch the reuse ui5 component.

{
      "source": "^/comsapecmreuse.comsapecmreusedocumentTable/api(.*)$",
      "target": "$1",
      "authenticationType": "xsuaa",
      "service": "com.sap.ecm.reuse",
      "endpoint": "ecmservice"
    }

 

Step 4: add component usage in the manifest.json of the UI5 app

"sap.ui5": {
    ...
    "componentUsages": {
      "documentTable": {
        "name": "com.sap.ecm.reuse.documentTable",
        "settings": {
          "destinationPath": "/comsapecmreuse.comsapecmreusedocumentTable/api",
          "repositoryId": "<REPOSITORY_ID>",
          "objectId": "<FOLDER_ID>",
          }
        }
      },
     "resourceRoots": {
       "com.sap.ecm.reuse.documentTable": "./../comsapecmreuse.comsapecmreusedocumentTable/"
     },
   }

Replace the <REPOSITORY_ID> and <FOLDER_ID> with the one we have noted in the previous steps

 

Step 4: add the component container to show the Document Management reuse UI

 

<Page id="page" title="Document Management Admin UI">
  <content>
    <core:ComponentContainer usage="documentTable" height="100%" async="false" manifest="true"/>
  </content>
</Page>

 

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

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

"welcomeFile": "/nscommunitydmadminui5/index.html",

nscommunitydmadminui5 is my ui5 app namespace without dots. If we do this, the approuter url will automatically open the ui5 app when we open it.

 

Buid and Deploy to SAP CP CF

Right click on the MTA.YAML file and select build MTA.

Later right click on the file inside mta_archives folder and deploy (Make sure you are logged in to your sap cp ).

 

Run the app

Open the application from your SAP CP space and click the applicatin route to open the UI5 App.

 

 

GIT URL

https://github.com/mahesh0431/CommunityDMAdmin

 

Next Steps

In the next blog post, I will show how to integrate this is a CAP Application. Link to Second Blog Post

Let me know your thoughts 🙂

 

Note: I am learning about SAP CP and it’s different services currently and All these are kind of new to me(mta yaml, xs-app.json ..,) and this is purely based on my learning experience, so let me know freely if I am doing any mistakes, so it will be a good learning for me 🙂

 

Thanks,
Mahesh

Assigned Tags

      47 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo DJ Adams
      DJ Adams

      Nice work, Mahesh!

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      🙂 Thanks DJ

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      Informative and nicely written Mahesh .

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Sreehari V Pillai ?

      Author's profile photo Murali Shanmugham
      Murali Shanmugham

      Thanks for sharing Mahesh. I was thinking of posting a blog on the same topic too.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Murali Shanmugham 🙂 .  😀 but I still would love to read your post as always, so don't cancle the plan, I know for sure it will have some more technical insights 🙂

      Author's profile photo Rajkumar Shanmuganathan
      Rajkumar Shanmuganathan

      Good work Mahesh Kumar Palavalli, with this reference, completed the integration in our development landscape of Cloud Foundry today!

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks Rajkumar Shanmuganathan 🙂 , cool that you completed it, you should try an integration with CAP application, it will be much cooler, I wrote another post about it..

      Author's profile photo Sandeep Malhotra
      Sandeep Malhotra

      Thanks Mahesh Kumar Palavalli for a nice and detailed blog .

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks, Sandeep Malhotra . and thanks for pointing out that issue, I will update the GitHub repo.

      Author's profile photo Karan Bahl
      Karan Bahl

      Hi Mahesh,

      I am getting the 415 Unsupported media type error when using POST Call. Below is the payload being used; I want to use Cloud as storage; hence using repository type as external.

      "repository": {
      "displayName": "Test Repository",
      "description": "Test Repository",
      "repositoryType": "external",
      "repositoryId": "Test_rep",
      "externalId": "Test_rep_ext"
      }

      Any idea; what is the issue here? The token I have successfully got.

       

      Regards,

      Karan

      Author's profile photo Karan Bahl
      Karan Bahl

      The issue has been solved; I forgot to change the data type to JSON.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author
      Karan Bahl, Cool Thanks for sharing the resolution 🙂
      Author's profile photo Abhinav Sharma
      Abhinav Sharma

      Hi Mahesh,

       

      I followed the steps as mentioned in the blog, however, when I execute the application, I am getting

      On further investigation, I found that "User does not have required scope"
      
      Any pointers for resolving the same. Thanks!
      Author's profile photo Sai Phaye
      Sai Phaye

      Hi Abhinav Sharma

       

      Were you able to solve this bug/find a workaround?

       

      Regards,

      Sai Dhawal Phaye

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta

      You have to add the following two scopes to your user .

      SDM_User and SDM_Admin.
      To add the user scopes create a Role Collection in SAP Cloud Cockpit space where the app is deployed.
      Assign the above scopes to this Role Collection.
      And Finally assign the Role Collection to your user ID.
      Author's profile photo Sai Phaye
      Sai Phaye

      Hi Mahesh Kumar Palavalli

      Thank you for this blog post. It has given me clarity.

      However, I am getting this error again and again.

       

      Error

      Error

       

       

      Do you know on any resolution for this?

       

      Thanks & Regards,

      Sai Dhawal Phaye

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      It seems that Abhinav Sharma also has the same issue..

      Can you check if all the roles are assigned to your user id?
      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Also please create a new question, so if anyone from community or the product development team sees, they can respond quickly.

      Author's profile photo Sai Phaye
      Sai Phaye

      Hi Mahesh Kumar Palavalli

       

      I have the required roles assigned to the user. (I have followed this https://help.sap.com/viewer/f6e70dd4bffa4b65965b43feed4c9429/Cloud/en-US/2c99a03a2b7e42d5be44a7ef07c5f917.html)

      Even then, I am getting the same error. I think Abhinav has role issues - while mine is 404 and that's why I am stuck.

      Thanks & Regards,

      Sai Dhawal Phaye

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta

      This issue might might be because of routes not defined properly or you are not using the proper service instance of Document Management Integration Option to onboard your repositories.

       

      • To resolve issues for routes:

      Make sure if the route is defined in sapui5 module then mention the destinationPath: property in manifest.json as

      destinationPath : /comsapecmreuse.comsapecmreusedocumentTable/api

       

      route in ui5 module as

      {
        routes: [
          ...
          {
            "source": "^/comsapecmreuse.comsapecmreusedocumentTable/api/(.*)$",
            "target": "$1",
            "authenticationType": "xsuaa",
            "service": "com.sap.ecm.reuse",
            "endpoint": "ecmservice"
          },
          ...
        ]
      }

      If the route is defined in approuters xsapp.json then destinationPath: property in manifest.json as

      destinationPath : /api

      route in approuters xsapp.json as

      {
        routes: [
          ...
          {
            "source": "^/api/(.*)$",
            "target": "$1",
            "authenticationType": "xsuaa",
            "service": "com.sap.ecm.reuse",
            "endpoint": "ecmservice"
          },
          ...
        ]
      }
      • To resolve issue for not using proper service check if the service instance used to onboard repositories is the same one used for using integrating the Reuse UI . Check in mta.yaml

      Needs to be modified if the service instance is created with a different name

      - name: sdm-instance
      	  type: org.cloudfoundry.managed-service
      	  parameters:
            service: sdm
            service-plan: standard   	
      
      Author's profile photo Sai Phaye
      Sai Phaye

      Hi Tapishnu Sengupta

       

      Thank you very much for that well-formed and precise solution.

       

      My app is working now 🙂

       

      Thank you very much!

      Author's profile photo Max Schnürle
      Max Schnürle

      Dear Tapishnu Sengupta,

      thanks for the explanation. I am having my cp.portal as entry point/welcomeFile for my app router as below (xs-app.json). From there I want to route to my sdm app but it never works as the Component always fails to load. I tried both your solution approaches as you described above. In all given examples the welcomeFile for the approuter is the target app itself. this also works for me. as soon as the welcomeFile is changed to cp.portal the portal does not navigate into the app any more. Do you have any idea what has to be changed (probably within xs-app.json files for ui module or approuter) to succeed?

       

      {
          "authenticationMethod": "route",
          "routes": [
              {
                  "source": "^(/.*)",
                  "target": "$1",
                  "service": "html5-apps-repo-rt",
                  "authenticationType": "xsuaa"
              }
          ],
          "welcomeFile": "/cp.portal"
      }
      

       

      error message: failed to load 'com/sap/ecm/reuse/documentTable/Component.js' from ../nscommunitydmadminui5/comsapecmreuse.comsapecmreusedocumentTable/Component.js: 404 - Not Found

      Github:

      https://github.com/SnarkWay/SDM.git

       

      Best Regards

      Max
      Author's profile photo Rakesh Ahirrao
      Rakesh Ahirrao

      Hi Mahesh,

      I followed your blog and try to execute the application I am getting the below error

      User%20does%20not%20have%20required%20scope

      User does not have required scope

      I checked your comments for above peoples.

      Could you please tell me what are the roles required to use document management service. Please mentioned  the roles in comments/

      Thanks.

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta

      Please check my reply earlier for this issue.

      Author's profile photo Pablo Costantini
      Pablo Costantini

      Hi Mahesh,

      App execution:

      App

      App

      I am getting this error in the console line:

      console

      console

      Is there any possibility that this app doesn't work without any item on the repository?

      Thanks in advance.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author
      Pablo Costantini It should work without any items, you need to make sure that you set the repository id and the root folder id.
      Author's profile photo Pablo Costantini
      Pablo Costantini

      Mahesh Kumar Palavalli thanks for the response. I have setted all of that:

      Repository (postman image):

      App Fiori - Manifest.json:

      Regards.

      Author's profile photo Srinivas Pinnelli
      Srinivas Pinnelli
      Pablo Costantini I get the same error as you were saying "No Documents available". Can you pls let me know how you could fix the issue?
      Thanks,
      Srinivas
      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      It should work if you pass the repoid and objectid correctly.. Check F12 console for any errors and check if all the network requests related to this are going out correctly.

       

      Author's profile photo Srinivas Pinnelli
      Srinivas Pinnelli

      Mahesh, thank you for the post and thanks a lot for the quick reply.

      Its working fine now. As you mentioned, I was referring to a wrong Repository ID. Also assigning the missing Roles did the trick.

       

      Best regards,

      Srinivas

      Author's profile photo Tia Xu
      Tia Xu

      Thanks for your post!

      But I hit "File not found", do you know the reason behind it?

      Author's profile photo Koray Yersel
      Koray Yersel

      Hi Mahesh,

      works like a charm. Thanks a lot!

      Do you know if it is possible to change the folder (objectId) dynamicly?  With this approach every fiori app has to work on a specific root folder.

      Regards,

      Koray

      Author's profile photo Koray Yersel
      Koray Yersel

      If anyone is interested meanwhile I found a solution: After analyzing https://[mycorrespondingapprouter]/comsapecmreuse.comsapecmreusedocumentTable/Component.js I found out that I can navigate through folder programmictly using requestNavigationAndOpen function.

      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli
      Blog Post Author

      Thanks for sharing Koray Yersel 🙂  The last time I tried them, they were not working properly.. Hope it is working fine now..

      Author's profile photo Koray Yersel
      Koray Yersel

      Hi Mahesh,

      you have to specify repositoryId and objectId in the manifest.json file. These IDs are different on a 3-level landscape (dev, test, prod). Meaning you have to change manifest.json for each enviroment before deploying mtar.

      Is there a way make this configurable using user provided services or yaml?

      Thanks and regards,

      Koray

      Author's profile photo Tapishnu Sengupta
      Tapishnu Sengupta

      Hi Koray,

      You can do ajax call to /browser  before you actually call the requestNavigationandOpen(). The browser call will return all the repository related info. Extract the RepositoryID and RootFolderId and pass it to requestNavigationAndOpen().This way will solve your hardcoding of Ids if you are using different landscapes and maintain a single codeline.

      Regards,

      Tapishnu

      Author's profile photo Jonas Wang
      Jonas Wang

      Any idea how we can use the reusable document table with managed app router instead of a standalone app router?

      Author's profile photo Rauf Shaikh
      Rauf Shaikh

      Hi Mahesh,

      First of all a very big thank you for writing this excellent blog.

      I have successfully created the app and deployed to cloud foundry as well, BUT I am getting "Internal Server Error" when running the app, I have raised a question on community as well.

      Can you please suggest what can be wrong now?

      -Regards,

      Rauf

      Author's profile photo Meenakshi A N
      Meenakshi A N

      Hi Mahesh,

       

      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 Brinda Krishnamoorthy
      Brinda Krishnamoorthy

      Meenakshi A N

      Hi Meenakshi,

      For Managed Router , do we need to add anything extra . In our project , we are using SAP Managed Router and getting 404 -file not found error.

      Any suggestions will be helpful

       

      Thanks and Regards,

      Brinda

      Author's profile photo Alex Dong
      Alex Dong

      HI Brinda,

      Did you get successful workaround afterwards?

      I just got the same issue..

      Thanks and best regards,

      Alex

      Author's profile photo Cameron HUNT
      Cameron HUNT

      Hello @Tapishnu Sengupta, here we have two people -- from SAP -- unable to make their App work using a Managed App Router, following the instructions provided by SAP (for a Standalone App Router).

      Eg: https://help.sap.com/viewer/f6e70dd4bffa4b65965b43feed4c9429/Cloud/en-US/00af52a4449b469c8b548723589aba0b.html

      Given not even people at SAP can make their Apps work with a Managed App Router, could someone at SAP provide official Documentation -- or finish the existing Help Documentation -- so they can actually make this work? Shouldn't SAP be able to provide such Documentation?

      It should only take a few hours to build such an Application but instead, after days, it still isn't working?

      I also have: "ui5loader-dbg.js:1042 Uncaught ModuleError: failed to load 'com/sap/ecm/reuse/admin/Component.js' from ../comsapecmreuse.comsapecmreuseadmin/Component.js: 404 - Not Found"?

       

      2) Can you please also confirm that the 'Reuse UI' Component works normally even with the BTP CF DMS "free" Plan ?

      Regards,
      Cameron HUNT

      Author's profile photo John Long
      John Long

      Hi,

      I got it working using a managed approuter, here is the sample repo https://github.com/longieirl/docmgttrial and for standalone https://github.com/longieirl/docmgttrialstandalone

      Also, the mta.yaml resource sdm was changed to use org.cloudfoundry.existing-service to reuse the repo service that was used with postman to generate the initial repo settings.

      All other steps shown here work i.e. setting up the roles and collections, generating the repo using postman.

      John

       

      Author's profile photo Federico Giannini
      Federico Giannini

      Hi,

      First of all Thanks Mahesh Kumar Palavalli for a nice and detailed blog . I followed all your steps and hints to make the DMS working and everything's fine, except for one minor issue:

      When I try to open the Recycle Bin I get the following error:

      Interesting enough, even postman route me to the said location and goes 404 as well:

      While browsing the SAP Documentation I came across the description for the Recycle Bin (as you can see here https://help.sap.com/docs/DOCUMENT_MANAGEMENT/f6e70dd4bffa4b65965b43feed4c9429/ac11c8b243e7402990023be2c7335861.html?locale=en-US ) and the only mentioned requirement is the Repository Option (which is why we can store the files inside the reuseUI, so it's clearly up & running).

       

      I'm actually running out of ideas. I can't fathom where the route the service is pointing to is declared/needs to be activated and/or if there's an additional service to be activated.

       

      Thanks in advice for your help!

      Federico

      Author's profile photo DurgaPrasanth vemula
      DurgaPrasanth vemula

      Hi,

      I had followed the same steps and now i a m getting error failed to load 'com/sap/ecm/reuse/documentTable/Component.js' from comsapecmreuse.comsapecmreusedocumentTable/Component.js: 404

      1)Please find the below screen shot of the error

      2)manifest.json

      3)xs-app.json of the UI

      Author's profile photo Somsubhra Sihi
      Somsubhra Sihi

      Hello Mahesh Palavalli,

       

      Very nice and informative blog. Thanks to it I was successfully able to implement the DMS in my Fiori application.

       

      There is one question though.

      Is it possible to add any custom event in the reuse UI, like selected document or press event in the controller, so that I can get the Object ID of the document and can implement the CMIS API for the same.

      Let me know if any further clarification is required.

       

      Thanks

      Somsubhra Sihi