Skip to Content
Technical Articles
Author's profile photo Nadya Brown

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:-)

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Manoj Kumar Potharaju
      Manoj Kumar Potharaju

      Hi Nadya Brown,

      Nice example, I want to add more detailed about unshift() and push() differences.

      Push (): It used when we want to add elements at the end of an array. For example, if we want to add record one after another like 1 to n format it will use.

      Ex:  arr = [1,2,3,4]

      Now we have an array called arr with 4elements so now we want add another element we simply push the element into the array.

      arr.push(5);

      Output: arr = [1,2,3,4,5]

       

      Unshift (): It is used when we want add elements at the beginning of the array. It means starting of the array.

      Ex: arr = [2,3,4,5]

      Now I want to add 1 at starting of the array in the arr.

      arr.unshift(1);

      Output: arr = [1,2,3,4,5]

       

      Thanks.