Task_1_UI5

Requirement :
Design Ui5 app to display Sales order

UI5 app screen :

Form :

Created by
Document Date
Net value.

Table :
Sales Doc Created on Net value Currency Doc date Sales org Distribution
chanel

Table :

VBAK

VBELN
AUDAT
ERDAT
NETWR
WAERK
VKORG
VTWEG
Step 1 we need to create o data service.

T code SGEW:

Click on data model →import → DDIC structure

Generate runtime artefact

We will only implement get_entity_set method only.

SALES_ORDERSET_GET_ENTITYSET

Activate
Save and now we will test the service in sap Gateway Server.

Total number of record in table in 10544.

Test for document sales Document number 0000015444

So we are good in o data service

Now move to SAP ui5 application

Next and finish . you will have 3 files : index file, view file and controller file .

Lets move to view file to add UI elements on Application.

1 Application header

var apo = new sap.ui.commons.ApplicationHeader({

logoText: "SAP Application",
userName: "Prasad Manjrekar",
displayWelcome : true ,
displayLogoff: true
});

apo.placeAt("content");

2.Lets create 1 Panel to keep user input Together inside this Panel we were using Form .

var panel = new sap.ui.commons.Panel({text:"Please enter your INPUT" ,

height:"400px", width:"500px"});

panel.placeAt("content");

Just to see App one we execute application as WEB app Preview and then copy this link and open in
Chrome URl

Now we will add Form the form contain 3 filed : created by , Delivery Date and Currency
 var simpleform = new sap.ui.layout.form.SimpleForm({

content: [
new sap.ui.commons.Label({text: "Created By"}),
new sap.ui.commons.AutoComplete({ value : "" ,width: "15em"
}),
new sap.ui.commons.Label({text: "Delivery Date "}),
new sap.ui.commons.DatePicker(),
new sap.ui.commons.Label({text: "Amount"}),
new sap.ui.commons.TextField({ value : " " , width:
"15em"}),
// button
new sap.ui.commons.Label({text:" "}),
new sap.ui.commons.Button({ text : "Search" , width: "15em"
}),

]
});
simpleform.placeAt("content");

Add the Form in the in the Panel.

panel.addContent(simpleform);

And test application once in Browser .

Create second panel to show data .

var panel_tab = new sap.ui.commons.Panel({text:"Please enter your INPUT" , height:"400px",

width:"100%"});

Now we will create table :

//table

var table = new sap.ui.table.Table({

visibleRowCount: 15,
alternateRowColors: true
});

And will add the Column

Column 1 : sales Document no

//column 1 : Sales Doc
table.addColumn( new sap.ui.table.Column({
label : new sap.ui.commons.Label({ text:"Sales Document
no"}),
template: new sap.ui.commons.TextView({ text: "{Vbeln}"
})
}));
Column 2 : created on
//column 2 : Created On
table.addColumn( new sap.ui.table.Column({
label : new sap.ui.commons.Label({ text:"Created On"}),
template: new sap.ui.commons.TextView({ text: "{Erdat}"
})
}));
 Column 3 : net Value
//column 3 : Net Value
table.addColumn( new sap.ui.table.Column({
label : new sap.ui.commons.Label({ text:"Net Value"}),
template: new sap.ui.commons.TextView({ text: "{Netwr}"
})
}));
Column 4 : Currency
//column 4 : Currency
table.addColumn( new sap.ui.table.Column({
label : new sap.ui.commons.Label({ text:"Currency "}),
template: new sap.ui.commons.TextView({ text: "{Waerk}"
})
}));
Column 5: Document Date
//column 5 : Document Date
table.addColumn( new sap.ui.table.Column({
label : new sap.ui.commons.Label({ text:"Document Date
"}),
template: new sap.ui.commons.TextView({ text: "{Audat}"
})
}));
Column 6 : Sales Organization
//column 6 : Sales Organization
table.addColumn( new sap.ui.table.Column({
label : new sap.ui.commons.Label({ text:"Sales
Organization "}),
template: new sap.ui.commons.TextView({ text: "{Vkorg}"
})
}));
Column 7 : Distribution Chanel
//column 7 : Distribution Channel
table.addColumn( new sap.ui.table.Column({
label : new sap.ui.commons.Label({ text:"Distribution
Channel "}),
template: new sap.ui.commons.TextView({ text: "{Vtweg}"
})
}));

Created o data model :

var modelobject = new
sap.ui.model.odata.ODataModel("proxy/sap/opu/odata/SAP/ZPM_SALES_ORDER_SRV",
false,
"user_name",
"Password" );

Just for testing , to values in Application

table.setModel(modelobject);
table.bindRows("/sales_order");
table.placeAt("content");
Now we will add button on Form and display filter Value in table only .

new sap.ui.commons.Button({ text : "Search" , width: "15em",

press: submitdata
}),

Now we will write code for submit button event handler :

Inside that event handler we apply filter function for filtering the value .

First lest try for created by and amount :

We moved table Bind row inside the event handler method.

function submitdata()
{
//capture the input Values
var content = simpleform.getContent();
var cratedBy = content[1].getValue();
var amount = content[5].getValue();

//
sap.ui.commons.MessageBox.alert(cratedBy +" " +amount );
var filter1 = new sap.ui.model.Filter("Ernam",
sap.ui.model.FilterOperator.EQ ,cratedBy);
var filter2 = new sap.ui.model.Filter("Netwr" ,
sap.ui.model.FilterOperator.GT ,amount);

table.bindRows("/sales_orderSet", null ,null, [filter1,filter2]);

}
Lets test filter condition for Created by and amount .
As I use GT operator so only 1 value comes , hopes you get it.

Now move to date picker filtration values .

The data format received from o data services is in “1997-01-27T00:00:00” form

So we need to do some JavaScript for this

var d = odateicker.getYyyymmdd();
var year = d.substring(0,4);
var month = d.substring(4,6);
var day = d.substring(6,8);
var result = year + "-"+ month + "-"+ day + "T00:00:00";
Event handler Code of Method .
var filter1 = new sap.ui.model.Filter("Ernam",
sap.ui.model.FilterOperator.EQ ,cratedBy);
var filter2 = new sap.ui.model.Filter("Netwr" ,
sap.ui.model.FilterOperator.GT ,amount);
var filter3 = new sap.ui.model.Filter("Audat" ,
sap.ui.model.FilterOperator.GT ,datepicer);

table.bindRows("/sales_orderSet", null ,null,

[filter1,filter2,filter3]);

Now we will do some extra experiment

We will Put second table inside one of container and this will display only if record is Present
Note :

I face some issue in O data service I make following changes.

Make date filed as nullable