More often than not, we need to consume SAP ABAP OData in our SAPUI5 Application. After all SAP is our bread and butter. In my previous blog post, I explained how to consume JSON model data in SAPUI5 application. As obvious from the title, in this tutorial, we will consume an OData model data in SAPUI5 application. WebIDE would be our development platform.
Objective:
- Creation of Destination in SAP Cloud Platform account
- Creation of Data Source in the manifest.json file
- Declaration of OData Model in manifest.json file
- Creation of OData model instance in your view’s controller file
- Usage of the publicly available NorthWind Odata service
Lets get started…
1. Creation of Destination in SAP Cloud Platform account
Login to your SAP Cloud Platform account and go to Connectivity->Destination. Click on New Destination.
Enter the destination properties as shown below. Northwind OData is free and public. We can read data from there. So, we are using it in our tutorials.
Click on Check Connection button, a success message should be displayed.
2. Creation of Data Source in Manifest.json file
In SAP WebIDE, manifest.json file has Descriptor Editor and a Code Editor. We shall use descriptor editor (no coding) to create a new data source based on the destination created above. Open your manifest.json file’s descriptor editor, go to Data Sources tab and click on the + icon to add a new Data Source for your SAPUI5 application. Based on this data source, an OData model would then be created.
Create new Datasource in manifest.json file
In the new data source wizard, select the Service URL option and enter the values as shown below:
In the Relative URL field, enter the path of the service. In our case, it is /V2/northwind/northwind.svc. Then click on Test button.
Please note: At the time of creation of destination, provide only the domain and NOT the relative path of the service. Relative path should be given at the time of creation of Data Source in manifest.json file.
3. Declaration of OData model in manifest.json file
If the Test is successful, you’ll find the Next button of the wizard enabled. Click on Next button. On the subsequent page of the wizard, enter name your OData model. In our case, the name of Model is myModel.
Click on Finish.
This will generate the code for datasource and model in manifest.json file.
4. Creation of OData model instance in your view’s controller
In the onInit method of your view’s controller, write below code to access the Model declared in manifest.json file in previous step.
onInit: function () {
// access OData model declared in manifest.json file
var oModel = this.getOwnerComponent().getModel("myModel");
//set the model on view to be used by the UI controls
this.getView().setModel(oModel);
},5. OData Model’s Products entity
The OData model created in our application is based on publicly available NorthWind OData service. This OData service has lots of data under various entity types like Categories, Customers, Employees, Products etc. In this tutorial, we will be using the Products Entity of the OData service.
6. Binding XML View Controls to Display Products Collection
In your XML view, write below code to bind ObjectListItem and a ObjectHeader in Master and Detail sections respectively.
<code><mvc:View controllerName="org.unity.DemoMasterDetail.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<SplitApp id="splitappid" masterButtonText="Master" masterNavigate="" afterMasterNavigate="" masterButton="" detailNavigate="">
<masterPages>
<Page id="masterpageid" title="Products" titleLevel="Auto" showNavButton="true" showHeader="true" showSubHeader="true" navButtonText=""
navButtonTooltip="" enableScrolling="true" icon="" navButtonTap="" navButtonPress="">
<content>
<List id="productlist" items="{/Products}" headerText="Products" headerDesign="Standard" footerText="End of the List" noDataText="No Employees"
showNoData="true">
<items>
<ObjectListItem type="Navigation" title="{ProductName}" number="{UnitPrice}" numberUnit="INR" intro="{ProductID}" press="onObjectItemPress">
<attributes>
<ObjectAttribute title="" text="{QuantityPerUnit}"></ObjectAttribute>
</attributes>
<firstStatus>
<ObjectStatus title="{UnitsInStock}" text="{designation}"></ObjectStatus>
</firstStatus>
<secondStatus>
<ObjectStatus title="{Discontinued}"></ObjectStatus>
</secondStatus>
</ObjectListItem>
</items>
<headerToolbar>
<Toolbar>
<content>
<Title text="Products" title="Search"></Title>
<ToolbarSpacer/>
<SearchField search="onSearch" width="50%"></SearchField>
</content>
</Toolbar>
</headerToolbar>
</List>
</content>
</Page>
</masterPages>
<detailPages>
<Page id="detailpageid" title="Product Details" titleLevel="Auto" showNavButton="true" showHeader="true" showSubHeader="true"
navButtonText="" navButtonTooltip="" enableScrolling="true" icon="" navButtonTap="" navButtonPress="">
<content>
<ObjectHeader id="objectheaderid" binding="{/Products}" title="{ProductName}"
number="{UnitPrice}"
numberUnit="{CurrencyCode}">
<statuses>
<ObjectStatus text="Some Damaged" state="Error"/>
<ObjectStatus text="In Stock" state="Success"/>
</statuses>
<attributes>
<ObjectAttribute text="{SupplierID}"/>
<ObjectAttribute text="{CategoryID}"/>
<ObjectAttribute text="{QuantityPerUnit}"/>
<ObjectAttribute text="www.sapspot.com" active="true"/>
</attributes>
</ObjectHeader>
</content>
</Page>
</detailPages>
</SplitApp>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View></code>
7. Defining the onItemPress and onSearch Event Handlers in View’s Controller
Go back to your view and define onObjectItemPress event handler
<code>onObjectItemPress: function (oEvent) {
// get the source control which triggered this event
var oItem = oEvent.getSource();
// get the binding context of the control
var oCtx = oItem.getBindingContext();
// get the binding path
var path = oCtx.getPath();
// use element binding to display current item
this.getView().byId("objectheaderid").bindElement(path);
},</code>Now define onSearch event handler
<code>onSearch: function (oEvent) {
// create a blank filter array
var aFilter = [];
// get the string which was searched by the user
var sQuery = oEvent.getParameter("query");
// create new filter object using the searched string
var oFilter = new sap.ui.model.Filter("ProductName", FilterOperator.Contains, sQuery);
// push the newly created filter object in the blank filter array created above.
aFilter.push(oFilter);
// get the binding of items aggregation of the List
var oBinding = this.getView().byId("productlist").getBinding("items");
// apply filter on the obtained binding
oBinding.filter(aFilter);
}</code>Time to Test the SAPUI5 Application
Click on run icon in your WebIDE toolbar. The application will open in a browser window. Test the master detail and search features of the application. Note that the Products entity’s data is being displayed in SAPUI5 application.
SAPUI5 application displaying data from OData service
