SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software
Development resources, articles, tutorials, code samples, tools and downloads for SAP HANA and ABAP, HANA Database, SQLScript, SAP UI5, Screen Personas, Web Dynpro, Workflow


Consume OData Service Script for SAP Screen Personas

Consume OData service in SAP Screen Personas flavor to display in HTML Viewer using javascript codes shared in this tutorial to be used in Scripting Editor for developers. In this SAP Personas tutorial, I shared two script code blocks to call OData service in Personas flavor and display return data in HTML Viewer control.

Programmers who want to test the Personas script first with a public available OData service can directly check the second example given in this tutorial.


Create Personas Flavor

Create a new SAP Screen Personas flavor to demonstrate how to consume OData service using script features of SAP Personas with sample codes.

create new SAP Personas flavor for consuming Odata service

Add a Script button and a HTML Viewer on the SAP Personas flavor layout.

HTML Viewer and Script button on SAP Personas flavor

Save the flavor and exit to switch for Scripting Editor.


Create Personas Script to Consume OData Service

Create a new script, name it. And copy and paste following javascript code into your function in Script Editor.
Please note that the OData service which I'm calling and consuming returned data is not public available.
Personas developers should replace the OData url and the sections where I read OData structure for target data.
The second sample will be using public available OData service.

//debugger;
var tableHTML = '<html><head> \
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> \
</head><body> \
<script type="text/javascript"> \
$(document).ready(function () { \
$("#odata").text("consuming OData..."); \
var url = "/sap/opu/odata/Kodyaz/SO_VO2_CAMPAIGN_APPRLIST_SRV/ApprovalRequestSet"; \
$.getJSON(url, function (result) { \
var tableList = result.d.results; \
var rowCount = tableList.length; \
var html = ""; \
for(i=0;i<rowCount;i++){ \
 html = html + tableList[i].campaign_name + "<br />"; \
} \
$("#odata").html("<b>Total Campaign Count</b>: " + rowCount + "<br /><br /><b>Campaign Name</b><br />" + html); \
});}); \
</script> \
<p id="odata"></p></body></html>';
session.findById("wnd[0]/usr/htmlViewerPersonas_1466091563140").content = tableHTML;
Code

Before you execute the Javascript code replace the HTMLViewer control id with the one on your Personas flavor.
You can use Inspector to find the HTML Viewer you have added on your SAP Screen Personas flavor.

Then Validate and Save the Personas script code which we will use to call and consume OData service.

Assign the Javascript function we have just created to the Personas script button. When the script button is clicked the attached Javascript code will be executed on the Personas flavor.

assign Javascript code to SAP Personas script button

Here in following screenshot, SAP developers can see the results of above SAP Screen Personas javascript code to consume OData and display row data in HTML Viewer control.

consume OData service in SAP Screen Personas script code


Consume Sample OData Service from OData.org

If you want to work and test the script with a public available OData service, we can use one from OData.org:
http://services.odata.org/V4/OData/OData.svc/

I want to list the Persons data set from the OData service, so I will call following OData service url in my SAP Personas script code:
http://services.odata.org/V4/OData/OData.svc/Persons

You can call http://services.odata.org/V4/OData/OData.svc/Persons web address in a browser to see the data which will be returned in our sample Personas flavor.

sample Odata service to test on Personas flavor

You see this OData service returns Persons structure with ID and Name fields in its simplest form.

Since this OData service and Persons set is different than the one in the first example, we will slightly change some parts of our javascript code.

var tableHTML = '<html><head> \
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> \
</head><body> \
<script type="text/javascript"> \
$(document).ready(function () { \
$("#odata").text("consuming OData..."); \
var url = "http://services.odata.org/V4/OData/OData.svc/Persons"; \
$.getJSON(url, function (result) { \
var tableList = result.value; \
var rowCount = tableList.length; \
var html = ""; \
for(i=0;i<rowCount;i++){ \
 html = html + tableList[i].Name + "<br />"; \
} \
$("#odata").html("<b>Persons Count</b>: " + rowCount + "<br /><br /><b>Person Name</b><br />" + html); \
});}); \
</script> \
<p id="odata"></p></body></html>';
session.findById("wnd[0]/usr/htmlViewerPersonas_1466091563140").content = tableHTML;
Code

And here is the screenshot of the SAP Screen Personas flavor with HTML Viewer control where we display Persons list from public available OData service.

call Odata service from SAP Screen Personas

If Personas script developers experience problems with OData structure, they see all returned OData string in JSON format as follows.

var tableHTML = '<html><head> \
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> \
</head><body> \
<script type="text/javascript"> \
$(document).ready(function () { \
$("#odata").text("consuming OData..."); \
var url = "http://services.odata.org/V4/OData/OData.svc/Persons"; \
var ODataString; \
$.getJSON(url, function (result) { \
ODataString = JSON.stringify(result); \
$("#odata").html(ODataString); \
});}); \
</script> \
<p id="odata"></p></body></html>';
session.findById("wnd[0]/usr/htmlViewerPersonas_1466091563140").content = tableHTML;
Code


SAP HANA and ABAP

Install SAP Free
CRM Companies List
Web Based CRM Software


Copyright © 2004 - 2021 Eralper YILMAZ. All rights reserved.