In this blog I will take a look at OData, create Northwind destination, bind the data to SAP UI5 application and use oData and Ajax methods to Read, Delete and Create new records.
OData -- stands for Open Data Protocol. This is a RESTful protocol that is standardized at OASIS. It defines a set of best practices for developing and building RESTful APIs. OData helps to focus on business logic while you are building your RESTful APIs. So, given the right framework like SAPUI5 OData models, you can simply consume the OData service, and you can save a lot of time and effort for coding and design. [The description is referred from the odata.org web site, where you can find further details on OData.]
oData performs create, read, update and delete operations using HTTP methods:
Northwind OData service -- Instead of implementing an own OData service we will use the publicly available Northwind OData service to visualize remote data. The Northwind OData service is freely available and good to learn how to use and consume Odata service in SAPUI5 applications with SAP WebIDE or Business application studio.
Let's assume that we need to design a SAPUI5 application to read and bind the data of Northwind service.
Our goal is to practice the Ajax and oData model to read and bind the data to the list. We will use POST method of Ajax and oData model to create method. And briefly explore the Delete and Update methods.
Hint:
Please find the official guides for UI5 concepts in OData model and CRUD operations on the Documentation tab in the UI5 Demo Kit: https://sapui5.hana.ondemand.com/#/topic/6c47b2b39db9404582994070ec3d57a2#loioff667e12b8714f3595e68f...
[For the Step 1 and 2 I refer you to the Tutorials by Marius Obert. Please find the links in the Steps' names. The Tutorials will completely guide how:
To consume an oData service in a SAPUI5 application, make sure that the required destination is configured in the SAP Cloud platform subaccount.
After you set up the environment, use the Business application Studio to create a new SAPUI5 project.
The picture shows the new project details for our Exercise:
When creating an oDataModel instance the mandatory parameter is service URL.
Use the (Read-Write) service of Northwind (the one with random numbers after V2/) and bind this data to a list.
The pictures shows the path to Service URL for our oData model:
Copy the URL from the browser :
Call the function in the onInit method so that the collection is available for List binding when application gets loaded:
Now we can check and see our mini application will look as follows:
2. UPDATE
You can update/delete an entry by selecting the Radio button. You just need to pass the variable name in the payload.
You can also create a new entry using correct payload and use that in the oData call.
I used functions as follows:
3. CREATE
4. DELETE
Thank you for reading! I hope that my blog will help someone in designing their first SAPUI5 Odata Model application.
In the next post I will use the Ajax methods to read and bind the data and will create a new record using the POST method of Ajax.
Introduction.
OData -- stands for Open Data Protocol. This is a RESTful protocol that is standardized at OASIS. It defines a set of best practices for developing and building RESTful APIs. OData helps to focus on business logic while you are building your RESTful APIs. So, given the right framework like SAPUI5 OData models, you can simply consume the OData service, and you can save a lot of time and effort for coding and design. [The description is referred from the odata.org web site, where you can find further details on OData.]
oData performs create, read, update and delete operations using HTTP methods:
Northwind OData service -- Instead of implementing an own OData service we will use the publicly available Northwind OData service to visualize remote data. The Northwind OData service is freely available and good to learn how to use and consume Odata service in SAPUI5 applications with SAP WebIDE or Business application studio.
Exercise 1.
Let's assume that we need to design a SAPUI5 application to read and bind the data of Northwind service.
Our goal is to practice the Ajax and oData model to read and bind the data to the list. We will use POST method of Ajax and oData model to create method. And briefly explore the Delete and Update methods.
Hint:
Please find the official guides for UI5 concepts in OData model and CRUD operations on the Documentation tab in the UI5 Demo Kit: https://sapui5.hana.ondemand.com/#/topic/6c47b2b39db9404582994070ec3d57a2#loioff667e12b8714f3595e68f...
Getting Started.
[For the Step 1 and 2 I refer you to the Tutorials by Marius Obert. Please find the links in the Steps' names. The Tutorials will completely guide how:
- To configure a basic destination,
- To specify the SAP Business Application Studio usage parameter for a generic OData service,
- To create a new SAPUI5 project that is connected to a data source and
- To run the project to in the SAP Business Application Studio]
Step 1. Create a Destination within the Cloud Foundry Environment
To consume an oData service in a SAPUI5 application, make sure that the required destination is configured in the SAP Cloud platform subaccount.
- Login to SAP Cloud Platform Cockpit;
- Choose "Destinations" in the Menu;
- Create a new destination;
- Check Connections.
Step 2. Create an Empty SAPUI5 project and bind the data from of Northwind service.
After you set up the environment, use the Business application Studio to create a new SAPUI5 project.
The picture shows the new project details for our Exercise:
Step 3. Create a view to display a list of products.
<mvc:View controllerName="ns.odataui.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>
<List id="list" items="{/Categories}" mode="SingleSelect">
<items>
<StandardListItem title="{ID}" description="{Name}"></StandardListItem>
</items>
</List>
<VBox>
<Input placeholder="Enter the ID for the category" id="idinput"/>
<Input placeholder="Enter the category name" id="nameinput"/>
<Button text="Create" press="createData"/>
<Button text="Update" press="updateData"/>
<Button text="Delete" press="deleteData"/>
</VBox>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>Step 4. Bind a data source to the application and add the controls to activate our Create, Update and Delete buttons.
- READ
When creating an oDataModel instance the mandatory parameter is service URL.
Use the (Read-Write) service of Northwind (the one with random numbers after V2/) and bind this data to a list.
The pictures shows the path to Service URL for our oData model:
Copy the URL from the browser :
Call the function in the onInit method so that the collection is available for List binding when application gets loaded:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageBox"
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller, MessageBox) {
"use strict";
return Controller.extend("ns.odataui.controller.View1", {
onInit: function () {
var that = this;
var odataModel = new sap.ui.model.odata.v2.ODataModel("NorthwindService/V2/(S(jjlmjbf1oszuuecc251trygy))/OData/OData.svc");
odataModel.read("/Products",{
success:function(oData,oResponse){
MessageBox.success("Success");
},
error: function(oError){
MessageBox.error("Error");
}
});
this.getView().setModel(odataModel);
},Now we can check and see our mini application will look as follows:
2. UPDATE
You can update/delete an entry by selecting the Radio button. You just need to pass the variable name in the payload.
You can also create a new entry using correct payload and use that in the oData call.
I used functions as follows:
updateData: function(){
var list = this.getView().byId("list");
var selItem = list.getSelectedItem();
var title = selItem.getTitle();
var description = selItem.getDescription();
var Name = this.getView().byId("nameinput").getValue();
var payload = {
ID: parseInt(title),
Name: Name
};
var path = "/Categories(" + title + ")";
var odataModel = this.getView().getModel();
// @ts-ignore
odataModel.update(path,payload,{
success: function(data,response){
MessageBox.success("Successfully Updated");
},
error: function(error){
MessageBox.error("Error while updating the data");
}
});
},3. CREATE
createData: function(){
var ID = this.getView().byId("idinput").getValue();
var Name = this.getView().byId("nameinput").getValue();
var data = {
ID: parseInt(ID),
Name: Name
};
var odataModel = this.getView().getModel();
odataModel.create("/Categories", data, {
success: function(data, response){
MessageBox.success("Data successfully created");
},
error: function(error){
MessageBox.error("Error while creating the data");
}
});
},4. DELETE
deleteData: function(){
var list = this.getView().byId("list");
var selItem = list.getSelectedItem();
var title = selItem.getTitle();
var path = "/Categories(" + title + ")"; ///Categories(3);
var odataModel = this.getView().getModel();
odataModel.remove(path,{
success: function(data,response){
MessageBox.success("Deleted data");
},
error: function(error){
MessageBox.error("Deletion failed");
}
})
}Thank you for reading! I hope that my blog will help someone in designing their first SAPUI5 Odata Model application.
In the next post I will use the Ajax methods to read and bind the data and will create a new record using the POST method of Ajax.
- SAP Managed Tags:
5 Comments
