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 see the 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.
|
1 2 |
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.
|
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
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, })); 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, })); |
|
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.
|
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 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 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
/***** 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 = {}; 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"); 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 article in SCN.
If you miss something in this article, just let me know.
