- SAP Managed Tags:
INTRODUCTION
In today's digital landscape,efficient document management is crucial for businesses aiming to streamline operations and enhance productivity.The SAP Business Technology Platform (BTP) Document Management Service offers a robust solution for managing documents seamlessly within SAP Fiori applications.
In this blog series we will explore different scenarios and find suitable solutions to integrate DMS into SAP Fiori Applications. This will help consultants to
Blog # 1: Embed SAP BTP Attachment Reuse UI in a Custom Fiori App
Blog # 2: Embed SAP BTP Attachment Reuse UI in an SAP Fiori Elements application
Blog # 3: Using SAP BTP DMS in an SAP Business Process Automation and integrate to a Task UI application
Blog # 4: Using SAP BTP DMS API for Custom requirements
In the first part of the blog series,we covered basic features of SAP BTP DMS Service,the Reusable UI component and its integration with a Custom Fiori application.
In the 2nd installment of the series, we will cover using SAP BTP Attachment Reuse UI in
- Scenario #1: SAP Fiori Elements List Report App (oData V2)
- Scenario #2: SAP Fiori Elements List Report App (oData V4) in a CAP application
Prerequisite
- Set up a Dev Space in Business Application Studio
- Add Entitlement for following services in your subaccounta. SAP BTP Document Management Service, Integration Option – Standard (Instance)b. SAP BTP Document Management Service, Application Option – Standard (Subscription)
- Cloud Foundry
Setting Up Document Management Service
We have set up SAP BTP DMS in the previous blog. We have created 2 new folders for the purpose of this blog.
Note down the Repository ID and Folder ID (Object ID) for the “General” folder. This will be used in the current blog. If you are using DMS Application option, the Root ID and Folder ID can be retrieved form directly the url. I will be in format of
https://<sub-account-url>/cp.portal/site#user-display?sap-ui-app-id-hint=com.sap.ecm.sdm.user&/documents/v1/open/rep=<RepositoryID>&obj=<ObjectID>
You may also use DMS API to retrieve the details. Please check the link shared earlier.
SCENARIO#1
Embed SAP BTP DMS Reuse UI to Fiori Elements App based on Nothwind oData V2 service.
Step 1:
Create a new Fiori Elements Application “dmsreuseui.listreport.v2” using SAP Fiori Generator wizard in Business Application Studio.
Step 2:
Update Manifest file to use the Reuse UI.
Add the Component usage following under “sap.ui5” section.
"componentUsages": {
"documentTable": {
"name": "com.sap.ecm.reuse.documentTable"
}
},
After Component Usage ,add the resource roots attribute.
"resourceRoots": {
"com.sap.ecm.reuse.documentTable": "./../../comsapecmreuse.comsapecmreusedocumentTable/",
"com.sap.ecm.reuse.admin": "./../comsapecmreuse.comsapecmreuseadmin/"
}
The standard Reuse UI comes in 2 variants “documentTable" and “admin”. We are going to use “documentTable” variant for this blog series.
Step 3:
Add an embedded component.
"embeddedComponents": {
"simple:Attachment": {
"id": "Attachment",
"componentName": "com.sap.ecm.reuse.documentTable",
"title": "{{Attachment}}",
"settings": {
"destinationPath": "/comsapecmreuse.comsapecmreusedocumentTable/api",
"repositoryId": <Repository ID>,
"objectId": <Object ID>
}
}
Step 4:
Update xs-app.json file to include route for DMS Integration API.
{
"source": "^/comsapecmreuse.comsapecmreusedocumentTable/api(.*)$",
"target": "$1",
"authenticationType": "xsuaa",
"service":"com.sap.ecm.reuse",
"endpoint": "ecmservice"
}
Step 5:
Update MTA file to enable authentication and authorization using client credential between Fiori Application and DMS service.
Add Document Management Service, Integration option as a module.
- name: test-dms
parameters:
service-key:
name: sdm-key
Add destination configuration for DMS instance using the client credentials.
- Name: test-dms
Authentication: OAuth2UserTokenExchange
ServiceInstanceName: test-dms
ServiceKeyName: sdm-key
Finally, add the DMS instance under resources section
- name: test-dms
type: org.cloudfoundry.managed-service
parameters:
service: sdm
service-name: test-dms
service-plan: standard
Step 6:
Deploy your app in cloud Foundry environment. You may choose to use context menu in project or use terminal commands (mbt build & cf deploy)
Step 7:
Log-in to SAP BTP Cockpit and find the deployed application under „HTML Applications“ section.
Click on the application to launch it in a new tab.
Select an Order from list Report table and navigate to Object page
The application has the Reuse UI embedded and the "Fiori Elements" folder is launched as Root folder.
SCENARIO # 2:
Embed SAP BTP DMS Reuse UI to an SAP CAP Application.
Prerequiisites:
We are going to use sample incidents CAP application. Follow the steps provided in tutorial https://developers.sap.com/group.cap-application-full-stack.html
Step1:
As the Fiori App is already available from the tutorial, we will move to next step to embed the Reuse UI.
Step 2:
Update Manifest file to use the Reuse UI. Add the resource roots attributes
"resourceRoots": {
"com.sap.ecm.reuse.documentTable": "./../../comsapecmreuse.comsapecmreusedocumentTable/",
"com.sap.ecm.reuse.admin": "./../comsapecmreuse.comsapecmreuseadmin/"
}
The standard Reuse UI comes in 2 variants “documentTable" and “admin”. We are going to use “documentTable” variant for this blog series.
Step 3:
Add an embedded components
"IncidentsObjectPage": {
"type": "Component",
"id": "IncidentsObjectPage",
"name": "sap.fe.templates.ObjectPage",
"options": {
"settings": {
"editableHeaderContent": false,
"contextPath": "/Incidents",
"content": {
"body": {
"sections": {
"customAttachmentSection": {
"title": "Attachments",
"embeddedComponent": {
"name": "com.sap.ecm.reuse.documentTable",
"settings": {
"destinationPath": "/comsapecmreuse.comsapecmreusedocumentTable/api",
"repositoryId": <Repository ID>,
"objectId”: <Object ID>
}
}
}
}
}
}
}
}
}
Step 4:
Update xs-app.json file to include route for DMS Integration API.
{
"source": "^/comsapecmreuse.comsapecmreusedocumentTable/api(.*)$",
"target": "$1",
"authenticationType": "xsuaa",
"service":"com.sap.ecm.reuse",
"endpoint": "ecmservice"
}
Step 5:
Update MTA file to enable authentication and authorization using client credential between Fiori Application and DMS service.
Add Document Management Service, Integration option as a module.
- name: test-dms
parameters:
service-key:
name: sdm-key
Add destination configuration for DMS instance using the client credentials.
- Name: test-dms
Authentication: OAuth2UserTokenExchange
ServiceInstanceName: test-dms
ServiceKeyName: sdm-key
Finally, add the DMS instance under resources section
- name: test-dms
type: org.cloudfoundry.managed-service
parameters:
service: sdm
service-name: test-dms
service-plan: standard
Step 6:
Deploy your app in cloud Foundry environment. You may choose to use context menu in project or use terminal commands (mbt build & cf deploy)
Step 7:
Log-in to SAP BTP Cockpit and find the deployed application under "HTML Applications" section.
Click on the application to launch it in a new tab.
Select an Order from list Report table and navigate to Object page.
The application has the Reuse UI embedded and the „CAP“ folder is launches as Root folder.
Please note:If you face any issues in rendering of the Attachment section, try using the following code to rerender the component as workaround in Object Page extension.
CONCLUSION:
We learned how to embed the standard SAP BTP DMS Reuse UI in both oData V2 and oData V4 (CAP) based Fiori Element Apps using few simple stepS.In the next blog of the series we will see how SAP BTP DMS can be integrated with SAP Build Process Automation Task UI.
