Now, you can use SDN's Demo Gateway to build a Sample Sales Order application using SAP UI5 Views. Below is the snapshot of the view.
SDN Gateway URL : http://scn.sap.com/docs/DOC-31221
Below are the steps to built the application.
Prerequisite to built an application are:
- SAP UI 5 Plugin installed in your eclipse.
- Tomcat 6.x version.
- Java 1.6 or greater versions.
Steps:
- Create a new application, File -> Others -> SAPUI5 Application Development and name it as "SalesOrderService".
2. Copy below HTML code in index.html file.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.table"
data-sap-ui-theme="sap_platinum" >
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("salesorderservice");
var view = sap.ui.view({id:"idsalesOrderService1", viewName:"salesorderservice.retriveOrder", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<div id="rContent" style="width:80%"></div>
</body>
</html>3. Copy Below code in your View file "retriveOrder.view.js".
sap.ui.jsview("salesorderservice.retriveOrder", {
getControllerName : function() {
return "salesorderservice.retriveOrder";
},
createContent : function(oController) {
var layout = new sap.ui.commons.layout.MatrixLayout('layout');
layout.setWidth('80%');
// Search Box starts here
var searchPannel = new sap.ui.commons.Panel('searchPannel');
var sTitle = new sap.ui.commons.Title('sTitle');
sTitle.setText('Search Order ID');
searchPannel.setTitle(sTitle);
var sLayout = new sap.ui.commons.layout.MatrixLayout('sLayout');
sLayout.setWidth('50%');
var lb_search = new sap.ui.commons.Label('lb_search');
lb_search.setText("Order ID:");
var txt_search = new sap.ui.commons.TextField('txt_search');
txt_search.setTooltip('Please provide Order id!..');
var btn_search = new sap.ui.commons.Button("btn_search");
btn_search.setText("Search");
btn_search.attachPress(oController.searchAction);
sLayout.createRow(lb_search, txt_search, btn_search);
searchPannel.addContent(sLayout);
layout.createRow(searchPannel);
// Search Box starts here
// Result Box starts here
var resultPannel = new sap.ui.commons.Panel('resultPannel');
var rTitle = new sap.ui.commons.Title('rTitle');
rTitle.setText('All - Sales Order');
resultPannel.setTitle(rTitle);
var oTable = new sap.ui.table.DataTable();
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "OrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"), sortProperty: "OrderId" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Description"}), template: new sap.ui.commons.TextField().bindProperty("value", "Description"), sortProperty: "Description" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Quantity"}), template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"), sortProperty: "Quantity" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Value"}), template: new sap.ui.commons.TextField().bindProperty("value", "Value"), sortProperty: "Value" }));
var oModel = new sap.ui.model.odata.ODataModel("http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS");
oTable.setModel(oModel);
oTable.bindRows("SOItems");
var salesResultPanel, oTitle, rModel;
var rTable = new sap.ui.table.DataTable();
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "OrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"), sortProperty: "OrderId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Item"}), template: new sap.ui.commons.TextField().bindProperty("value", "Item"), sortProperty: "Item" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Description"}), template: new sap.ui.commons.TextField().bindProperty("value", "Description"), sortProperty: "Description" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Plant"}), template: new sap.ui.commons.TextField().bindProperty("value", "Plant"), sortProperty: "Plant" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Quantity"}), template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"), sortProperty: "Quantity" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "UoM"}), template: new sap.ui.commons.TextField().bindProperty("value", "UoM"), sortProperty: "UoM" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Value"}), template: new sap.ui.commons.TextField().bindProperty("value", "Value"), sortProperty: "Value" }));
rTable.setVisibleRowCount(10);
salesResultPanel = new sap.ui.commons.Panel('salesResultPanel');
oTitle = new sap.ui.commons.Title('oTitle');
oTable.attachRowSelect(function(oEvent)
{
document.getElementById('rContent').innerHTML = "";
var currentRowContext = oEvent.getParameter("rowContext");
var OrderId = oModel.getProperty("OrderId", currentRowContext);
var url = "http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
oTitle.setText('Sales Order Details - '+OrderId);
salesResultPanel.setTitle(oTitle);
rModel = new sap.ui.model.odata.ODataModel(url);
rTable.setModel(rModel);
rTable.bindRows("SOItems");
salesResultPanel.addContent(rTable);
salesResultPanel.placeAt('rContent');
rModel = null;
});
resultPannel.addContent(oTable);
layout.createRow(resultPannel);
// Result Box ends here
layout.placeAt('content');
}
});3. Copy below code into your Controller file "retriveOrder.controller.js"
sap.ui.controller("salesorderservice.retriveOrder", {
/**
* 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.
*/
// onInit: function() {
//
// },
/**
* 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!).
*/
// 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.
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
*/
// onExit: function() {
//
// }
searchAction: function(){
var OrderId = $("#txt_search").val();
alert('searchKey-->'+OrderId);
var salesResultPanel, oTitle, rModel;
var rTable = new sap.ui.table.DataTable();
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "OrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"), sortProperty: "OrderId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Item"}), template: new sap.ui.commons.TextField().bindProperty("value", "Item"), sortProperty: "Item" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Description"}), template: new sap.ui.commons.TextField().bindProperty("value", "Description"), sortProperty: "Description" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Plant"}), template: new sap.ui.commons.TextField().bindProperty("value", "Plant"), sortProperty: "Plant" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Quantity"}), template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"), sortProperty: "Quantity" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "UoM"}), template: new sap.ui.commons.TextField().bindProperty("value", "UoM"), sortProperty: "UoM" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Value"}), template: new sap.ui.commons.TextField().bindProperty("value", "Value"), sortProperty: "Value" }));
rTable.setVisibleRowCount(10);
salesResultPanel = new sap.ui.commons.Panel('salesResultPanel_'+OrderId);
oTitle = new sap.ui.commons.Title('oTitle_'+OrderId);
document.getElementById('rContent').innerHTML = "";
var url = "http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
alert(url);
oTitle.setText('Sales Order Details - '+OrderId);
salesResultPanel.setTitle(oTitle);
rModel = new sap.ui.model.odata.ODataModel(url);
rTable.setModel(rModel);
rTable.bindRows("SOItems");
salesResultPanel.addContent(rTable);
salesResultPanel.placeAt('rContent');
rModel = null;
}
});4. Final structure of the Project would be as below.
5. Now launch your application in browser http://localhost:8080/SalesOrderService/ and prompts for a Username & Password. Enter them which is provided as in the Demo Gateway . URL : http://scn.sap.com/docs/DOC-31221
- SAP Managed Tags:
22 Comments
