Chapter 1: Creating the SAPUI5 application

Please follow the below steps to create the SAPUI5 application that allows the User to enter his
firstname and lastname and click on a Add button that inserts the entered input to the table
shown.

Steps to develop the SAPUI5 application consists of:

a. Creating the SAPUI5 project in Eclipse

b. Develop the User Interface (UI) for the application

c. Create a SAP HANA Cloud Platform local runtime for testing the application

d. Deploy the SAPUI5 application on the server

a. Creating the SAPUI5 project in Eclipse

1. Launch Eclipse by running the eclipse.exe file located in the <eclipse-unzipped-

directory>\eclipse\eclipse.exe. This opens the eclipse workspace dialog

2. Enter C:\Users\<username>\workspace as the workspace for the application and click on the
Ok button. This launches the eclipse welcome screen as shown below
3. Close the Welcome tab.

4. From the Eclipse menu bar, select File -> New -> Other -> SAPUI5 Application Project. This opens
the dialog as shown below. Click on Next button.

5. Enter the Project name as personslist.

Select sap.ui.commons under Library.

Select Create an Initial View under Options

Click on the Next button.

5. Specify the Name of the View as Main as shown below.

Select JavaScript as the Development Paradigm

Click on the Finish button.

This creates the project structure as shown below and opens the following Views in the editor of
eclipse.

b. Develop the User Interface (UI) for the application

1. Double click on the index.html file in the project explorer. This will open up the file in the
editor.

2. Add the following code to the data-sap-ui-libs section. This will result in the following code in
the index.html file as shown in the snapshot.

, sap.ui.table, sap.ui.layout
Press Ctrl + S to save your changes.

3. Open the Main.view.js file from the Project Explorer. This opens the file contents in the
editor. Copy and replace the contents of the file with the below code and save it.

sap.ui.jsview("personslist.Main", {

/** Specifies the Controller belonging to this View.

* In the case that it is not implemented, or that "null" is returned,
this View does not have a Controller.
* @memberOf personslist.Main
*/
getControllerName : function() {
return "personslist.Main";
},

/** Is initially called once after the Controller has been

instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers
can be attached right away.
* @memberOf personslist.Main
*/
createContent : function(oController) {

//create the matrix layout

var oMLayout = new sap.ui.commons.layout.MatrixLayout({
layoutFixed : false
});
 //create the ApplicationHeader control
var oAppHeader = new
sap.ui.commons.ApplicationHeader("appHeader");

//configure the branding area

oAppHeader.setLogoSrc("http://www.sap.com/global/images/SAPLogo.gif");
oAppHeader.setLogoText("SAP SAPUI5 Library");

oMLayout.createRow(oAppHeader);

var oFirstNameLbl = new sap.ui.commons.Label({

text: "First Name:",
width: "80px"

});

var oFirstNameTxt = new sap.ui.commons.TextField("firstnameid");

//horizontal layout for firstname and its label

var oHLayout = new sap.ui.layout.HorizontalLayout({
content: [oFirstNameLbl, oFirstNameTxt]
});

oMLayout.createRow(oHLayout);

var oLastNameLbl = new sap.ui.commons.Label({

text: "Last Name:",
width: "80px"

});

var oLastNameTxt = new sap.ui.commons.TextField("lastnameid");

//horizontal layout for lastname and its label

var oHLayout1 = new sap.ui.layout.HorizontalLayout({
content: [oLastNameLbl, oLastNameTxt]
});

oMLayout.createRow(oHLayout1);

//the insert button for inserting data into the table

var oButton = new sap.ui.commons.Button({
text: "Insert",
press: function(evt){
oController.insertTableData(evt);
}
});

oMLayout.createRow(oButton);

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

title: "Personslist",
visibleRowCount : 5,
 selectionMode : sap.ui.table.SelectionMode.Single,

});

oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "First Name"
}),
template: new sap.ui.commons.TextField({
value: "{FirstName}"
})
}));

oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "Last Name"
}),
template: new sap.ui.commons.TextField({
value: "{LastName}"
})
}));

oTable.bindRows("/items");

oMLayout.createRow(oTable);

return oMLayout;
}

});

4. Open the Main.controller.js file from the Project Explorer. This opens the file contents in the
editor. Copy and replace the contents of the file with the below code and save it.

sap.ui.controller("personslist.Main", {

/**
* Called when a controller is instantiated and its View controls (if
available) are already created.
* Can be used to modify the View before it is displayed, to bind event
handlers and do other one-time initialization.
* @memberOf personslist.Main
*/
onInit: function() {

//local data
var aData = {items:
[
{LastName: "Dente",
FirstName: "Al"
},
{LastName: "Friese",
FirstName: "Andy"
},
{LastName: "Mann",
 FirstName: "Anita"
},
{LastName: "Schutt",
FirstName: "Doris"
},
{LastName: "Turner",
FirstName: "Paige"
}
]
};

//local json model

var oModel = new sap.ui.model.json.JSONModel();
//add the data to the model
oModel.setData(aData);
//set the model to the view so that the table is bound to this
data
this.getView().setModel(oModel);
},

//method called when the insert button is clicked

insertTableData: function(evt){

var oFirstName = sap.ui.getCore().byId("firstnameid").getValue();

var oLastName = sap.ui.getCore().byId("lastnameid").getValue();

var oData = {items:

[{
LastName: oLastName,
FirstName:oFirstName
}
]
};

var oModel = new sap.ui.model.json.JSONModel();

oModel.setData(oData);

this.getView().setModel(oModel);

},

/**
* Similar to onAfterRendering, but this hook is invoked before the
controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf personslist.Main
*/
// onBeforeRendering: function() {
//
// },

/**
* Called when the View has been rendered (so its HTML is part of the
document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being
rendered.
* @memberOf personslist.Main
*/
// onAfterRendering: function() {
//
// },

/**
* Called when the Controller is destroyed. Use this one to free resources
and finalize activities.
* @memberOf personslist.Main
*/
// onExit: function() {
//
// }

});

c. Create a SAP HANA Cloud Platform local runtime for testing the application

1. Select the Servers tab as shown below.

2. Click on the link No servers are available. Click this link to create a new server

3. Select Java Web Server from the list available as shown below and click on Next > button
4. Click on the Browse button. This opens the dialog for selecting the SAP HANA Cloud
Platform SDK.
5. Browse to the path where you have extracted the SAP HANA Cloud Platform SDK (The SDK
would have been extracted to the location C:\dev\hanacloud.sdk\). Click on OK button to close
the dialog.

6. Click on Finish Button to add the server as shown below.

The server will be created as shown below.

7. Right click on the Java Web Server and select Start to start the server.

8. You should be able to see the server running locally as shown below.

d. Deploy the SAPUI5 application on the server

1. Right click on the personslist application in the project explorer and select Run As -> Run
on Server
2. In the window opened, select the local server started and click on Finish button
3. After the application has started, you should be able to see the application running in the
browser.