Creating HashMap in UI5

A data structure is a reusable entity which can perform this operation. We have few entities already used in javascript like arrays,weakmaps etc .

However in  SAP UI5 libraries HashMap is not available .It can serve numerous functions for transactional data in front-end component . Few of them are

• Store filtered data temporarily on front end page and based on the filter criteria added by end user keep on updating the list of current filters applied and also the result count.
• If we should reach on a temporary state when we start cancelling the filters, then instead of making a call on the back-end o-data service and causing real-time traffic. These results can be cancelled on front-end and reverted back to the previous level

.

In this blog, I am sharing the step by step details on how to create this map and how to store information in form of key,value pairs and also as key,value array pairs

Step 1.  Create a new package in your UI5 Project

Step 2  Inside this package create a javascript file (For example Utils.js)

Step 3 :  Inside your Utils.js file  create the placeholder for contents  by doing the following

sap.ui.define(

function () {

“use-strict”;

var Utils = {

}

return Utils;

}

);

This object by the name utils is created and will be returned to any calling controller file.

Step 4  Now we need to create an object by the name map (for example) in this utils.js file

In order to do that we need to create another method by the name createMap which will return us the map object

This snippet needs to be created inside definition of utils object  as we did in Step 3

createMap:function() {

var  map = {

};

return map;

}

Step 5.  Now inside  the constructor of this map , which we have called as createMap, will contain two arrays. One array can be called as keyArray and the other array can be called as valueArray.

After putting them it will look like this

createMap:function() {

var keyArray;

var valueArray;

var map = {

keyArray : new Array(),

valueArray:new Array(),

var  map = {

};

return map;

}

Step 6.   Define the size method for map.

Size of the map can be determined by returning the length of keyArray. Since map contains data in the fom of key,value pairs. It makes sense to check how many keys the map has at any point of time. This number can be used to return the size of the map.Our original snippet gets changed  like this

createMap:function() {

var keyArray;

var valueArray;

var map = {

keyArray : new Array(),

valueArray:new Array(),

var  map = {

size :function() {

return this.keyArray.length;

}

};

return map;

}

Step 7  Define the keySet and valueSet methods as shown below.

createMap:function() {

var keyArray;

var valueArray;

var map = {

keyArray : new Array(),

valueArray:new Array(),

var  map = {

size :function() {

return this.keyArray.length;

},

keySet :function() {

return this.keyArray;

},

valueSet:function() {

return this.valArray;

}

};

return map;

}

Step 8. If we note that for each additional method we define for this map we put comma after previous  method and then define the new method (as shown highlighted in the latest snippet). We need to continue this pattern till we define all  methods of the map.

We have defined the basic methods like size,keySet and valueSet of a map. Now we need to define other additional methods which reflect the transactions done on a map. These methods are

• findIt(key)
• get (key)
• put (key,val)
• clear()
• removeAt( key)

1. For implementing the findIt we need to search the keyArray for the key which we gave as input

findIt :function(key) {

var result = (-1);

for( var i = 0; i < this.keyArray.length; i++ )

{

if( this.keyArray[ i ] === key )

{

result = i;

break;

}

}

return result;

}

};

return map;

},

1. In order to implement get we need to use the findIt method. Get method will call findIt method to know the index of the key from the keyArray. Once we know the index then using same index, if valArray is called then , actual value of the requested key will be retrieved from the map

get :function(key) {

var result = null;

var elementIndex = this.findIt( key );

if( elementIndex != (-1) )

{

result = this.valArray[ elementIndex ];

}

return result;

},

1. Implementation of put method will put the values and keys in both keyArray and valArray at same location

put :function(key,val) {

var elementIndex = this.findIt( key );

if( elementIndex === (-1) )

{

this.keyArray.push( key );

this.valArray.push( val );

}

else

{

this.valArray[ elementIndex ] = val;

}

},

clear :function() {

this.keyArray.splice(1,this.keyArray.length)

this.valArray.splice(1,this.valArray.length)

},

Following the steps above 1- 8 we can create a map which will hold the results in form of key,value pairs

These kay and value must be objects but they cannot be an array objects.Array objects are being discussed in next section.

Refining the map with additional attributes of array

In certain cases where we get nested result sets from the O-data Service then , map created above needs to be modified to help in storing the transactional state of UI5 app

For example a particular apparel can have an attribute which can be overlapped with other apparels . so in this scenario filtering based on one attribute (which is not exclusive) can be tricky.

I want Running Shoes of size 8 , Now property size 8  is exclusive property of a shoe which means that if shoe has size 8 then it has size 8 only and no other size  but what if I want it to be white color and belonging to brand Nike. In this situation brand is a attribute which is not exclusive and can be shared across other shoes. One white shoe of size 8 can belong to Adidas and can also belong to Nike

To achieve this, we need to have an array associated with a key in a map. This array will contain value objects for that key.

Step 1: define the new variable and initialize it  in constructor function

In our case it can be createMap function

var  valueObjectArray = new Array();

Step 2

Write a new valueSet function. For easy implementation we can name it as valueArraySet

valueArraySet:function() {

return this.valueObjectArray;

},

Step 3 :A new getter function getArrayForKey  should also be implemented  like this

getArrayForKey :function(key) {

var result = null;

var elementIndex = this.findIt( key );

if( elementIndex != (-1) )

{

result = this.userRoleArray[ elementIndex ];

}

return result;

},

Step 4: For each key , an array can be put as value for an object . For this we need to create a new method to accomplish it

putArray :function(key,valArray) {

var elementIndex = this.findIt( key );

if( elementIndex === (-1) )

{

this.keyArray.push( key );                                                               Array.prototype.push.apply(this.userRoleArray,valArray);

}

else

{

this.userRoleArray[ elementIndex ] = valArray;

}

},