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

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

In this and next blog posts 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

Exercise 1. Use of push() and unshift()

Let’s look at the example below, assuming that we need to create a Feed input and Feed list item for our mini app.

Mini app will look as follows:

Task: In the comment section, if the user types in any comment in the Feed input and click on the arrow button it should update the feed list.

Hint: To add one or more elements at the beginning of an array we use unshift() method.

Step 1.

In XML view file add Feed Input and Feed list item controls :

<content>

<FeedInput post="onPost" showIcon="false" class="sapUiSmallMarginTopBottom"/>

<List showSeparators="Inner" items="{objectsModel>/objects}">
<FeedListItem sender="{objectsModel>Author}" showIcon="false" timestamp="{objectsModel>Date}" text="{objectsModel>Text}"/>
</List>

</content>

Step 2.

Create a JSON model with info for a comment and bind it to the control.

{
	"objects": [{
		"Author": "George Grayshon",
			"Date": "November 04 2020",
			"Text": "My first comment"
		}
	]
}


//\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\


onInit: function () {

			var oModel = new sap.ui.model.json.JSONModel();
			oModel.loadData("./model/objects.json");
			this.getView().setModel(oModel, "objectsModel");

		}

Step 3.

Now we need to activate the arrow button and complete a function in our controller using unshift() method. Sample of the code below:

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



		onPost: function (oEvent) {

// define the date of new comment
			var oFormat = DateFormat.getDateTimeInstance({
				style: "medium"
			});
			var oDate = new Date();
			var sDate = oFormat.format(oDate);

// create new entry
			var sValue = oEvent.getParameter("value");
			MessageToast.show("Posted new comment: " + sValue);
			var oEntry = {
				Author: "George Grayshon",
				Date: "" + sDate,
				Text: sValue
			};
// update model
			var oModel = this.getView().getModel("objectsModel");
			var aEntries = oModel.getData().objects;
			aEntries.unshift(oEntry);
			oModel.setData({
				objects: aEntries
			});
		},

Mini app will look as follows after the code is complete:

So, to add one or more elements at the beginning of an array we use unshift() method. But if you want an element to be added at end of the an array, push() method can be used.

In the next post I plan to give an example on how to remove one or more elements from our JSON model.

Thank you for reading! Hope you liked it:-)