Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
maheshpalavalli
Active Contributor

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-re...

 

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/27e742e062924d72a9f1cb94a8c...

 

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.sap , 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
47 Comments
Labels in this area