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/