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.

/wp-content/uploads/2015/07/webide2_747012.png

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

/wp-content/uploads/2015/07/webide1_747021.png

4.After Creating Application. If you Extent application You will see following things.

/wp-content/uploads/2015/07/webide3_747018.png

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.

/wp-content/uploads/2015/07/webide4_747060.png

I hope that you all enjoyed for above one.

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply