Skip to main content

CRUD Operation in SAPUI5 Part 2: Create and Display using Input and Table

 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!  

Part 3: Fragments and Update 


Comments

Popular posts from this blog

How to format HTML/CSS/JS (or any other) using node.js in Notepad++ in simply easy steps.

Hey guys! Today I am going to tell you on how to use code format / pretty print your HTML / CSS / JS or any other programming language using node modules (Prettier) in notepad++. Before. After. Lets get started! Pre-requisite: you need to have node installed in your computer. You can download it from here . Make sure you have installed node correctly. install notepad++ in your computer. You can download the latest version from here . Step 1. Install Prettier using node. To install Prettier in your system click on Start => cmd. This will open Command prompt. Write this command in Command Prompt.  npm install --save-dev --save-exact prettier To check if prettier is installed correctly type. prettier --check for more info click here. Step 2. Check if nppexec plugin in set in your notepad++ Mostly notepad++ comes with nppexec  by default. Just in case you cannot find nppexec. Check out this amazing blog that tells you step by step how to set up nppexec in your notepad++....

CRUD Operation in SAPUI5. Part 3: Fragments and Update Operation

 CRUD Operation in SAPUI5 Part 3: Fragment and Update Operation We have covered Create and Display operation in our previous article. If you have not checked that I highly recommend you to check that before starting this article for better understanding. Link:  Part 2: Create and Display