Building a CRUD Application using XML Model

Building a CRUD Application using XML Model

Building a CRUD Application using XML Model: Many times I personally / my colleagues have encountered this scenario, where a XML Model need to be used throughout the application and not sure how to use it. To avoid this, most of us try to convert the data into JSON, since it is bit easy compared to XML.

However in this blog, I try to explain how we can use XML Models in UI5 which is more required for SAP MII related services where the data response is in XML format.

Models:

A model in the MVC paradigm holds the data and provide methods like Create, Read, Update and Delete.

We have totally four types of models in SAPUI5:

     – JSON Model

     – XML Model

     – OData Model

     – Resource Model

For more information, please check this link: Models – UI Development

JSON and XML models are client-side models and OData model is a server side model. We have lots of examples with JSON and OData model. But, I didn’t found much for XML model which serves the purpose.

SAP MII provides most of the data response in standard XML format.

We have a Runner service which provides the output in XML format. To avoid XML, generally most of us wrap the transaction into a query object to fetch the response in JSON.

I would suggest that, instead of creating a new Query object, let us make use of XML structure itself.

Let us go through different operations like Create / Read / Update / Delete and Save using XML model.

Read:

 

I have following XML Data:

                                                                                                               1239102             Power Projector             Projector             Titanium             1467                               2212-121-828             Gladiator MX             Graphics Card             Technocom             321                               K47322.1             Hurricane GX             Graphics Card             Red Point Stores             588                               22134T             Webcam             Accessory             Technocom             700                

Now, I need to bind above XML data to the table.

In controller onInit, it would be:

         onInit: function(oEvent) {           var oModel = new XMLModel();           oModel.loadData("data.xml");           oModel.attachRequestCompleted(function(oEvent) {             sap.ui.getCore().setModel(oEvent.getSource());           });         } 

Since, I am loading the file locally I have to use the above code. But in your case, there would be an AJAX call to Query Template / Transaction etc, and then in the success condition you can set the data to model.

Now table XML code would be:

 

If you see the table items binding path, it is bound to: “{/Rowset/0/Row}”, if you’re not sure about the same, you can debug to make it clear:

Once data is bound to table, the same would be displayed in ‘items’ aggregation of table.

 

Create:

 

Since the Item template is already created, we just need to push an empty ‘Row’ node with sub nodes to XML structure. In result it creates a new Column List Item in table.

 

         onInsert: function(oEvent) {           //Create           var oModel = sap.ui.getCore().getModel();           var oModelData = oModel.getData();           var oRow = $(oModelData).find('Row')[0];           var oNewChildNode = oModelData.createElement("Row");           var oNodes = oRow.children;           for (var i = 0; i < oNodes.length; i++) {             var oNodeName = oNodes[i].nodeName;             var xmlNode = oModelData.createElement(oNodeName);             xmlNode.appendChild(document.createTextNode(""));             oNewChildNode.appendChild(xmlNode);           }           var oRowset = $(oModelData).find('Rowset')[0];           oRowset.appendChild(oNewChildNode);           oModel.setData(oModelData);           var oTable = oEvent.getSource().getParent().getParent();           jQuery.sap.delayedCall(100, null, function() {             var oLength = $(oModelData).find('Row').length;             var oItem = oTable.getItems()[oLength - 1];             var oCells = oItem.getCells();             for (var j = 0; j < oCells.length; j++) {               oCells[j].setEditable(true);             }           });         } 

Update:

We just need to make the item fields ‘editable’ property to true and once the save item button is pressed the fields will be non-editable and data will be saved in XML Model.

         onEdit: function(oEvent) {           //Update           var oTable = oEvent.getSource().getParent().getParent();           var oSelectedItem = oTable.getSelectedItem();             var oCells = oSelectedItem.getCells();             for (var j = 0; j < oCells.length; j++) {               oCells[j].setEditable(true);             }         } 

Delete:

Delete the selected Item data from table and remove the selected Row node from XML Model.

         onDelete: function(oEvent) {           //Delete           var oTable = oEvent.getSource().getParent().getParent();           var oSelectedItem = oTable.getSelectedItem();           if (oSelectedItem === null) {             MessageBox.alert("Please select an Item to Delete", {               icon: sap.m.MessageBox.Icon.ERROR,               title: "Error"             });           } else {             var that = this;             MessageBox.confirm("Are you sure you want to delete selected item?", {               icon: sap.m.MessageBox.Icon.WARNING,               title: "Delete",               actions: [sap.m.MessageBox.Action.YES, sap.m.MessageBox.Action.NO],               onClose: function(oEvent) {                 that.fnCallbackConfirm(oEvent, oTable, oSelectedItem);               }             });           }         },         fnCallbackConfirm: function(oEvent, oTable, oItem) {           if (oEvent == "YES") {             var oIndex = oTable.indexOfItem(oItem);             var oModel = sap.ui.getCore().getModel();             var oModelData = oModel.getData();             var oRow = $(oModelData).find('Row')[oIndex];             var oRowset = $(oModelData).find('Rowset')[0];             oRowset.removeChild(oRow);             oModel.setData(oModelData);             oTable.removeSelections(true);           } else {             oTable.removeSelections(true);             return false;           }         } 

Save:

Once we have the new data in XML file / model, here we need to make an AJAX call to query template where we can pass this parameter as XML type to SQL Stored Procedure and loop through XML file to update / insert the records to SQL tables.

Full Demo: Since there is no connection with MII, I just made a sample using Plunker CRUD Application – XML Model

 

Working Snippet

 

Regards,

Sai.