Skip to Content
Author's profile photo sivakumar M

How to Design Leave Request using SAPWebIDE


In this Blog, I am going to describe how to design Leave Request form SAP WEB IDE for ESS .


1.First I installed SAP WebIDE locally Through the following Link.

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.


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




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



  data-sap-ui-resourceroots='{“view”: “./”}’



  <!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>



  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});





  <body class=”sapUiBody” role=”application”>

  <div id=”content”></div>



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.“sap.ui.layout.form.SimpleForm”);“sap.ui.unified.Calendar”);“sap.ui.unified.DateRange”);


create view and specify the controller belongs to this view.“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





var oComboBox = new sap.m.ComboBox({

  placeholder: “Choose your leavetype”

var oComboBoxLabel = new sap.m.Label({
text : “Leave Type”,
labelFor : 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




  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




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.“view.View1”, {


onInit: function() {“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.

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Is it possible to create leave request from mobile with out portal in sap?