CRUD Operation in SAPUI5
Part 2: Create and Display in Table
In my previous article we discussed the brief introduction about SAPUI5, MVC architecture and we developed a simple user interface with input and tables. In this article we will discuss the Model and Controller from the MVC architecture. If you have not seen the first part I highly recommend you to see that first. Link: Part 1: Intro and UI Design
Model: This component contains the data that will will display in our table.
Controller: The component is responsible for the data manipulation. We will use this to add the values present in the input into the table.
Let's get started!
Step 1. Let's create an onInit function. The onInit function is triggered during the start of the application. We will declare our model here and add a predefined data to check if it gets reflected in the table. I'll show the code and explain the important pieces one by one.
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/ui/core/Fragment"
], function(Controller, MessageToast, Fragment) {
"use strict";
return Controller.extend("session1session1.controller.View1",
onInit: function(){
var initial = {
details: [{
name: "ui5",
country: "india"
}]
};
var omodel = new sap.ui.model.json.JSONModel(initial);
sap.ui.getCore().setModel(omodel);
var table = this.getView().byId("tabledetail");
table.setModel(omodel);
}
});
});
Let's understand the code written here. Inside the onInit function we have a json array. We now enter into the model part of the MVC architecture.
var initial = {
details: [{
name: "ui5",
country: "india"
}]
};
We have created a json array with key 'details'. We have given some values by default. These values will be shown in the table initially when the application runs.
var omodel = new sap.ui.model.json.JSONModel(initial);
sap.ui.getCore().setModel(omodel);
We create a json model for the json variable 'initial' and set the json model in 'sap.ui.getCore()'. sap.ui.getCore() will allow us to fetch this data throughout the application even in different views. This is helpful to be able to fetch the important data between views and fragments ( we will be dealing with this in next article ).
var table = this.getView().byId("tabledetail");
table.setModel(omodel);
We now get the table using this.getView(). this.getView() is used to get the elements which is present in the current view for example, since we are using view1.view.xml file, all the models and UI elements can be called using this.getView(), you cannot get the UI elements from other views. To overcome this issue we use sap.ui.getCore(). This allows us to get UI elements from any xml files throughout the application.
Now that you have written this code, we can run the application and check the output.
Step 2: Button Press event. Now to add a new data into the model we will create a function that will be triggered when the button is pressed. Remember in the previous article we have given an attribute 'press' to the element 'Button' followed by the function name i.e. onsubmit. When the button is pressed the values present inside the input element will be appended to the json model which we have created. Let us add a new function onsubmit() below the onInit() function.
Note: While adding new function add a ', (comma)' after the closing brackets of the previous function. for example:
a: function() { // your code here },
b:function(){ // your code here }
Let us write the code for the onsubmit().
onsubmit: function(){
var name = this.getView().byId("inputname").getValue();
var country = this.getView().byId("inputcountry").getValue();
var data = {
name: name,
country: country
};
sap.ui.getCore().getModel().getProperty("/details").push(data);
sap.ui.getCore().getModel().refresh();
},
Initially we are getting the values from the inputs; inputname and inputcountry into the variables name and country respectively. We are then creating a json array with the keys; name and country.
Now we are getting the property '/details' from the sap.ui.getCore().getModel() and appending our data into the bottom of the model.
Now we are refreshing the sap.ui.getCore().getModel() to allow the values to be reflected in the table. This is trigger an update and all the elements that use this property '/details' will be updated in the UI as well.
After pressing the submit button.
The final code in our View1.controller.js will be:
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/m/MessageToast",
"sap/ui/core/Fragment"
], function(Controller, MessageToast, Fragment) {
"use strict";
return Controller.extend("session1session1.controller.View1",
// start your code from here.
onInit: function(){
var initial = {
details: [{
name: "ui5",
country: "india"
}]
};
var omodel = new sap.ui.model.json.JSONModel(initial);
sap.ui.getCore().setModel(omodel);
var table = this.getView().byId("tabledetail");
table.setModel(omodel);
},
onsubmit: function(){
var name = this.getView().byId("inputname").getValue();
var country = this.getView().byId("inputcountry").getValue();
var data = {
name: name,
country: country
};
sap.ui.getCore().getModel().getProperty("/details").push(data);
sap.ui.getCore().getModel().refresh();
}
});
});
Conclusion:
We have implemented the create and display of data in our application. We have covered the model and the controller part of the MVC architecture. In the upcoming article we will be updating the values which is already in the table. Thank you for reading the article till the end, meet you in the next one!
Comments
Post a Comment