Binding SAP UI 5 aka Open UI 5 Table with List data from SharePoint 2013 REST API

SAP UI 5 aka Open UI 5 is a new development framework available for SAP developers to expose and consume SAP data as JSON objects via REST API calls. Since it is a JavaScript UI library like jQuery UI, this can be used with any client side application that can make use of JSON

To be frank, this is the biggest client side library I have used so far. When extracted, the runtime files alone comes to 55 MB and the total number of files counts to 4K +

This is huge and bit complex and I am using it for quite some time for one of my SharePoint Project as it is heavily dependent on SAP data and UX design.

This article provides details on how to use SAP UI 5 in a SharePoint Application

Pre-requisites

1. Download Open UI 5 runtime from http://sap.github.io/openui5/

2. Extract the content and move it to a new folder named sap-ui5 in layouts folder of 15 hive ( In a typical installation the folder path would be C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS)

3. jQuery library to perform REST calls

For this demo, I have directly placed all the files under layouts folder.

Packaging and deploying it through a WSP solution or uploading it to Style Library or any other doc lib directly are also other alternative approaches.

I have also created a new list named “Employees” with columns Title and Location

Steps

1. Create a new SharePoint Page

2. Add a Script Editor Web part to the page

3. Copy and paste the below code in Script Editor

 <script>
 	$.getJSON("/_vti_bin/listdata.svc/Employees", function (data) {
 
 		var sTable = new sap.ui.table.Table({
 			width: "500px",
 			visibleRowCount: 5
 		});
 		sTable.setTitle("Employee Details");
 
 		sTable.addColumn(new sap.ui.table.Column({
 			label: new sap.ui.commons.Label({ text: "Employee Name" }),
 			template: new sap.ui.commons.TextView().bindProperty("text", "Title"),
 		}));
 
 		sTable.addColumn(new sap.ui.table.Column({
 			label: new sap.ui.commons.Label({ text: "Location" }),
 			template: new sap.ui.commons.TextView().bindProperty("text", "Location"),
 		}));
 
 		var oModel = new sap.ui.model.json.JSONModel();
 		oModel.setData({ modelData: data.d.results });
 		sTable.setModel(oModel);
 		sTable.bindRows("/modelData");
 		sTable.placeAt("Emp");
 
 	}, function () { alert('failed'); })
 </script>
 
 <div id='Emp'></div>

If everything is in place you would be able to view a grid similar to the one displayed above