JavaScript with SAPUI5. Tips and Techniques for beginners. #3.

SAPUI5 is a JavaScript UI Framework. JavaScript is essential to develop SAPUI5 applications.

In this blog post I would like to share with you some small but very useful techniques that can be used by almost any developer.

For your convenience please find below the links to all series:

In exercise #1 we practice to add one or more elements at the beginning and the end of an array.

In exercise # 2 we perform calculations using Number() constructions and Array methods.

In exercise #3 we practice to remove elements from our JSON model and calculated the number of Days between two dates

Lets assume that we need to design a SAPUI5 Leave application. There are two users – an Employee and a Manager. The Manager can login to the app and sees all the requests for leave from different employees. He can approve or reject the leave application and once the Manger takes an action, the request should be removed from the manger’s view.

Exercise 3. Use of splice().

Task: Create a JSON model which can be accessed by both the employee and the manager. The Employee’s view will be a form with all the fields and the Manager’s view should be a splitapp with master page showing all the requests and detail page displays the detail of the request and the footer will have two buttons to approve or reject. Once the manger takes an action, the request should be removed from the manger’s view.

Hint: to remove one or more elements from our JSON model we use splice() method.

Our mini app will look as follows:

Step 1.

In XML Manager view file we shall create Split app with Master page showing all the requests and detail page:

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="namespace.UserCase.controller.LeaveApproval"
	xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout">
	<App>
		<pages>
			<Page>
				<customHeader>
					<Bar>
						<contentLeft>
							<Button tooltip="Back" icon="sap-icon://nav-back" press="goToMainPage"/>
						</contentLeft>
						<contentMiddle>
							<Title text="Leave Approval"/>
						</contentMiddle>
						<contentRight>
							<Button tooltip="Logout" icon="sap-icon://log" press="goToLoginPage"/>
						</contentRight>
					</Bar>
				</customHeader>
				<content>
					<SplitApp id="SplitAppDemo" initialDetail="detail" initialMaster="master">
						<masterPages>
							<Page title="Leave Applications list" backgroundDesign="List" class="sapUiStdPage">
								<List items="{/employee}" id="list" mode="SingleSelect" selectionChange="onItemSelected">
									<!--<List id="list" mode="Delete" delete="handleDelete" enableBusyIndicator="true" items="{>/employee}">-->
									<items>
										<ObjectListItem title="{Name}">
											<ObjectAttribute text="Department: {Department}"/>
										</ObjectListItem>
									</items>
								</List>
							</Page>
						</masterPages>
						<detailPages showFooter="true">
							<Panel>
								<f:SimpleForm editable="true" layout="ResponsiveGridLayout" title="Application details" id="appDetailsPanel">
									<Label text="Type of Leave"/>
									<Text text="{TypeLeave}" visible="{editModel>/label}"></Text>
									<Label text="Employee name"/>
									<Text text="{Name}" visible="{editModel>/label}"></Text>
									<Label text="Department"/>
									<Text text="{Department}" visible="{editModel>/label}"></Text>
									<Label text="Start date"/>
									<Text id="Input3" text="{StartDate}" visible="{editModel>/label}"></Text>
									<Label text="End date"/>
									<Text id="Input4" text="{EndDate}" visible="{editModel>/label}"></Text>
									<Label text="Number of Days"/>
									<Text id="Input5" text="{path:'EndDate', formatter:'.calculate'}"></Text>
								</f:SimpleForm>
							</Panel>
						</detailPages>
					</SplitApp>
				</content>


				<footer>
					<Bar>
						<contentMiddle>
							<Button type="Accept" text="Accept" press="onClick" tooltip="{i18n>approveButtonText}"></Button>
							<Button type="Reject" text="Reject" press="onClick" tooltip="{i18n>rejectButtonText}"></Button>
						</contentMiddle>
					</Bar>
				</footer>
			</Page>
		</pages>
	</App>
</mvc:View>

Step 2.

Bind our JSON model with employees requests and write a JavaScript function for Approval and Reject Buttons:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageBox",
	"sap/m/MessageToast"
], function (Controller, MessageBox, MessageToast) {
	"use strict";

	return Controller.extend("namespace.UserCase.odatav4.controller.LeaveApproval", {
		
		onInit: function () {

		},
		
		goToMainPage: function () {
			window.history.go(-1);
		},

		onItemSelected: function (oEvent) {
			var oSelectedItem = oEvent.getParameter("listItem");
			var oContext = oSelectedItem.getBindingContext();
			var sPath = oContext.getPath();
			var oAppDetailPanel = this.byId("appDetailsPanel");
			oAppDetailPanel.bindElement({
				path: sPath

			});
		},

		onClick: function (oEvent) {
			this.getView().byId("list");
			var sPath = this.getView().byId("list").getSelectedItem().getBindingContext().getPath();
			var iIndex = sPath.split("/")[2];
			var oModel = this.getView().getModel();
			var oData = oModel.oData;
			var removed = oData.employee.splice(iIndex, 1);
			oModel.refresh(true);
		},

Enjoy your mini app!

Date Object.

You may be noticed that in our example above we calculated the number of days between two dates. As JavaScript doesn’t provide any facilities for working with dates as fractional days it is a little more difficult to get the number than you might imagine. In our example we converted both Dates, subtracted the later one from the earlier one and return the Date’s internal millisecond value. Here is one of the solution for you:

View:

<Label text="Number of Days"/>
<Text id="Input5" text="{path:'EndDate', formatter:'.calculate'}"></Text>



Controller:

	calculate: function (days) {
			var startDate = new Date(this.getView().byId("Input3").getText());
			var endDate = new Date(this.getView().byId("Input4").getText());
			var diff = Math.abs(startDate.getTime() - endDate.getTime());
			var diffD = Math.ceil(diff / (1000 * 60 * 60 * 24));
			this.getView().byId("Input5").setText(diffD);
			return diffD;
		},