Building A CRUD Application With SAPUI5 Framework in BSP Project

3/27/2019 Building a CRUD Application with SAPUI5 and ICF REST/JSON Service – Part 3 | SAP Blogs
Products
Products Industries
Industries Services Support
Services and Support Training
Training Community
Community Developer
Developer
Partner
Partner About
About
 
Ask a Question Write a Blog Post Login
Christian Jianelli
December 7, 2012 More than 30 minute read
Building a CRUD Application with SAPUI5 and ICF REST/JSON

Service – Part 3
Follow RSS feed Like
2 Likes 10,649 Views 65 Comments
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.
Table of Contents
Part 1
Prerequisites
Overview
https://blogs.sap.com/2012/12/07/building-a-crud-application-with-sapui5-and-icf-restjson-service-part-3/ 1/70
SAPLink Nuggets and Eclipse Project download
References
SAPUI5
SAPLink
SAPLink plugins (SCN Code Exchange)
CL_TREX_JSON_SERIALIZER bug xes
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();
}),
text: “Read (All)”,
press: function() {
oController.Read();
}),
text: “Update”,
press: function() {
oController.Update();
}),
text: “Delete”,
press: function() {
oController.Delete();
}),
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”}),
template: new sap.ui.commons.Label().bindProperty(“text”, “email”),
sortProperty: “email”,
filterProperty: “email”,
width: “50%”
}));
// Column Last Name
label: new sap.ui.commons.Label({text: “Last Name”}),
template: new sap.ui.commons.TextField().bindProperty(“value”, “lastname”),
sortProperty: “lastname”,
filterProperty: “lastname”,
width: “25%”
}));
// Column First Name
label: new sap.ui.commons.Label({text: “First Name”}),
template: new sap.ui.commons.TextField().bindProperty(“value”, “firstname”),
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:
1. Create a BSP Application named ZSAPUI5
2. Create an index.html page
3. Delete the code auto-generated. Copy and paste the index.html code from the SAPUI5 into the index.html
of the BSP.
4. Use the report BSP_UPDATE_MIMEREPOS to import the SAPUI5 les.
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
oTF = new sap.ui.commons.TextField(“tfFirstName”, {
tooltip: ‘First Name’,
editable: true,
width: ‘200px’
});
oLabel = new sap.ui.commons.Label(“lbFirstName”, {
text: ‘First Name’,
labelFor: oTF
});
// Create the third row
// 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 );
if(oData.success===’false’){
// Display message
// Display message
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.
// 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’);
// Display message
// Display message
(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.
// Get a reference of the table control
var oTable = sap.ui.getCore().getElementById(‘tblctrl’);
var selIndex = oTable.getSelectedIndex();

var oParameters = {};
if(selIndex >= 0){
var selectedRow = oTable.getRows()[selIndex];
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’);
if(oData.success===’true’){
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
// Display message
(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%”
});
var oTF = new sap.ui.commons.TextField(“tfEmail”, {
tooltip: ‘E-mail’,
editable: true,
width: ‘200px’
});
var oLabel = new sap.ui.commons.Label(“lbEmail”, {
text: ‘E-mail’,
labelFor: oTF
});
// Create the first row
// 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
oTF = new sap.ui.commons.TextField(“tfFirstName”, {
tooltip: ‘First Name’,
editable: true,
width: ‘200px’
});
oLabel = new sap.ui.commons.Label(“lbFirstName”, {
text: ‘First Name’,
labelFor: oTF
});
// Create the third row
// 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()
};
ServiceURL = ServiceURL + sap.ui.getCore().getElementById(‘tfEmail’).getValue();
// Send the request
oModel.loadDataNew(ServiceURL, handleSuccess, handleError, oParameters);
if(oData.success===’false’){
// Display message
}else{
// Close the dialog
sap.ui.getCore().getElementById(‘Dialog’).close();
// Display message
}}));
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
Alert Moderator
Assigned tags
SAPUI5 | SAP Enterprise Portal | json | rest services | sapui5 |
View more...
Related Blog Posts
A Complete beginner’s guide for SAPUI5

By Dhananjay Choubey , Jun 09, 2015
Building a CRUD Application with SAPUI5 and ICF REST/JSON Service – Part 2
By Christian Jianelli , Dec 07, 2012
Building a CRUD Application with SAPUI5 and ICF REST/JSON Service – Part 1
By Christian Jianelli , Dec 07, 2012
Related Questions
Develop Stock Overview(MMBE) application in UI5 using eclipse

By Former Member , Jul 23, 2017
ES4 ProductSet OrderBy
By Former Member , Jan 17, 2017
How to get copy command after clicking on a link in sapui5?
By preety kumari , Apr 12, 2018
65 Comments
You must be Logged on to comment or reply to a post.
Silke Arians
December 7, 2012 at 3:05 pm

Short remark:
If you have the SAP NetWeaver AS ABAP 7.31 with the UI Add-On, we provide a UI5 Repository based on the
BSP Repository and an Eclipse-based SAPUI5 ABAP Team Provider tool to deploy it on the ABAP server.
For more information see
Introducing the new UI Add-On for SAP NetWeaver

Documentation in the Demo Kit
End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming
Gateway OData Services
Best regards
Silke
Like (0)
Christian Jianelli | Post author

Hi Silke,
In fact, what I wanted to show here is that is possible to try SAPUI5 even without these tools. Of course, these
tools will make our life easier.
Thanks for your feedback.

Best regards
Christian
Like (0)
Former Member
December 4, 2013 at 10:38 am

Hi silke,
how some can deploy a third-party script with the abap team provider? for me it does not work?!
BR,
Alex
Like (0)
Mingzuo Shen

Thanks very much for the 3-part series!
Question:
How to show all the rows when the page is rst loaded?
I see “No data”.
Only when I click on the ‘Read (All)’ button, then all the expected rows are shown.
Like (0)

Hi Mingzuo,
You can use the onInit method of the Controller to call the Read method.
onInit: function() {
this.Read();
},
Thanks for your feedback
Regards,
Christian
Like (0)
Mingzuo Shen

Thanks so much Christian!
That worked! Rocking…
Like (0)
Like (0)

Hi Shahid,
Thanks for your comments.
About charts, please check the sap.viz.ui5 documentation at

https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/sap.viz.ui5.html
Be aware that it is an experimental API yet.
Regards,
Christian
Like (0)

Hi Shahid,
You can try DOM insertion using JQuery selector and manipulation.
Please try the code below using the chrome developer tools in the Shell Example.
$(‘#myButton’).after(‘<input type=”text” x-webkit-speech=”x-webkit-speech” />’);
Shell Example link
https://sapui5.netweaver.ondemand.com/sdk/content/Controls/UX3Controls/ShellExample.html
Ps: navigate to Examples -> Button to test the code.
Regards,
Christian
Like (0)
Former Member
January 24, 2013 at 11:39 am

I can’t see the captured images. Just in my case?
Regards,
JHYang.
Like (0)
January 24, 2013 at 11:56 am
It seems that the images were deleted for some reason. I will upload again soon.
Thanks,
Christian
Like (0)
Silke Arians
February 7, 2013 at 8:50 am

Hello Abdul Raheem,
As an alternative for SAP Business Suite system of version 7.00 and higher – especially until 7.31 – you may
use the interactive ABAP report /UI5/UI5_REPOSITORY_LOAD
o ering similiar functionality. Compared to the Team Repository
Provider it does not o er a built-in code merge. Here an separate
source code repository like git, Suberversion (SVN) etc. may be used.
The report is shipped via SAP note 1793771 “Up/Download SAPUI5
Application into/from UI5 Repository” and within SP03 of the NetWeaver
UI Add-On. Find the corresponding documentation in the note and attached
to the report.
Kind regards
Silke
Like (0)
Former Member

Hi,
Thank you very much for the quick reply Since I found the answer earlier I deleted the question.
Like (0)
Former Member
February 10, 2013 at 2:15 pm

Hi Christian,
Thanks for such a wondeful blog, helped a lot.
With your tutorial, i reached till end, now when i m working on my project I am getting the following error which
I am not able to resolve:
Uncaught TypeError: Object #<Object> has no method ‘toUpperCase’
This is coming, when I am CREATING data in SAP backend using POST action. Code for the same is:
// Retrieve the information from the text elds
var oParameters = {
“name” : sap.ui.getCore().getElementById(‘name’).getValue(),
“pdesc” : sap.ui.getCore().getElementById(‘pdesc’).getValue(),
};
// Post data to the REST interface
oModel2.loadData(“http://****:8000/sap/bc/zdservice?sap-client=***“,
handleSuccess, handleError, oParameters,true,’POST’);
Will be glad if you could help..
Like (0)

Hi Dav,
Thanks for your feedback
I believe the error you are getting is because you are not using the correct JSONModel. In my blog I used an
extended (custom) version of the JSONModel.
Regards,
Christian
Like (0)
Former Member
March 27, 2013 at 2:43 pm

Hello Christian,
Thanks for the blog. I am able to replicate the example but I get an error at the end when trying to get data. I
am trying the scenario for nd a customer by email. and I get the below errors in IE8.
The following problem occurred: parsererror – {success: “true”, msg: “”, data: [{email:……………..}], 200,ok
Below is another error on load of page and I am seeing this in Chrome. I am wondering if the sap.ui.core.js is
not initialized properly.
Failed to load resource: the server responded with a status of 404 ((BSP) Error)
x.extend.ajax sap-ui-core.js:25
a sap-ui-core.js:69
d sap-ui-core.js:69
properties sap-ui-core.js:69
l sap-ui-core.js:69
B sap-ui-core.js:69
a sap-ui-core.js:69
sap.ui.core.Core.getLibraryResourceBundle sap-ui-core.js:69
(anonymous function) sap-ui-core.js:69
sap.ui.table.Table.init Table.js:7
sap.ui.base.EventProvider.extend.constructor sap-ui-core.js:69
sap.ui.core.Element.extend.constructor sap-ui-core.js:69
f sap-ui-core.js:69
b sap-ui-core.js:69
sap.ui.jsview.createContent myview.view.js:9
(anonymous function) JSView.js:6
sap.ui.core.Element.runWithPreprocessors sap-ui-core.js:69
sap.ui.core.mvc.JSView.onControllerConnected JSView.js:6
sap.ui.core.mvc.View._initCompositeSupport View.js:6
sap.ui.base.EventProvider.extend.constructor sap-ui-core.js:69
sap.ui.core.Element.extend.constructor sap-ui-core.js:69
f sap-ui-core.js:69
f sap-ui-core.js:69
b sap-ui-core.js:69
sap.ui.view View.js:6
b.(anonymous function) sap-ui-core.js:69
(anonymous function)
The source on the index.html le is declared as
src=“……………./ZSAPUI5/resources/sap-ui-core.js”
I was wondering if the BSP error is causing the parsing error in JSON.
I am able to display the layout of the table which tells that the UI 5 librabry is loading but then I get the error
when I am searching.
Thanks!
Like (0)
March 27, 2013 at 9:59 pm

Hi Arvind, thanks for your feedback!
I believe that you left behind the last prerequisite
Copy of the class CL_TREX_JSON_SERIALIZER with the necessary bug fixes
Your JSON is invalid. It should be
{“success”: “true”, “msg”: “”, data: [{“email”:……………..}]
with double quotes around the names
Hope it helps.
Best regards,
Christian
Like (0)
Former Member
March 28, 2013 at 4:14 pm

Thanks ! that resolved the issue. This is wonderful !
Like (0)
Frank Henrdz
April 26, 2017 at 11:46 pm

Hi Christian , i’m just currently developing your Demo , but when i click in your link ‘with the necessary bug
xes’ the page is not active , where can i see the changes to do to the Z json class copy ? Regards Frank
Like (0)
Former Member
May 3, 2013 at 12:58 pm

HI Christian,
Thanks for such nice Blog…
And valuble help.. …my demo is working ne.1+
Regards,
Praphull
Like (0)
May 6, 2013 at 1:46 pm

Hi Praphull,
It’s great to see that the blog is helpfull. Thanks for your feedback!
Best regards,
Christian
Like (0)
Former Member
July 2, 2013 at 12:48 pm

Hi Christian
Have you experimented this way of interfacing with SAP on Mobile Devices
I developed an application focused for Mobile devices and in my “HANDLE_REQUEST” method I handle a few
di erent “verbs” I have “GET” “NEW” and “SEND”. I then tested on di erent devices.
Apple: These devices works the best with UI5
Android: The application works 100% but loads funny sometimes
My problem however is currently as follows

For Blackberry devices it seem the “VERB” is always “GET” when it reaches SAP. Have you or anyone else
experienced the same issue? Is there something di erent i need to do in the JSON model?
Thanks for your help
Christiaan
Like (0)
July 4, 2013 at 3:10 am

Hi Christiaan,
Why are you using these verbs? To be honest I never saw the use of “NEW” and “SEND” verbs. Actually I don’t
even know if they really exist. I would like to ask you to check the information in the following link:
http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods
Regards,
Christian
Like (0)
Former Member
July 15, 2013 at 12:49 pm

Thanks Christian
Although you can use any descriptive name for your HTTP request method, it is not always supported supported. I quote from
you link “Any client can use any method and the server can be configured to support any combination of methods.“
In my case BlackBerry does not support it.
Below is a helpful link if you want to test your browsers capability:
http://www.mnot.net/javascript/xmlhttprequest/
Like (0)
Prabaharan Asokan
August 13, 2013 at 12:07 pm
Christian,
It takes plenty of time to upload the UI5 les to MIME repository.
Prabaharan
Like (0)
August 13, 2013 at 12:14 pm

Hi Prabaharan,
Yes, there are too many les to upload, especially if you are uploading the demokit.
Regards,
Christian
Like (0)
Meet Mukeshkumar Vajaria
September 16, 2013 at 7:43 am

Hi Christian Jianelli,
I am having a problem in the last step. I implemented Create: function() in main.controller.js. When I click the
button, there is no response. It does not open dialog box. The same happens for nd button.
When I click read, update or delete, it shows “no raw selected” which is acceptable as there is no record on the
display.
From BSP Application, there is no response of any button. I created a sample button on index.html. Even that
button is not being displayed.
Even In Postman-chrome, I am not able to see data when I call any method. But When I call “Post”, data is
being uploaded in table. So method are supposed to be working. But display is not proper.
Can you please tell me where did i make mistake?
Waiting for your reply.
Thank you.
Meet Vajaria
Like (0)
September 16, 2013 at 1:00 pm

Hi Meet,
Have you tried to debug the application?
In order to help you I really need detailed information about the error.
I suggest you to put an external breakpoint in the handle_request method to identify why the service is not
returning any data.
Best regards,
Christian
Like (0)
Meet Mukeshkumar Vajaria
September 16, 2013 at 1:10 pm

Ok Christian, I will put breakpoint in handle_request and try to gure out what is wrong.
Thank you
Meet Vajaria
Like (0)
Holger Stumm
October 15, 2013 at 8:36 am

Hi Christian
this is such a great blog. I have a lot of customers that are far away from 7.3, but still want to use this
technology.
Super Great!!
cheers
Holger
Like (0)
October 15, 2013 at 12:19 pm

Hi Holger,
Thanks for your feedback. I’m glad you liked it
Regards,
Christian
Like (0)
Former Member
November 21, 2013 at 12:18 pm

Hi!
Where can I nd SAPUI5 les to create ZSAPUI5 application?
Regards,
Mateusz
Like (0)
November 21, 2013 at 4:19 pm

Hi Mateusz,
You can download it from
http://scn.sap.com/community/developer-center/front-end
The les that you need are in the le sapui5-static.zip
Regards,
Christian
Like (0)
Former Member
October 19, 2016 at 4:38 pm

also can download it from http://www.sapui5.org/sapui5blogs/tools-sdk/
Like (0)
Frank Henrdz
April 26, 2017 at 11:40 pm

Hi Julio, in wich part of http://www.sapui5.org/sapui5blogs/tools-sdk/ are located the ui5 les to download
? Regards Frank
Like (0)
Frank Henrdz
April 26, 2017 at 11:38 pm

Hi Christian, in wich part of the page https://www.sap.com/community/topic/ui5.html
is the le sapui5-static.zip ?
Regards
Frank
Like (0)
Former Member

hi!
greate tutorial!
but i have on issue:
i develope with eclipse and the abap team provider toolkit, to submit my project on the server. i do exactly
what you wrote ( add a new folder “js” insert the script, which i have downloaded). but after upload, the le
/folder has not be uploaded. is there something else to do?
regards,
Alex
Like (0)
March 24, 2014 at 9:27 am

Hi Alexander,
Thanks for your feedback. Sorry for the late reply but i didn’t see your question before. I use eclipse for sapui5
developments but i’m not using the abap team provider tool. Do you still have the problem or you already
managed to solve it?
Regards,
Christian
Like (0)
Martin English
March 24, 2014 at 12:17 am

Christian,
Excellent work. I have used these blogs as the foundation (perhaps even most of) a DemoJam for this year’s
Melbourne SIT. Now, deploying SAPUI5 on an ABAP server implies (at the very least)
a) The system has the appropriate levels of other support packs (see note),
b) A Maintenance Certi cate so you can load the UI5 Add-on via he SAINT transaction,
c) and access to the STACK XML from Solution Manager
I was able to create the web portion (the presentation layer, for want of a better word) using Eclipse, and
deploy it using Apache, all on my laptop, but my challenge is that I am ‘resting between engagements’, and
don’t have (legal / licensed) access to a full ABAP system.
Solving this has the bene t being that someone new to ABAP would also be able to experiment with UI5 with
the tools available to a stand-alone developer; I’m talking here about the sort of person who would not only not
have access to SAP licenses, but wouldn’t even have an S number to access the SAP Market Place, let alone
have the network or knowledge to access the UI5 Add-on, let alone install it.
The short version is that I downloaded OPEN UI, unzipped it to the le system of my NW702 SP06 Developers
edition and made the resulting le system available via HTPP by use of the icm/HTTP/ le_access_1 pro le
parameter. I imported my Eclipse project les into my ABAP server via cut-and-paste for the index.html, and
BSP_UPDATE_MIMEREPOS for the JS components and it works perfectly.
In other words, you can deploy UI5 applications on ;
1. production landscapes where you can’t get access to SAINT (and Solution manager) to import the ABAP
runtime components
2. production landscapes that don’t meet the requirements of the SAP UI5 Add-on
3. and SAP Developer Editions, where you don’t get a maintenance certi cate.
There is also the implication that you can use the same technique for legacy systems (4.6 / 4.7); However, I
need access to such a system to test that.
hth
Like (0)
March 24, 2014 at 9:22 am

Hi Martin,
I’m really glad to see that this blog is being useful for you as much as it was for myself.
I didn’t know about the icm/HTTP/ le_access_1 pro le parameter. How does it works when you have multiple Web
Application Servers?
Regards,
Christian
Like (0)
Martin English
March 25, 2014 at 2:40 am
two points;
First, I have only just realised I don’t need the icm/HTTP/ le_access_1 pro le parameter, because I don’t need
to access the OpenUI5 library on my server. I can ensure I’m using the latest library using
src=’https://openui5.hana.ondemand.com/resources/sap-ui-core.js‘
secondly, icm/HTTP/ le_access_1pro le parameter with multiple Web Application Servers?
Say we install two ABAP systems on the same server (call the server martin). They will need di erent system
IDs (lets say N72 and N74). They will also need di erent system numbers, so lets install N72 as system number
00 and N74 as system number 10.
Using RZ10, looking at the instance pro le (which will be N72_DVEBMGS00_MARTIN and
N74_DVEBMGS10_MARTIN depending on which system you are logged on to), we will see that the
icm/server_port_0 setting is the default PROT=HTTP,PORT=80$$. The $$ is a placeholder for the system
number.
So to access an ICF service on N72, you go http://martin.<domain-name>.

<tld>:8000/sap/bc/bsp/myservice/
and to access an ICF service on N74, you go http://martin.<domain-name>.

<tld>:8010/sap/bc/bsp/myotherservice
Similar logic applies to the icm/HTTP/ le_access_1 pro le parameter;
if you have
icm/HTTP/ le_access_1 =
PREFIX=/N72ui5/,DOCROOT=E:\usr\sap\openui5,BROWSEDIR=2,CACHECTRL=0
in the N72 instance pro le and
icm/HTTP/ le_access_1 =
PREFIX=/N74ui5/,DOCROOT=E:\usr\sap\openui5,BROWSEDIR=2,CACHECTRL=0
in the N74 instance pro le,
the following URLS will access the same le system on the server
http://martin.<domain-name>.<tld>:8000/N72ui5/ and
http://martin.<domain-name>.<tld>:8010/N74ui5/
HTH
Like (0)
March 25, 2014 at 8:07 am

Thanks a lot!!
Like (0)
Martin English
April 2, 2014 at 6:56 am

See A Simple UI5 application running against ABAP without the SAP UI5 Add for an explanation of how I
expanded slightly on Christian’s work here to develop an ABAP application using UI5 without installing the UI5
Addon and (ultimately) without installing anything on my server (except via the SAP GUI, which is as it should
be )
Like (0)
April 2, 2014 at 8:47 am

Hi Martin,
Excelent blog. Thanks a lot!
Regards,
Christian
Like (0)
Former Member
March 31, 2014 at 3:46 am

Thanks for the blog Christian
Can i suggest for the “Read” method, that the cache be set to false?
oModel.loadDataNew(“../../../zscnblog2/contact/”, handleSuccess,handleError,{}, true,‘GET’,{},false);
I was having issues getting the latest records after an update/delete/creation operation as the browser still caches
the old records.
Like (0)
April 1, 2014 at 7:31 am

Hi Samuel,
Yes, sure, suggestions are always welcome. I had the same issues .
But instead of passing all these parameters I decided to change the loadDataNew method by setting the default
value of the parameter bCache to false.
if (bCache === unde ned) {
bCache = false;
Thanks for your feedback!
Regards,
Christian
Like (0)
Former Member
July 6, 2014 at 4:05 am

Hi Christian.
Thanks for good contribution!.
I tested your sample. But I can’t consume the REST service directly:
Old.
oModel.loadDataNew(“../../../zscnblog2/contact/”, handleSuccess, handleError );
New.
oModel.loadDataNew(“http://miserver:port/sap/bc/zscnblog2?sap-client=800“, handleSuccess, handleError );
How I can do it? Please Help me.
Regards,
Roger
Like (0)
July 7, 2014 at 1:05 pm

Hi Roger, thanks for your feedback!
Sorry, but I didn’t get what is wrong. Please provide more information about the error. You can get it using the
developer tools of your browser. It can be a CORS (Cross-Origin Resource Sharing) issue.
Regards,
Christian
Like (0)
Former Member
July 7, 2014 at 4:41 pm

Hi Christian.
I want to use directly the SAP url REST service in my HTML5 application. It means :
URL = “http://miserver:port/sap/bc/zscnblog2?sap-client=800“ (SAP url REST service”);
oModel.loadDataNew(URL, handleSuccess, handleError );
I hope your help.
Regards.
Roger
Like (0)
July 7, 2014 at 5:34 pm

Hi Roger,
Ok, but what I need to know is why you can’t do that. The only di erence is that you are using an absolute URL
while I used a relative URL. The only thing that can prevent you from calling your REST service using the
absolute URL is CORS (if your web application is hosted in server that is not the same of the service).
Like (0)
Paulo Cesar de Biasi Vantini
July 25, 2014 at 7:11 pm

Hi Christian,
thanks a lot for all the hard work you´ve done to create these series in a didatic form.
It really takes a lot of time to upload the ui5 les to the mime repository but it is worth the e ort.
Best regards!
Like (0)
July 28, 2014 at 1:25 pm

Hi Paulo,
Yes, it takes a lot of time but if you have access to the operating system and permission to change the system
pro le, you can do what Martin English did in his blog to make UI5 available on the server.A Simple UI5
application running against ABAP without the SAP UI5 Add-on
Best regards,
Christian
Like (0)
Paulo Cesar de Biasi Vantini
July 29, 2014 at 2:26 am

Christian,
thanks again for referring to Martin´s tutorial. I do not know much about basis so I have never heard about
using pro le parameter icm/HTTP/ le_access_1. But it is very practical and useful to reuse the ui5 library
through the WAS.
Best Regards.
Like (0)
Former Member

Hi Christian,
Super blog…I am getting time out error in ICF call. We have change the Keep Alive to 240 and Proc.Timeout to 900 but still we are
getting time out error. Please suggest.
Regards,
Sid
Like (0)

Hi Siddesh, thanks for your feedback!
Have you tried to access another service or bsp application of your system? Have you tried to put an external
breakpoint to make sure that the timeout is not being caused by your code?
Regards,
Christian
Like (0)
Former Member

Hi Christian,
Front end is dot Net. There is no error log with time out in st22 so please con rm whether time out error will be
logged in st22 or not.
Regards,
Sid
Like (0)

Hi Siddesh,
I believe that ICM timeouts are not logged in ST22. I suggest you to put an external breakpoint for the user that
you are using to connect to the service to make sure that the HTTP calls are reaching it.
Regards,
Christian
Like (0)
Former Member

Hi christian,
I already tried, http call is reaching the service but we are getting timeout error before the service is executed
completely.
Regards,
Sid
Like (0)

Hi Siddesh,
Ok, have you tried to increase the timeout on the client side?
Like (0)
Former Member

Hi christian,
It’s working now. We changed the timeout to – 1(in nite ie till we get response ) in front end. Thanks for your
support.
Regards,
Sid
Like (0)
Former Member
August 5, 2015 at 11:26 am

Hi Christian,
Thanks for such a wondeful blog, helped a lot.
With your tutorial, i reached till end, now when i m working on my project I am getting the following error which I am not able to
resolve:
Uncaught TypeError: oModel.loadDataNew is not a function
Like (0)
Vadim Zaripov
October 23, 2015 at 12:33 pm
Hi Christian,
Great blog! Checking it for the second day.
There seems to be an error in Create function, the Dialog call should be “oDialog.open();” not “Dialog.open();”.
Thanks, Vadim.
Like (0)
Former Member
Hi basically im trying to upload an image using post url in UI5, is

there any way i can achieve it using UI5 APplication. i am executing
below code after clicking button.
OData.request({
requestUri : “ServiceURL”,
method : “GET”,
headers : {
“X-Requested-With” :
“XMLHttpRequest”,
“Content-Type” :
“application/atom+xml”,
“DataServiceVersion” : “2.0”,
“X-CSRF-Token” : “Fetch”
}
},
function(data, response) {
header_xcsrf_token =
response.headers[‘x-csrf-token’];
oHeaders = {
“x-csrf-token” : header_xcsrf_token,
‘Accept’ : ‘application/json’,
};

OData.request({
requestUri : “<post URL>”,
method : “POST”,
headers : oHeaders,
data : oEntry
},
function(data,request) {
// loadAttachment();
},
function(err){

sap.m.MessageToast.show(“Couldn’t Deleted due to following
exception : “+ err);
});
},

function(err) {
var request = err.request;
var response = err.response;
sap.m.MessageToast.show(“Error in Get

— Request “ + request + ” Response “ + response);
});
But i am getting error:TypeError: unde ned is not an object

(evaluating ‘sap.AuthProxy.OData.request’)
Appreicated any help here
Regards,MBR
Like (0)
Former Member
October 18, 2016 at 4:40 pm

Hi Christian,
excellent tutorial, good job.
A question, erroja me this message when I run the program and pressed the Create button in Chrome:
Uncaught Error: “true” is of type string, expected boolean for property “modal” of Element
sap.ui.commons.Dialog#Dialog
but en IE 11 run correctty, Why does this happen?

Like (0)
Matthias Schmalz

Hi,
these instructions are really outdated and not recommended. Since years there’s a better mechanism for this,
e.g. see https://sapui5.hana.ondemand.com/#/topic/a560bd6ed4654fd1b338df065d331872
Could you please mention this on top?
Best regards
Matthias
Like (0)
Share & Follow
Privacy Terms of Use
Legal Disclosure Copyright
Trademark Cookie Preferences
Sitemap Newsletter

Building A CRUD Application With SAPUI5 Framework in BSP Project

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Building A CRUD Application With SAPUI5 Framework in BSP Project

Caricato da

Copyright:

Formati disponibili

3/27/2019 Building a CRUD Application with SAPUI5 and ICF REST/JSON Service – Part 3 | SAP Blogs

Building a CRUD Application with SAPUI5 and ICF REST/JSON

2 Likes 10,649 Views 65 Comments

Click here if you did not read the Part 2.

SAPLink Nuggets and Eclipse Project download

SAPLink plugins (SCN Code Exchange)

CL_TREX_JSON_SERIALIZER bug xes

Extending SAPUI5 JSON Model

Creating the ICF REST Service

Creating the custom handler class

Creating the ICF node

Implementing the REST Service

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)

Creating the User Interface

Creating the project

Setting up the SAPUI5 bootstrap and required libraries

Creating the view components

Implementing the Controller’s methods

Creating the project

Setting up the SAPUI5 bootstrap and required libraries

Creating the view components

// Creating the table control

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

title: “CRUD Application Example”,

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

text: “Read (All)”,

// Adding the table columns

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

template: new sap.ui.commons.Label().bindProperty(“text”, “email”),

// Column Last Name

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

template: new sap.ui.commons.TextField().bindProperty(“value”, “lastname”),

// Column First Name

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

template: new sap.ui.commons.TextField().bindProperty(“value”, “firstname”),

// 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

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

// to the “data” attribute of the JSON Model

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

Provide a short description. Save and activate it.

1. Create a BSP Application named ZSAPUI5

2. Create an index.html page

4. Use the report BSP_UPDATE_MIMEREPOS to import the SAPUI5 les.

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

Implementing the Controller’s methods

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

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

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

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

// Create text field for the e-mail

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

// Label for the e-mail field

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

// Create the first row

// Create text field for the last name

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

tooltip: ‘Last Name’,