Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member709916
Participant
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 ...

 

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:-)
1 Comment
Labels in this area