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.
Add a Script button and a HTML Viewer on the SAP Personas flavor layout.
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;
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.
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 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.
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;
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.
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;
