How to Design Leave Request using SAPWebIDE
Hi,
In this Blog, I am going to describe how to design Leave Request form SAP WEB IDE for ESS .
Introduction:
1.First I installed SAP WebIDE locally Through the following Link.
http://scn.sap.com/docs/DOC-58848
2. After that I opened I got below page. I went into after entering my username and password.
3.I created One SAPUI5 application locally by using following link.
http://localhost:8080/webide/index.html
4.You can create new sapui5 application by below path
File->New->Project from Template
4.After Creating Application. If you Extent application You will see following things.
5. After That edit the code in index.html. The code is looks like below.This code will come default as soon as you created js view
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta http-equiv=’Content-Type’ content=’text/html;charset=UTF-8’/>
<script src=”resources/sap-ui-core.js”
id=”sap-ui-bootstrap”
data-sap-ui-libs=”sap.m”
data-sap-ui-resourceroots='{“view”: “./”}’
data-sap-ui-theme=”sap_bluecrystal”>
</script>
<!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>
<script>
sap.ui.localResources(“view”);
var app = new sap.m.App({initialPage:”idView1″});
var page = sap.ui.view({id:”idView1″, viewName:”view.View1″, type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt(“content”);
</script>
</head>
<body class=”sapUiBody” role=”application”>
<div id=”content”></div>
</body>
</html>
6. Second I edited View1.view.js . The code is i given below
Step 1:
To create leave request we need Date and calender, so I included all the library that we need to create this design.
1.jQuery.sap.require(“sap.ui.layout.form.SimpleForm”);
2.jQuery.sap.require(“sap.ui.unified.Calendar”);
3.jQuery.sap.require(“sap.ui.unified.DateRange”);
step2:
create view and specify the controller belongs to this view.
4.sap.ui.jsview(“view.View1”, {
| getControllerName : function() { | ||
| return “view.View1”; | ||
| }, |
step 3:
After That created content for This view using some library which is available in sapui5.
createContent : function(oController) {
var that = this;
var oForm = new sap.ui.layout.form.SimpleForm({
minWidth : 1024,
maxContainerCols: 2,
editable : true,
layout : “ResponsiveGridLayout”,
//title : “Date Controls”,
labelSpanL : 4,
labelSpanM : 4,
emptySpanL : 1,
emptySpanM : 1,
columnsL : 1,
columnsM : 1
});
var oInput1 = new sap.m.Text(“input1”);
var oInput2 = new sap.m. Text(“input2”);
var EmployeeNoLabel = new sap.m.Label({
text : “Employee NO”,
labelFor : oInput1
});
var EmployeeNameLabel = new sap.m.Label({
text : “Employee Name”,
labelFor : oInput2
});
oForm.addContent(EmployeeNoLabel);
oForm.addContent(oInput1);
oForm.addContent(EmployeeNameLabel);
var oComboBox = new sap.m.ComboBox({
placeholder: “Choose your leavetype”
| }); |
| var oComboBoxLabel = new sap.m.Label({ | |||
| text : “Leave Type”, | |||
| labelFor : oComboBox | |||
| }); | |||
oForm.addContent(oComboBoxLabel);
oForm.addContent(oComboBox);
var oDatePicker = new sap.m.DatePicker({
value : {
path : “input>/date1”,
type : new sap.ui.model.type.Date({})
}
});
var oDatePickerLabel = new sap.m.Label({
text : “START DATE”,
labelFor : oDatePicker
});
oForm.addContent(oDatePickerLabel);
oForm.addContent(oDatePicker);
var oDateTime = new sap.m.DateTimeInput({
value : {
path : “input>/date2”,
type : new sap.ui.model.type.Date({})
}
});
var oDateTimeLabel = new sap.m.Label({
text : “END DATE”,
labelFor : oDateTime
});
oForm.addContent(oDateTimeLabel);
oForm.addContent(oDateTime)
return new sap.m.Page({
title : “Leave Request – Demo”,
showNavButton: “{device>/isPhone}”,
navButtonPress: [oController.doNavBack, oController],
content : [ oIconTabBar ],
headerContent: [oBtnLaunchpad],
footer: new sap.m.Bar({})
});
}
});
7..Created Controller for Particular view. on that I created only On Init event to initializing purpose.
1.sap.ui.controller(“view.View1”, {
2.
| onInit: function() { |
| jQuery.sap.require(“sap.ui.model.json.JSONModel”); |
var input = {
date1 : new Date(),
date2 : new Date(new Date().getTime() + 1000*60*60*24*7),
};
var model = new sap.ui.model.json.JSONModel(input);
sap.ui.getCore().setModel(model, “input”);
this.getView().setModel(model, “input”);
}
});
8. Finallly I saved all whatever I customized. and run The application. I got Below Screen.
I hope that you all enjoyed for above one.
Is it possible to create leave request from mobile with out portal in sap?