Skip to Content
Author's profile photo Navya Shree

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/

 

 

 

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo imad zgh
      imad zgh

      Hello Navya ShreeNavya Shree

      Thanks!!!

      Author's profile photo Aaron Campos Martinez
      Aaron Campos Martinez

      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

      GrantAccess