JSON Data binding, Navigation and Search functionality in SAPUI5

[gsravya]

As we all know SAPUI5 follows MVC(Model-View-Controller) Architecture. Model, which is responsible for maintaining the data.

We have 4 types of Models in SAPUI5:

JSON Model, XML Model, Resource Model which comes under Client side and ODATA Model which comes under Server side. If the user wants the data from client side, the most commonly used model is JSON(JavaScript Object Notation) Model and it supports two-way data binding.

Let us see an example on JSON model binding:

Step – 1:

First we need to login in SAP Cloud Platform by entering the credentials.



Step – 2:

After successful login, you need to create a project in SAP Web IDE. Here i’m creating a project with a project name “table” which is shown below the workspace.


We will get one default view(table.view.xml) under view folder and one default controller (table.controller.js) under controller folder when we create a project.

Step – 3:

Now we need to create JSON model, for that created a file called “Object.json” under model folder. In that json file, we will keep our data.


Here “Objects” is the key and remaining all are the properties and we are going to use this in table.view.xml for data binding.

Step – 4:

Now in table.view.xml, i have defined a table and going to bind the above json data to that table. The code goes as follows:


Here i have created a table and gave an id for it.
items=”{path:’/Objects’}” is the syntax for giving the path where the data is. And in <columnlist> i am binding the data by giving the properties that are defined in json file.

Step – 5:

After that we need to write some code in table.controller.js as shown below:


In onInit function, we are giving id of the table which is defined in table.view.xml for getting the view of table and kept in variable “oTable”.
oModel.loadData(“model/Oject.json”)
model/Oject.json is the path of the json data. Here we are getting all the data and loading that data into the variable “oModel”.
oTable.setModel(oModel)
Setting the model to the variable “oTable” i.e., binding that data(which is present in the variable oModel) to the table.

Step – 6:

Done with the binding part. Now to see the output select the project and click on run button. The output is as follows:



 

NAVIGATION

Step – 7:

Now we are going to perform navigation functionality to this view. We have 3 types of navigations and the most commonly used navigation is Routing(also called as Hash-based navigation) and now am using routing in our example. For that, i just created another view “table1.view.xml” and a button in “table.view.xml”. By clicking on that button, we will navigate from one view (table,view.xml) to another view(table1.view.xml).

Code for table.view.xml:





When you click on navigate button, you will be redirected to next view i.e., table1.view.xml.

Code for table1.view.xml:





We just created a button in table.view.xml but to run the functionality we need to do the following things:

• First we need to initialize the router in component.js

• Then define the router class and routes under sapui5 in manifest.json

• Now we need to write the navigation button functionality in table.controller.js

After performing all the above steps, you are navigated to next view(table1.view.xml).



In routing, we are navigating from page to page by using hash-based navigation system. We can see the name “table1” in url after symbol(#) which we gave as pattern name in manifest.json.
If we refresh this page, the same page will appears again and it won’t goes to previous page. This is the main advantage in hash-based navigation(routing).
If we press the back button, then it will go back to previous page.



The code for navigating back to previous page is shown below:



SEARCH FUNCTIONALITY

Step – 8:

Now we are going to perform search functionality to this view. For that we need to take search field in table1.view.xml and write that functionality in table1.controller.js.





Here we are applying filter to a particular field “Productname”. For that we need to write the code in controller.js as follows:


Here we need to give the field name on which we are going to apply search functionality i.e., “Productname” in this example. To search a particular name we need to enter at least one character so it’s length should be more than 0 then only we can apply filter. After filtering, we will get the updated list.