Embed Size (px)
DESCRIPTION
UI5
Citation preview
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 METHOD userset_create_entity.
2
3
4
5
6
7
8
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
1 var oModel = new sap.ui.model.odata.ODataModel("link_to_your_odata_service", false);
2 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
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", editable: false,
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
})); 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
1 2 3
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
/***** 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() { var content = oSimpleForm.getContent(); var oEntry = {};
28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
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 *****/ function openDeleteDialog(email) { var oDeleteDialog = new sap.ui.commons.Dialog(); oDeleteDialog.setTitle("Delete user");
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
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.
