simple openui5 application
DESCRIPTION
ODATATRANSCRIPT
Simple openUI5 application I. – How to create an OData model using SEGW transaction
July 22, 2014 Peter Marcely OData, OpenUI5 / SAPUI5 Tutorial, SAP Netweaver gateway
In this first part of tutorial, I am going to show how to prepare a data model using SEGW transaction. If
you got stuck, you can try to look at this official document that describes the process in more details.
Steps needed to create your first oData service
1. You need to prepare a database table that will be used for storing data. Below you can see the
specific database table which is used in this example.
2. You need to run the transaction (t-code) SEGW and create your first project.
3. Click on Data Model > Import from DDIC structure. Follow all the steps using your created database
table. At the end you should be able to see following table. Then select relevant keys and finish this
process.
4. Creatable, updatable, deletable and addressable parameters need to be checked for your entity.
5. Now, you need to generate a runtime object. Select a property panel on your project by right click
and choose Generate runtime action.
6. In Service implementation > UserSet > GetEntitySet click by right and choose Go to ABAP
Workbench.
7. The main goal now is to redefine relevant methods in USERS_DPC_EXT class. See content of
redefined methods below.
Implementation of redefined methods
USERSET_CREATE_ENTITY – CREATE odata method
1
2
3
4
5
6
7
8
METHOD userset_create_entity.
DATA: ls_user TYPE zsa_users.
io_data_provider->read_entry_data( IMPORTING es_data = ls_user ).
INSERT INTO zsa_users VALUES ls_user.
er_entity = ls_user.
ENDMETHOD.
USERSET_GET_ENTITY – GET odata method
1
2
3
4
5
6
7
8
9
10
11
12
13
14
METHOD userset_get_entity.
DATA: lt_keys TYPE /iwbep/t_mgw_tech_pairs,
ls_key TYPE /iwbep/s_mgw_tech_pair,
lv_email TYPE char100,
ls_user TYPE zsa_users.
lt_keys = io_tech_request_context->get_keys( ).
READ TABLE lt_keys WITH KEY name = 'EMAIL' INTO ls_key.
lv_email = ls_key-value.
SELECT SINGLE * FROM zsa_users INTO CORRESPONDING FIELDS OF ls_user WHERE email = lv_email.
er_entity = ls_user.
ENDMETHOD.
USERSET_GET_ENTITYSET – GET odata method
1
2
3
4
5
6
METHOD userset_get_entityset.
DATA lt_users TYPE TABLE OF zsa_users.
SELECT * FROM zsa_users INTO TABLE lt_users.
et_entityset = lt_users.
ENDMETHOD.
USERSET_UPDATE_ENTITY – PUT odata method
1
2
3
4
5
6
7
8
9
10
11
12
13
METHOD userset_update_entity.
DATA: ls_user TYPE zsa_users.
io_data_provider->read_entry_data( IMPORTING es_data = ls_user ).
UPDATE zsa_users SET
firstname = ls_user-firstname
lastname = ls_user-lastname
age = ls_user-age
address = ls_user-address
WHERE email = ls_user-email.
er_entity = ls_user.
ENDMETHOD.
USERSET_DELETE_ENTITY – DELETE odata method
1
2
3
4
5
6
7
8
9
10
11
METHOD userset_delete_entity.
DATA: lt_keys TYPE /iwbep/t_mgw_tech_pairs,
ls_key TYPE /iwbep/s_mgw_tech_pair,
lv_email TYPE char100.
lt_keys = io_tech_request_context->get_keys( ).
READ TABLE lt_keys WITH KEY name = 'EMAIL' INTO ls_key.
lv_email = ls_key-value.
DELETE FROM zsa_users WHERE email = lv_email.
ENDMETHOD.
Testing your oData service
There is a gateway client which can be used for testing running services. Just run transaction(t-
code) /IWFND/GW_CLIENT and you can find out, if your service runs correctly.
Your oData service is running, now you can start to consume your data!
If you miss anything in the article, let me know in the comments.
http://www.abap-developers.com/2014/07/simple-openui5-application-ii-how-to-create-frontend-in-ui5-that-will-consume-odata-service/
Simple openUI5 application II. – How to create a frontend in OpenUI5 that will consume an OData service
July 22, 2014 Peter Marcely OData, OpenUI5 / SAPUI5 Tutorial, SAP Netweaver gateway
After the first part of this tutorial, we have created and run an OData service that can write/read data
to/from a SAP database table. In this part, I will explain how the frontend of an OpenUI5 application
works. Whole source code can be found in my github repository . You will actually seethe running
demo application at the end of this article.
Desired look and functionality of an application
Screenshots show how application will look like. It should be able to use all OData CRUD methods
– CREATE, PUT, DELETE, GET. That means you will be able to list, create, manage and delete users.
Code snippets
First, we need to set up our OData model in order use it further in the application. We will use the link
to our service which can be seen in the previous post in transaction /IWFND/GW_CLIENT. This will allow
us to connect our frontend part of an application(OpenUI5 in JavaScript) with the backend part
(SAP Gateway) using an OData protocol.
Set up model
12
var oModel = new sap.ui.model.odata.ODataModel("link_to_your_odata_service", false);sap.ui.getCore().setModel(oModel);
Then, we will initialize the table, its columns and bind the rows to user set. It means that the content of
a table will be automatically loaded with data from SAP Gateway by using OData calls which are
hidden for us, since OpenUI5 handles them in background.
Set up table
123456789
10111213141516171819202122232425262728293031323334353637383940414243444546474849505152
var oTable = new sap.ui.table.Table({editable: false,toolbar: new sap.ui.commons.Toolbar({
items: [ new sap.ui.commons.Button({
text: "Create user", press: function() {
openCreateDialog();},
}),new sap.ui.commons.Button({
text: "Update user's data", press: function() {
var idx = oTable.getSelectedIndex();if (idx == -1) return;var rows = oTable.getRows();var user = rows[idx].getCells();openUpdateDialog(user);
}, }),new sap.ui.commons.Button({
text: "Delete user", press: function() {
var idx = oTable.getSelectedIndex();if (idx == -1) return;var rows = oTable.getRows();var user = rows[idx].getCells();openDeleteDialog(user[0].getValue());
}, })
]}),
}); oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Email"}),template: new sap.ui.commons.TextField().bindProperty("value", "Email"),editable: false,sortProperty: "Email"
})); oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Firstname"}),template: new sap.ui.commons.TextField().bindProperty("value", "Firstname"),sortProperty: "Firstname",editable: false,
})); oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Lastname"}),template: new sap.ui.commons.TextField().bindProperty("value", "Lastname"),sortProperty: "Lastname",
53545556575859606162636465666768
editable: false,})); oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Age"}),template: new sap.ui.commons.TextField().bindProperty("value", "Age"),sortProperty: "Age",editable: false,
})); oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Address"}),template: new sap.ui.commons.TextField().bindProperty("value", "Address"),sortProperty: "Address",editable: false,
}));
Bind the rows of a table
123
oTable.setModel(oModel);oTable.bindRows("/UserSet");oTable.placeAt("content");
We will prepare CRUD functions that will handle create, update and delete operations. Inside of every
function, we will call an appropriate OData method, fill it with new data and specify success and
error callbacks.
CRUD Functions
123456789
10111213141516171819202122232425
/***** CREATE Operation *****/function openCreateDialog(){
var oCreateDialog = new sap.ui.commons.Dialog();oCreateDialog.setTitle("Create user");var oSimpleForm = new sap.ui.layout.form.SimpleForm({
maxContainerCols: 2,content:[
new sap.ui.core.Title({text:"Person"}),new sap.ui.commons.Label({text:"Email"}),new sap.ui.commons.TextField({value:""}),new sap.ui.commons.Label({text:"Firstname"}),new sap.ui.commons.TextField({value:""}),new sap.ui.commons.Label({text:"Lastname"}),new sap.ui.commons.TextField({value:""}),new sap.ui.commons.Label({text:"Age"}),new sap.ui.commons.TextField({value:""}),new sap.ui.commons.Label({text:"Address"}),new sap.ui.commons.TextField({value:""}),
]});oCreateDialog.addContent(oSimpleForm);oCreateDialog.addButton(
new sap.ui.commons.Button({text: "Submit", press: function() {
262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
var content = oSimpleForm.getContent();var oEntry = {};oEntry.Email = content[2].getValue();oEntry.Firstname = content[4].getValue();oEntry.Lastname = content[6].getValue();oEntry.Age = content[8].getValue();oEntry.Address = content[10].getValue();sap.ui.getCore().getModel().create('/UserSet', oEntry, null, function(){
oCreateDialog.close();sap.ui.getCore().getModel().refresh();
},function(){oCreateDialog.close();alert("Create failed");
});
}})
);oCreateDialog.open();
}; /***** PUT Operation *****/function openUpdateDialog(user){
var oUpdateDialog = new sap.ui.commons.Dialog();oUpdateDialog.setTitle("Update user's data");var oSimpleForm = new sap.ui.layout.form.SimpleForm({
maxContainerCols: 2,content:[
new sap.ui.core.Title({text:"Person"}),new sap.ui.commons.Label({text:"Email"}),new sap.ui.commons.TextField({value: user[0].getValue(), editable: false}),new sap.ui.commons.Label({text:"Firstname"}),new sap.ui.commons.TextField({value: user[1].getValue()}),new sap.ui.commons.Label({text:"Lastname"}),new sap.ui.commons.TextField({value: user[2].getValue()}),new sap.ui.commons.Label({text:"Age"}),new sap.ui.commons.TextField({value: user[3].getValue()}),new sap.ui.commons.Label({text:"Address"}),new sap.ui.commons.TextField({value: user[4].getValue()}),
]});oUpdateDialog.addContent(oSimpleForm);oUpdateDialog.addButton(
new sap.ui.commons.Button({text: "Submit", press: function() {
var content = oSimpleForm.getContent();var oEntry = {};oEntry.Email = content[2].getValue();oEntry.Firstname = content[4].getValue();oEntry.Lastname = content[6].getValue();oEntry.Age = content[8].getValue();oEntry.Address = content[10].getValue();sap.ui.getCore().getModel().update("/UserSet('" + oEntry.Email + "')",
oEntry, null, function(){sap.ui.getCore().getModel().refresh();oUpdateDialog.close();
},function(){oUpdateDialog.close();alert("Update failed");
});
}})
);oUpdateDialog.open();
}; /***** DELETE Operation *****/
9596979899100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
function openDeleteDialog(email) {var oDeleteDialog = new sap.ui.commons.Dialog();oDeleteDialog.setTitle("Delete user");var oText = new sap.ui.commons.TextView({text: "Are you sure to delete this user?"});oDeleteDialog.addContent(oText);oDeleteDialog.addButton(
new sap.ui.commons.Button({text: "Confirm", press:function(){
sap.ui.getCore().getModel().remove("/UserSet('" + email + "')", null, function() {
sap.ui.getCore().getModel().refresh();oDeleteDialog.close();
},function(){oDeleteDialog.close();alert("Delete failed");
});}
}));oDeleteDialog.open();
}
And this is it! We have running OpenUI5 application that consumes and write data from / to an OData
service. Full source codes could be found in my github repository .
Demo application
As a bonus, I have prepared this application for you to try the user experience a little bit. It does not
consume the data from SAP Gateway, but from the mockserver which can simulate an OData service
with predefined data stored in JSON files. More on that topic you can find in my other articlein SCN.
If you miss something in this article, just let me know.