Unlocking Efficiency: Leveraging SAP BTP Document Management Service in Fiori Applications # 3

Estimated read time 15 min read

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 previous blog we covered using SAP BTP Attachment Reuse UI in SAP Fiori Elements applications.

In the 3rd installment of the series, we will cover using SAP BTP Attachment Reuse UI in an approval scenario in My Inbox App using Task UI.We will use a simple SAP Build Process Automation(SBPA) Workflow for the purpose.

Prerequisite

1. Set up a Dev Space in Business Application Studio
2. Add Entitlement for following services in your sub account
   a. SAP BTP Document Management Service, Integration Option – Standard (Instance)
   b. SAP BTP Document Management Service, Application Option – Standard (Subscription)
3. Cloud Foundry
4. Set up SAP Build Process Automation (SBPA)
5. Set up SAP Build Workzone, Standard-Edition

Setting Up SAP Build Process Automation and SAP Build Workzone

SAP Build Process Automation in the SAP Business Technology Platform combines the capabilities of SAP Workflow Management and SAP Intelligent RPA in an easy-to-use, no-code AI-powered experience. It increases organizations’ capacity to drive process automation by empowering business experts to become citizen developers. Leveraging the power of no-code, citizen developers can build, adapt, improve, and innovate business processes with minimum assistance from scarce IT resources.

To access the Applications provided by SBPA, we need to integrate it with SAP Build Workzone.

Follow the tutorial https://developers.sap.com/tutorials/spa-configure-workzone.html   to do the setup and integration

Follow the tutorial https://developers.sap.com/tutorials/spa-subscribe-booster.html   to set up SBPA in your trial or paid subaccount.

Setting Up Document Management Service and Integrate with SBPA

We have set up SAP BTP DMS in the previous blog

Note down the Repository ID. 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.

The next step is to establish connection between SBPA and SAP BTP DMS Service.

The configuration steps are explained on SAP Help https://help.sap.com/docs/build-process-automation/sap-build-process-automation/configure-attachment-destination-in-sap-btp-subaccount

Follow the instructions to create a destination “sap_process_automation_document_store” in you BTP subaccount and then refer it in SBPA control tower.

Scenario

We are taking a very simple scenario in this blog.A user triggers a Approval process for a Material, which an approver reviews and approves.The trigger form has a simple interface for user to add few basic details and add attachments.

The Approval task will have the details provided by the user along with SAP BTP.

PART#1 : Create a TASK UI Fiori App

The general information on how to create a Task UI for Workflow Approval process is provided at https://developers.sap.com/tutorials/spa-create-sapui5-task-orderapproval.html  

In current blog we will restrict ourselves to the changes that are required to integrate DMS to this application.

Step 1: Create a new Task UI app using the referenced tutorial.

Step 2: Modify the manifest to update the import/export parameters required for the integration to SBPA workflow.When an Attachment object is added to trigger UI, the folder (Object ID) is passed on the SBPA runtime as a string property. This property is of main importance for us for DMS integration.

 

“sap.bpa.task”: {
“_version”: “1.0.0”,
“outcomes”: [
{
“id”: “approve”,
“label”: “Approve”
},
{
“id”: “reject”,
“label”: “Reject”
}
],
“inputs”: {
“$schema”: “http://json-schema.org/draft-07/schema”,
“title”: “input”,
“type”: “object”,
“required”: [],
“properties”: {
“Material”: {
“type”: “string”,
“title”: “Material”,
“description”: “Material”
},
“Country”: {
“type”: “string”,
“title”: “Country”,
“description”: “Country”
},
“MaterialType”: {
“type”: “string”,
“title”: “Material Type”,
“description”: “Material Type”
},
“NotesHistory”: {
“type”: “string”,
“title”: “Notes History”,
“description”: “Notes History”
},
“AttachmentFolder”: {
“type”: “string”,
“title”: “Attachment Folder”,
“description”: “Attachment Folder”
}
}
},
“outputs”: {
“$schema”: “http://json-schema.org/draft-07/schema”,
“title”: “output”,
“type”: “object”,
“required”: [
“NewNote”
],
“properties”: {
“NewNote”: {
“type”: “string”,
“title”: “New Note”,
“description”: “New Note”
}
}
},
}

 

Step 3: Update manifest file to use the Reuse UI.

Add the Component usage following under “sap.ui5” section. Repository ID can also be added as a parameter as environment parameter in workflow for each environment and passed on to Task UI along with other parameters.

 

 

“componentUsages”: {
“documentTable”: {
“name”: “com.sap.ecm.reuse.documentTable”,
“settings”: {
“destinationPath”: “/comsapecmreuse.comsapecmreusedocumentTable/api”,
“repositoryId”: “<Provide Repository ID>”
}
}
},

 

After Component Usage, 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 4: Add the component in the xml view

 

<core:ComponentContainer id=”sdi-document” usage=”documentTable” async=”false” manifest=”true” componentCreated=”onComponentCreated”/>

 

Step 5: Read the Object ID (Folder where SBPA Trigger UI has uploaded documents) to the component settings in control file. For each instance of Workflow this is unique folder that gets generated.

Please note that the attachment ID property has prefix “spa-res:cmis:folderid: ” which needs to be removed to get the real folder (or object ID). You can do it in controller or use script task in workflow to do the conversion.

 

onComponentCreated: function(oEvent){
let oComp = oEvent.getSource().getComponentInstance();
let oContextModel = this.getView().getModel(“context”);
oContextModel.dataLoaded().then(function(oData){
let sAttachmentPath = oContextModel.getProperty(“/AttachmentFolder”)?.replace(“spa-res:cmis:folderid:”,””);
oComp.setHomeFolderId(sAttachmentPath);
oComp.requestNavigationAndOpen(oComp.getRepositoryId(), sAttachmentPath);
}.bind(this));
}

 

Step 6: 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 7: 

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 8: 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 9: Log-in to SAP BTP Cockpit and find the deployed application under „HTML Applications“ section.

We can’t test the application here as it needs to be embedded into an Approval step in SBPA workflow and then accessed through My Inbox.

PART 2 # : Create an SBPA Workflow

To add a task UI in an SBPA workflow , follow the tutorial @ https://developers.sap.com/tutorials/spa-integrate-sapui5-task-process.html  In this section we will cover the most important steps only. 

Prerequisite:

Create a Workflow and add a Trigger Form to start the workflow. Add input fields and an attachment section.

Step 1: In your process overview , import a form.

Provide App ID and version and import the form.
Refer to manifest file to get the App ID

Confirm the Form has been imported.

Step 2: Open the workflow and add a script task. Format the folder ID.

Step 3: Add a new Approval step and select the Approval Form imported earlier.

 

Map the input parameters. Please note the attachmentFolderPath is used from custom task created in previous step.

Step 4: Release and Deploy the application.

TESTING : 

Step 1: Use the Form link from start event of the Deployed Workflow to trigger a new approval process.
Make sure an attachment is uploaded.

Step 2: Open My Inbox app on your workzone site. Please note using locally embedded “My Inbox” app in SBPA will not work due to approuter limitations.

Access the approval task item to validate the Task UI is embedded and hast he detils along with SAP BTP DMS Reuse UI.

CONCLUSION:  We learned how to embed the standard SAP BTP DMS Reuse UI in a SBPA Approval process using a Task UI.In the final blog of the series we will see how SAP BTP DMS API can be used in CAP based applications for custom scenarios.

 

​ 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 SAPFiori Applications. This will help consultants toBlog # 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 applicationBlog # 4: Using SAP BTP DMS API for Custom requirements.In the previous blog we covered using SAP BTP Attachment Reuse UI in SAP Fiori Elements applications.In the 3rd installment of the series, we will cover using SAP BTP Attachment Reuse UI in an approval scenario in My Inbox App using Task UI.We will use a simple SAP Build Process Automation(SBPA) Workflow for the purpose.Prerequisite1. Set up a Dev Space in Business Application Studio2. Add Entitlement for following services in your sub account   a. SAP BTP Document Management Service, Integration Option – Standard (Instance)   b. SAP BTP Document Management Service, Application Option – Standard (Subscription)3. Cloud Foundry4. Set up SAP Build Process Automation (SBPA)5. Set up SAP Build Workzone, Standard-EditionSetting Up SAP Build Process Automation and SAP Build WorkzoneSAP Build Process Automation in the SAP Business Technology Platform combines the capabilities of SAP Workflow Management and SAP Intelligent RPA in an easy-to-use, no-code AI-powered experience. It increases organizations’ capacity to drive process automation by empowering business experts to become citizen developers. Leveraging the power of no-code, citizen developers can build, adapt, improve, and innovate business processes with minimum assistance from scarce IT resources.To access the Applications provided by SBPA, we need to integrate it with SAP Build Workzone.Follow the tutorial https://developers.sap.com/tutorials/spa-configure-workzone.html   to do the setup and integrationFollow the tutorial https://developers.sap.com/tutorials/spa-subscribe-booster.html   to set up SBPA in your trial or paid subaccount.Setting Up Document Management Service and Integrate with SBPAWe have set up SAP BTP DMS in the previous blogNote down the Repository ID. 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 ofhttps://<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.The next step is to establish connection between SBPA and SAP BTP DMS Service. The configuration steps are explained on SAP Help https://help.sap.com/docs/build-process-automation/sap-build-process-automation/configure-attachment-destination-in-sap-btp-subaccount Follow the instructions to create a destination “sap_process_automation_document_store” in you BTP subaccount and then refer it in SBPA control tower.ScenarioWe are taking a very simple scenario in this blog.A user triggers a Approval process for a Material, which an approver reviews and approves.The trigger form has a simple interface for user to add few basic details and add attachments.The Approval task will have the details provided by the user along with SAP BTP.PART#1 : Create a TASK UI Fiori AppThe general information on how to create a Task UI for Workflow Approval process is provided at https://developers.sap.com/tutorials/spa-create-sapui5-task-orderapproval.html  In current blog we will restrict ourselves to the changes that are required to integrate DMS to this application.Step 1: Create a new Task UI app using the referenced tutorial.Step 2: Modify the manifest to update the import/export parameters required for the integration to SBPA workflow.When an Attachment object is added to trigger UI, the folder (Object ID) is passed on the SBPA runtime as a string property. This property is of main importance for us for DMS integration. “sap.bpa.task”: {
“_version”: “1.0.0”,
“outcomes”: [
{
“id”: “approve”,
“label”: “Approve”
},
{
“id”: “reject”,
“label”: “Reject”
}
],
“inputs”: {
“$schema”: “http://json-schema.org/draft-07/schema”,
“title”: “input”,
“type”: “object”,
“required”: [],
“properties”: {
“Material”: {
“type”: “string”,
“title”: “Material”,
“description”: “Material”
},
“Country”: {
“type”: “string”,
“title”: “Country”,
“description”: “Country”
},
“MaterialType”: {
“type”: “string”,
“title”: “Material Type”,
“description”: “Material Type”
},
“NotesHistory”: {
“type”: “string”,
“title”: “Notes History”,
“description”: “Notes History”
},
“AttachmentFolder”: {
“type”: “string”,
“title”: “Attachment Folder”,
“description”: “Attachment Folder”
}
}
},
“outputs”: {
“$schema”: “http://json-schema.org/draft-07/schema”,
“title”: “output”,
“type”: “object”,
“required”: [
“NewNote”
],
“properties”: {
“NewNote”: {
“type”: “string”,
“title”: “New Note”,
“description”: “New Note”
}
}
},
} Step 3: Update manifest file to use the Reuse UI.Add the Component usage following under “sap.ui5” section. Repository ID can also be added as a parameter as environment parameter in workflow for each environment and passed on to Task UI along with other parameters.  “componentUsages”: {
“documentTable”: {
“name”: “com.sap.ecm.reuse.documentTable”,
“settings”: {
“destinationPath”: “/comsapecmreuse.comsapecmreusedocumentTable/api”,
“repositoryId”: “<Provide Repository ID>”
}
}
}, After Component Usage, 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 4: Add the component in the xml view <core:ComponentContainer id=”sdi-document” usage=”documentTable” async=”false” manifest=”true” componentCreated=”onComponentCreated”/> Step 5: Read the Object ID (Folder where SBPA Trigger UI has uploaded documents) to the component settings in control file. For each instance of Workflow this is unique folder that gets generated.Please note that the attachment ID property has prefix “spa-res:cmis:folderid: ” which needs to be removed to get the real folder (or object ID). You can do it in controller or use script task in workflow to do the conversion. onComponentCreated: function(oEvent){
let oComp = oEvent.getSource().getComponentInstance();
let oContextModel = this.getView().getModel(“context”);
oContextModel.dataLoaded().then(function(oData){
let sAttachmentPath = oContextModel.getProperty(“/AttachmentFolder”)?.replace(“spa-res:cmis:folderid:”,””);
oComp.setHomeFolderId(sAttachmentPath);
oComp.requestNavigationAndOpen(oComp.getRepositoryId(), sAttachmentPath);
}.bind(this));
} Step 6: 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 7: 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 8: 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 9: Log-in to SAP BTP Cockpit and find the deployed application under „HTML Applications“ section.We can’t test the application here as it needs to be embedded into an Approval step in SBPA workflow and then accessed through My Inbox.PART 2 # : Create an SBPA WorkflowTo add a task UI in an SBPA workflow , follow the tutorial @ https://developers.sap.com/tutorials/spa-integrate-sapui5-task-process.html  In this section we will cover the most important steps only. Prerequisite:Create a Workflow and add a Trigger Form to start the workflow. Add input fields and an attachment section.Step 1: In your process overview , import a form.Provide App ID and version and import the form.Refer to manifest file to get the App IDConfirm the Form has been imported.Step 2: Open the workflow and add a script task. Format the folder ID.Step 3: Add a new Approval step and select the Approval Form imported earlier. Map the input parameters. Please note the attachmentFolderPath is used from custom task created in previous step.Step 4: Release and Deploy the application.TESTING : Step 1: Use the Form link from start event of the Deployed Workflow to trigger a new approval process.Make sure an attachment is uploaded.Step 2: Open My Inbox app on your workzone site. Please note using locally embedded “My Inbox” app in SBPA will not work due to approuter limitations.Access the approval task item to validate the Task UI is embedded and hast he detils along with SAP BTP DMS Reuse UI.CONCLUSION:  We learned how to embed the standard SAP BTP DMS Reuse UI in a SBPA Approval process using a Task UI.In the final blog of the series we will see how SAP BTP DMS API can be used in CAP based applications for custom scenarios.   Read More Technology Blogs by SAP articles 

#SAP

#SAPTechnologyblog

You May Also Like

More From Author