Extending SAPUI5 JSON Model

[Former Member]

Hi All

Since the first release of SAPUI5 I started trying to use it with JSON and I did not find a way to pass callback functions to the loadData method of the JSON Model. While reading the SAPUI5 documentation I found two methods that can be used to attach handlers to the request completed and request failed events, but to be honest I didn't find it useful. So I decided to post a thread in the SCN forum.

After few weeks without answers I decided to take a look under the hood. When I opened the JSONModel.js file I saw where the loadData method calls the jQuery.ajax and I finally found what I was looking for, i.e., what I need to change to meet my requirements.

Figure 1 - JSON Model source code

Now that I knew what needed to be changed in the loadData method to received the callback functions as parameters the next question was: how to extend the JSON Model? Turning back to the SAPUI5 documentation I found the extend method which enables, as it’s name says, to extend the JSON Model.

Sharing the results

myJSONModel.js file with the JSON Model extension

How it was extended: a new method was declared (loadDataNew). Two new parameters (fnSuccess and fnError) were added to the method and the callback functions calls were inserted (see source code comments).

jQuery.sap.require("sap.ui.model.json.JSONModel");

sap.ui.model.json.JSONModel.extend("myJSONModel", {

          //declare our new method including two new parameters fnSuccess and fnError, our callback functions

          loadDataNew: function(sURL, fnSuccess, fnError, oParameters, bAsync, sType, bMerge, bCache){

                              var that = this;

                              if (bAsync !== false) {

                                        bAsync = true;

                              }

                              if (!sType)          {

                                        sType = "GET";

                              }

                              if (bCache === undefined) {

                                        bCache = this.bCache;

                              }

                              this.fireRequestSent({url : sURL, type : sType, async : bAsync, info : "cache="+bCache+";bMerge=" + bMerge});

                              jQuery.ajax({

                                url: sURL,

                                async: bAsync,

                                dataType: 'json',

                                cache: bCache,

                                data: oParameters,

                                type: sType,

                                success: function(oData) {

                                        if (!oData) {

                                                  jQuery.sap.log.fatal("The following problem occurred: No data was retrieved by service: " + sURL);

                                        }

                                        that.setData(oData, bMerge);

                                        that.fireRequestCompleted({url : sURL, type : sType, async : bAsync, info : "cache=false;bMerge=" + bMerge});

                                        // call the callback success function if informed

                                        if (typeof fnSuccess === 'function') {

                                             fnSuccess(oData);

                                         }

                                },

                                error: function(XMLHttpRequest, textStatus, errorThrown){

                                        jQuery.sap.log.fatal("The following problem occurred: " + textStatus, XMLHttpRequest.responseText + ","

                                                                      + XMLHttpRequest.status + "," + XMLHttpRequest.statusText);

                                        that.fireRequestCompleted({url : sURL, type : sType, async : bAsync, info : "cache=false;bMerge=" + bMerge});

                                        that.fireRequestFailed({message : textStatus,

                                                  statusCode : XMLHttpRequest.status, statusText : XMLHttpRequest.statusText, responseText : XMLHttpRequest.responseText});

                                         // call the callback error function if informed

                                        if (typeof fnError === 'function') {

                                             fnError({message : textStatus, statusCode : XMLHttpRequest.status, statusText : XMLHttpRequest.statusText, responseText : XMLHttpRequest.responseText});

                                         }

                                }

                              });

          }

});

and below is the code implemented in the index.html to exemplify its use

<!DOCTYPE html> 

<html><head> 

    <meta http-equiv='X-UA-Compatible' content='IE=edge' /> 

    <title>Extending the JSON Model</title> 

    <style>

        #firstname, #lastname, #btn1, #btn2, #btn3 { margin: 0 4px; }

        #content{ margin-top: 10px; }

    </style>

    <script id='sap-ui-bootstrap' type='text/javascript' 

        src='../../sapui5/resources/sap-ui-core.js' 

        data-sap-ui-theme='sap_goldreflection' 

        data-sap-ui-libs='sap.ui.commons'></script>  

    <script type='text/javascript' src='myJSONModel.js'></script>    

    <script> 

        //callback function for successful requests

       function request_success (oData) {

            if(oData.success){

                sap.ui.commons.MessageBox.alert('Data loaded successfully');

            }else{

                sap.ui.commons.MessageBox.alert(oData.msg);

            }

        }

        //callback function to handle communication errors

        function request_error () {

                  sap.ui.commons.MessageBox.alert(arguments[0].statusText);

        }

        //create the ApplicationHeader control

        var oAH = new sap.ui.commons.ApplicationHeader('appHeader', {

            logoSrc: 'http://www.sap.com/global/images/SAPLogo.gif',

            logoText: 'SAP SAPUI5 Library',

            displayLogoff: false

        });

        //create the label for field First name

        var oL1 = new sap.ui.commons.Label('l1', {

            text: 'First name:'

        });

                //create the label for field Last name

        var oL2 = new sap.ui.commons.Label('l2', {

            text: 'Last name:'

        });

        //create Input field First name

        var oTF1 = new sap.ui.commons.TextField('firstname', {

            value: '{/data/firstname}'

        });

        //create Input field Last name

        var oTF2 = new sap.ui.commons.TextField('lastname', {

            value: '{/data/lastname}'

        });

        //create our custom model

        var oModel = new myJSONModel;

        //set our model

        oTF1.setModel(oModel);

        oTF2.setModel(oModel);

        //create button to load data from server

        var oBtn1 = new sap.ui.commons.Button('btn1',{ 

            text:'Load data (ok)', 

            press:function(){

                oModel.loadDataNew("data_success.json", request_success, request_error);

            } 

        });

         //create button to load data from server

        var oBtn2 = new sap.ui.commons.Button('btn2',{ 

            text:'Load data (user not found)', 

            press:function(){

                oModel.loadDataNew("data_error.json", request_success, request_error);

            } 

        });

        //create button to load data from server

        var oBtn3 = new sap.ui.commons.Button('btn3',{ 

            text:'Load data (file not found error)', 

            press:function(){

                oModel.loadDataNew("filenotfound.json", request_success, request_error);

            } 

        }); 

        //create the layout

                var oLayout = new sap.ui.commons.layout.HorizontalLayout("Layout1", {

            content: [oL1, oTF1, oL2, oTF2, oBtn1, oBtn2, oBtn3]

        });

        //place our controls

        oAH.placeAt("appheader");

        oLayout.placeAt("content");

    </script>

</head>

<body class='sapUiBody'>

    <div id='appheader'></div>

    <div id='content'></div>

</body>

</html>

Screenshots

Figure 2 - Initial screen

Figure 3 - Success callback function called with results

Figure 4 - Success callback function called with no results

Figure 5 - Error callback function called (simulating a communication error)

The eclipse project with the complete source code can be downloaded from the url below.

http://jianelli.com.br/sap/scnblog1.zip

Your feedback is most welcome!

Christian Jianelli