Ashok Raja's Blog
Binding SAP UI 5 aka Open UI 5 Table with List data from SharePoint 2013 REST API
by Ashok Raja T 21. June 2014 10:32

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


1. Download Open UI 5 runtime from

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

Note: This article on developing SAP UI 5 applications in Visual Studio provides more details on how to create a basic Open UI 5 application with Visual Studio


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

 	$.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 });
 	}, function () { alert('failed'); })
 <div id='Emp'></div>
Note : If you have placed the libraries in a different location, change the URL before pasting it in the script editor


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

blog comments powered by Disqus