Building a CRUD Application with SAPUI5 and ICF RE...

christian_jianelli · ‎12-07-2012

This is the part 3 of 3 of this blog series. In this part we will see the creation of the user interface using SAPUI5.

Click here if you did not read the Part 2.

Part 1

Prerequisites

Overview

SAPLink Nuggets and Eclipse Project download

References

SAPUI5

SAPLink

SAPLink plugins (SCN Code Exchange)

CL_TREX_JSON_SERIALIZER bug fixes

Extending SAPUI5 JSON Model

Creating the ICF REST Service

Creating the custom handler class

Creating the ICF node

Retrieving the request method and the parameters passed in the URL

Part 2

Implementing the REST Service

Model and DDIC objects

Implementing the Create method (POST HTTP verb)

Implementing the Read method (HTTP GET verb)

Implementing the Update method (PUT HTTP verb)

Implementing the Delete method (DELETE HTTP verb)

Part 3

Creating the User Interface

Creating the project

Setting up the SAPUI5 bootstrap and required libraries

Creating the view components

Creating the BSPs to deploy the application and the SAPUI5 framework.

Implementing the Controller’s methods

Create

Read

Update

Delete

Find

Creating the project

There is already a very good document published on SCN by Silke Arians that explains how to create a SAPUI5 MVC project from scratch by using the SAPUI5 Application Development Tool.

How to build a SAP HTML5 application using MVC with the SAPUI5 Application Development Tool

http://scn.sap.com/docs/DOC-29890

Here we will skip the basic steps of creating a project and jump direct to the creation of the view components.

Our project will be called “scnblog2” and the view will be called “main”. The view will be created using Javascript (Development Paradigm).

Setting up the SAPUI5 bootstrap and required libraries

Inform the correct path of the “sap.ui.core.js” file in your server and add the required libraries “sap.ui.core” and “sap.ui.table” (see figure below).

Creating the view components

The application will be composed by only one view and this view will be composed by a Table control with five buttons in its toolbar. Its final look is illustrated in the figure below.

The table control will be created inside the “createContent” method of the main view.

Below is the code to create the table control and its toolbar.

// Creating the table control

var oTable = new sap.ui.table.Table("tblctrl", {

title: "CRUD Application Example",

visibleRowCount: 10,

firstVisibleRow: 0,

selectionMode: sap.ui.table.SelectionMode.Single,

toolbar: new sap.ui.commons.Toolbar({

items: [

new sap.ui.commons.Button({

text: "Create",

press: function() {

oController.Create();

}

}),

new sap.ui.commons.Button({

text: "Read (All)",

press: function() {

oController.Read();

}

}),

new sap.ui.commons.Button({

text: "Update",

press: function() {

oController.Update();

}

}),

new sap.ui.commons.Button({

text: "Delete",

press: function() {

oController.Delete();

}

}),

new sap.ui.commons.Button({

text: "Find",

press: function() {

oController.Find();

}

})]

})

});

// Adding the table columns

// Column E-mail

oTable.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Email"}),

sortProperty: "email",

filterProperty: "email",

width: "50%"

}));

// Column Last Name

oTable.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "Last Name"}),

sortProperty: "lastname",

filterProperty: "lastname",

width: "25%"

}));

// Column First Name

oTable.addColumn(new sap.ui.table.Column({

label: new sap.ui.commons.Label({text: "First Name"}),

sortProperty: "firstname",

filterProperty: "firstname",

width: "25%"

}));

// Creating the JSON Model - be aware that myJSONModel is an extended (custom)

// version of the sap.ui.model.json.JSONModel

var oModel = new myJSONModel;

// Defining our model as global

sap.ui.getCore().setModel(oModel);

// Data Binding - here we are binding the table control

// to the "data" attribute of the JSON Model

oTable.bindRows("/data");

// Returning the control(s) to place in the view

return [oTable];

Each button have the "press" event handler implemented by an anonymous function that calls the respective method of the controller ( oController.Create(), for example). At this point the controller’s methods are not implemented yet.

We are using an extended (custom) version of the sap.ui.model.json.JSONModel (check the References). The myJSONModel.js file is avaliable at https://gist.github.com/4218856. To use it in our project We need to create a new folder named "js" and create the myJSONModel.js file inside this folder. We need also to include a new <script> tag in the index.html file. See figures below.

Executing the application at this point we should see a screen like the one illustrated in the figure below.

Creating the BSPs to deploy the application and the SAPUI5 framework.

Before implement the controller's methods we need to upload our application and the SAPUI5 framework into the ABAP Application Server. We must do it because we want to avoid headaches caused by CORS (Cross Origin Resource Sharing) .

Go to SE80 transaction, select BSP Application,inform the name of the BSP Application we want to create (ZSCNBLOG2) and hit the Yes button.

Right click the BSP Application name and select the menu option Create -> Page.

Provide a short description. Save and activate it.

Delete the auto-generated code. Copy the index.html code from Eclipse and paste in the BSP page. Save and activate it.

To import the .js files we will use the report BSP_UPDATE_MIMEREPOS. Provide the path of the BSP Application. Select the WebContent folder and hit the Ok button.

Refresh the BSP Application structure. Select the META-INF and WEB-INF folders and the index.html, right click it and select the menu option “Delete”.

Refresh the BSP Application structure again. The final structure should be like the one illustrated in the figure below.

Now we need to do the same with the SAPUI5 framework. Its very similar to the steps described above.

We need to:

Create a BSP Application named ZSAPUI5

Create an index.html page

Delete the code auto-generated. Copy and paste the index.html code from the SAPUI5 into the index.html of the BSP.

Use the report BSP_UPDATE_MIMEREPOS to import the SAPUI5 files.

The final structure should be like the one illustrated in the figure below.

The final step before executing the first test of the ZSCNBLOG2 BSP Application is to adjust the path of the SAPUI5.

Now we can test our application. Open the Developer tools to check if all files were downloaded correctly.

Now we are ready to start the implementation of the controller’s methods.

Implementing the Controller’s methods

Open the main.controller.js file in the Eclipse and implement the code below.

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

*/

// onExit: function() {

//

// }

Create: function() {

},

Read : function() {

},

Update : function() {

},

Delete : function() {

},

Find : function() {

}

});

Create

Below is the code that we need to implement to handle the create method.

// Create a dialog to get the information of the contact to be created

var oDialog = new sap.ui.commons.Dialog("Dialog", {

modal: true,

closed: function(oControlEvent){

sap.ui.getCore().getElementById('Dialog').destroy();

}

});

oDialog.setTitle("New Contact");

// Create a layout to place the controls in the dialog

var oLayout = new sap.ui.commons.layout.MatrixLayout({

columns: 2,

width: "100%"

});

// Create text field for the e-mail

var oTF = new sap.ui.commons.TextField("tfEmail", {

tooltip: 'E-mail',

editable: true,

width: '200px'

});

// Label for the e-mail field

var oLabel = new sap.ui.commons.Label("lbEmail", {

text: 'E-mail',

labelFor: oTF

});

// Create the first row

oLayout.createRow(oLabel, oTF);

// Repeat the same for the fields Last Name and First Name

// Create text field for the last name

oTF = new sap.ui.commons.TextField("tfLastName", {

tooltip: 'Last Name',

editable: true,

width: '200px'

});

// Label for the last name field

oLabel = new sap.ui.commons.Label("lbLastName", {

text: 'Last Name',

labelFor: oTF

});

// Create the second row

oLayout.createRow(oLabel, oTF);

// Create text field for the e-mail

oTF = new sap.ui.commons.TextField("tfFirstName", {

tooltip: 'First Name',

editable: true,

width: '200px'

});

// Label for the e-mail field

oLabel = new sap.ui.commons.Label("lbFirstName", {

text: 'First Name',

labelFor: oTF

});

// Create the third row

oLayout.createRow(oLabel, oTF);

// Add the layout to the dialog

oDialog.addContent(oLayout);

// Add a button to post the contact's data to the REST interface

oDialog.addButton(new sap.ui.commons.Button({text: "OK", press:function(){

var oModel2 = new myJSONModel;

// Retrieve the contact information from the text fields

var oParameters = {

"email" : sap.ui.getCore().getElementById('tfEmail').getValue(),

"lastname" : sap.ui.getCore().getElementById('tfLastName').getValue(),

"firstname" : sap.ui.getCore().getElementById('tfFirstName').getValue()

};

// Post data to the REST interface

oModel2.loadDataNew("../../../zscnblog2/contact/", handleSuccess, handleError, oParameters, true, 'POST');

function handleSuccess(oData){

if(oData.success==='true'){

// Retrieve the data from the global model

var oData2 = sap.ui.getCore().getModel().getData();

// If the global model has already any data then the models are merged

// If not, then the global model is populated with the new contact

if(jQuery.isArray(oData2.data)){

oData2.data = jQuery.merge(oData2.data, oData.data);

}else{

oData2.data = jQuery.merge([], oData.data);

}

// Refresh the Global Model Data

sap.ui.getCore().getModel().setData(oData2, false);

}

// Close the Dialog

sap.ui.getCore().getElementById('Dialog').close();

// Display message

sap.ui.commons.MessageBox.alert(oData.msg);

}

function handleError(){

// Display message

sap.ui.commons.MessageBox.alert(arguments[0].statusText);

}

}}));

Dialog.open();

},

Now let’s test. Open the BSP Application ZSCNBLOG2 and delete the main.controller.js file.

Import the file again.

Go to the browser and refresh the page. Hit the “Create” button. Fill in all fields. Hit the “OK” button.

Read

Below is the code that we need to implement to handle the read method.

// Retrieve the Global Model

var oModel = sap.ui.getCore().getModel();

// Send the GET request

oModel.loadDataNew("../../../zscnblog2/contact/", handleSuccess, handleError );

function handleSuccess(oData){

if(oData.success==='false'){

// Display message

sap.ui.commons.MessageBox.alert(oData.msg);

}

function handleError(){

// Display message

sap.ui.commons.MessageBox.alert(arguments[0].statusText);

}

Let’s test it. Repeat the steps of deleting and importing the main.controller.js. Go to the browser and refresh the page. Hit the “Read (All)” button.

Update

Below is the code that we need to implement to handle the Updatemethod.

var oModel = new myJSONModel;

// Get a reference of the table control

var oTable = sap.ui.getCore().getElementById('tblctrl');

// Retrieve the selected index, i.e., the index of the selected row

var i = oTable.getSelectedIndex();

// Base URL of the REST service

var ServiceURL = "../../../zscnblog2/contact/";

if(i>=0){

// Retrieve the selected row

var selectedRow = oTable.getRows()[i];

// Concatenate the Base URL and the contact's e-mail

// Example: "../../../zscnblog2/contact/christianjianelli@gmail.com"

ServiceURL = ServiceURL + selectedRow.getCells()[0].getText();

// The parameters that will be sent to the server as form fields

var oParameters = {

"email" : selectedRow.getCells()[0].getText(),

"lastname" : selectedRow.getCells()[1].getValue(),

"firstname" : selectedRow.getCells()[2].getValue()

};

// Send PUT request

oModel.loadDataNew(ServiceURL, handleSuccess, handleError, oParameters, true, 'PUT');

}else{

// User have not selected any row

sap.ui.commons.MessageBox.alert('No record selected');

}

function handleSuccess(oData){

// Display message

sap.ui.commons.MessageBox.alert(oData.msg);

}

function handleError(){

// Display message

sap.ui.commons.MessageBox.alert(arguments[0].statusText);

}

Let’s test it. Repeat the steps of deleting and importing the main.controller.js. Go to the browser and refresh the page. Hit the “Read (All)” button, change the last and first names, select the row and hit the “Update” button.

Delete

Below is the code that we need to implement to handle the Delete method.

var oModel = new myJSONModel;

// Get a reference of the table control

var oTable = sap.ui.getCore().getElementById('tblctrl');

// Retrieve the selected row

var selIndex = oTable.getSelectedIndex();

// Base URL of the REST service

var ServiceURL = "../../../zscnblog2/contact/";

var oParameters = {};

if(selIndex >= 0){

// Retrieve the selected row

var selectedRow = oTable.getRows()[selIndex];

// Concatenate the Base URL and the contact's e-mail

// Example: "../../../zscnblog2/contact/christianjianelli@gmail.com"

ServiceURL = ServiceURL + selectedRow.getCells()[0].getText();

// Send DELETE request

oModel.loadDataNew(ServiceURL, handleSuccess, handleError, oParameters, true, 'DELETE');

}else{

// User have not selected any row

sap.ui.commons.MessageBox.alert('No record selected');

}

function handleSuccess(oData){

if(oData.success==='true'){

// Retrieve the selected row

var selectedRow = oTable.getRows()[selIndex];

// Retrieve the Global Model

var oData2 = sap.ui.getCore().getModel().getData();

if(jQuery.isArray(oData2.data)){

// Remove the deleted contact from the Global Model data

oData2.data = jQuery.grep(oData2.data, function(n,i){

return n.email !== selectedRow.getCells()[0].getText();

});

// Update the Global Model data

sap.ui.getCore().getModel().setData(oData2, false);

}

// Display message

sap.ui.commons.MessageBox.alert(oData.msg);

}

function handleError(){

// Display message

sap.ui.commons.MessageBox.alert(arguments[0].statusText);

}

Let’s test it. Repeat the steps of deleting and importing the main.controller.js. Go to the browser and refresh the page. Hit the “Read (All)” button, select the row and hit the “Delete” button.

Find

In fact, this method is the read method, but once our read method returns always all records, it is worthwhile to see how can we search for specific contact.

Below is the code that we need to implement to handle the Find method.

// Create a dialog to get the information of the contact(s) to find

var oDialog = new sap.ui.commons.Dialog("Dialog", {

modal: true,

closed: function(oControlEvent){

sap.ui.getCore().getElementById('Dialog').destroy();

}

});

oDialog.setTitle("Find Contact");

// Create a layout to place the controls in the dialog

var oLayout = new sap.ui.commons.layout.MatrixLayout({

columns: 2,

width: "100%"

});

// Create text field for the e-mail

var oTF = new sap.ui.commons.TextField("tfEmail", {

tooltip: 'E-mail',

editable: true,

width: '200px'

});

// Label for the e-mail field

var oLabel = new sap.ui.commons.Label("lbEmail", {

text: 'E-mail',

labelFor: oTF

});

// Create the first row

oLayout.createRow(oLabel, oTF);

// Repeat the same for the fields Last Name and First Name

// Create text field for the last name

oTF = new sap.ui.commons.TextField("tfLastName", {

tooltip: 'Last Name',

editable: true,

width: '200px'

});

// Label for the last name field

oLabel = new sap.ui.commons.Label("lbLastName", {

text: 'Last Name',

labelFor: oTF

});

// Create the second row

oLayout.createRow(oLabel, oTF);

// Create text field for the e-mail

oTF = new sap.ui.commons.TextField("tfFirstName", {

tooltip: 'First Name',

editable: true,

width: '200px'

});

// Label for the e-mail field

oLabel = new sap.ui.commons.Label("lbFirstName", {

text: 'First Name',

labelFor: oTF

});

// Create the third row

oLayout.createRow(oLabel, oTF);

// Add the layout to the dialog

oFirstDialog.addContent(oLayout);

// Add a button to post the contact's data to the REST interface

oFirstDialog.addButton(new sap.ui.commons.Button({text: "OK", press:function(){

// Get a reference of the Global Model

var oModel = sap.ui.getCore().getModel();

// The parameters that will be sent to the server

// as query string in the URL

var oParameters = {

"lastname" : sap.ui.getCore().getElementById('tfLastName').getValue(),

"firstname" : sap.ui.getCore().getElementById('tfFirstName').getValue()

};

// Base URL of the REST service

var ServiceURL = "../../../zscnblog2/contact/";

// Concatenate the Base URL and the contact's e-mail

// Example: "../../../zscnblog2/contact/christianjianelli@gmail.com"

ServiceURL = ServiceURL + sap.ui.getCore().getElementById('tfEmail').getValue();

// Send the request

oModel.loadDataNew(ServiceURL, handleSuccess, handleError, oParameters);

function handleSuccess(oData){

if(oData.success==='false'){

// Display message

sap.ui.commons.MessageBox.alert(oData.msg);

}else{

// Close the dialog

sap.ui.getCore().getElementById('Dialog').close();

}

function handleError(){

// Display message

sap.ui.commons.MessageBox.alert(arguments[0].statusText);

}

}}));

oFirstDialog.open();

Let’s test it. Repeat the steps of deleting and importing the main.controller.js. Go to the browser and refresh the page. Create two new contacts. Refresh the page again. Hit the “Find” button, choose one of the 3 fields to find the contact and hit the “OK” button.

Well, that's it.

Your feedback is most welcome!

Christian Jianelli