Integrate SAP Document Center with UI5 Application – Part 1
SAP Document Center provides anytime, anywhere access to view, edit, and collaborate on personal and corporate content in an easy-to-use mobile app. So you can access content and documents from all of your devices — and share it with your peers. Whether you need to deliver a presentation for a customer or simply want to read your documents while travelling, you don’t have to worry about complex file transfers via iTunes or email any more.
Step 1: Enable SAP Document Center in SAP Cloud Platform
Step 2: Once you enable the Document center to access the Document Center Click on Go to Service to open the Document Center in new tab.
the Document Center looks likes below
Step 3: Create a folder named ‘Documents’ and get the folder’s Repository and Object Ids
select the folder and click on Information Button
Extract the object and repository id present in Web link or Mobile link
Step 4: Integrate the Above Document Center with SAP UI5 Application
Create an UI5 Application on WebIde and create a destination as shown below with additional property ‘HTML5.RewriteResponses’ as False.
In the neo-app.json file add the below piece of code
{
"path": "/webapp/mcm",
"target": {
"type": "destination",
"name": "DocumentCenter",
"entryPath": "/mcm"
},
"description": "Destination to SAP Document Center"
},
{
"path": "/mcm",
"target": {
"type": "destination",
"name": "DocumentCenter",
"entryPath": "/mcm"
},
"description": "Destination to SAP Document Center"
},
{
"path": "/demodestination",
"target": {
"type": "destination",
"name": "DocumentCenter"
},
"description": "Destination to SAP Document Center"
}
add below piece of code in manifest.json
"sap.ui5": {
.......
"resourceRoots": {
"mcm": "mcm/resources/com/sap/mcm"
},
.......
},
add a VBox in the view with standard css class “sapUiTinyMarginBegin”
<App>
<pages>
<Page title="{i18n>title}">
<content>
<VBox id="documentCenterBox" width="100%" class="sapUiTinyMarginBegin" />
</content>
</Page>
</pages>
</App>
In the controller call the Factory function to create Document Center component by passing the Repository Id and Object Id (got in step 3) and add the Document center Component in the VBox.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"mcm/components/Factory",
"sap/ui/unified/FileUploader"
], function(Controller, Factory, FileUploader) {
"use strict";
return Controller.extend("DocumentCenter.controller.View1", {
onInit: function() {
var factory, docCenterComponent, box;
factory = new Factory();
docCenterComponent = factory.create({
type: "DocumentList",
destinationPath: "/demodestination",
repositoryId: "378ed525-7cfd-40fb-9850-ac679e033fa1",
objectId: "1hdpWgDi3TJqRco9X00zptpgOL5hxz0oEgH3T7d_EDg",
metadata1: "cmis:lastModificationDate",
metadata2: "cmis:lastModifiedBy",
metadata3: "cmis:contentStreamLength",
metadata4: "mcm:classification"
});
box = this.getView().byId("documentCenterBox");
box.addItem(docCenterComponent);
}
});
});
Deploy the application on SCP and run the same, the output is as shown below.
It allows you to sort, refresh, search, create folder, upload files, delete, cut, copy download and rename objects.
Note: As you can observe in the above output the files and folder icons have no color and its hard to differentiate between the file types for the user.
kindly refer my next blog to add the suitable color/icon for the files/folders displayed above.
https://blogs.sap.com/2018/10/05/integrate-sap-document-center-with-ui5-application-part-2/
Hello Navya ShreeNavya Shree
Thanks!!!
Thanks for your blog!
I think there’s something missing in your explanation, at least it’s something I had to do to be able to visualize that component in our UI5 app.
It is necessary to grant access to this service by Role or creating a Group with Roles. In our Dev environment we granted this just in Security>Authorizations section, in our Prod environment we granted throuh IdP default groups.
GrantAccess