Usage Of Client Side XML Model In SAPUI5

Hello Everyone!!!

From the past few days, I have been researching on Client side models. During my analysis, I came to know some of the differences between JSON & XML models binding in SAP UI5 which are the most common preferred formats for data interchange on web.

JSON	XML
Javascript Object Notation.	Extensible Markup Language.
Store information.	Store information.
No display capabilities.	Capability to display data because it is a markup language.
Supports only text and number data type.	support various data types such as number, text, images, charts, graphs. It also provides options for transferring the structure or format of the data with actual data.
It does not provide any support for namespaces.	It supports namespaces.
It is less secured.	It is more secure than JSON.
It doesn’t support comments.	It supports comments.
JSON types: string, number, array, Boolean.	All XML data should be string.
JSON syntax has specific semantics built in stuff between {} is an object, stuff between []is an array, etc.	Particular element names don’t mean anything until a particular processing application processes them in a particular way.

Representation of JSON & XML:

Usage of XML model:

SAP UI5 follows MVC pattern and binds data to the controls using client side models I.e., JSON & XML. We will look more into XML model usage and its binding syntax to bind the XML Views.

The XML model allows to bind controls to XML data. It is a client-side model intended for small datasets, which are completely available on the client. It supports two-way binding.

To instantiate the model, use the following code:

var oModel = new sap.ui.model.xml.XMLModel();

XML model can be loaded with XML data format or through web service call by HTTP requests. XML model will parse the provided XML format internally and binds its child nodes to the view. Below, it describes sample XML format exchanged over the server.

Types of Data Samples:

1)Sampledata.xml:

<?xml version="1.0" encoding="UTF-8"?>
<SalesOrder>
	<Sales>
		<OrderId>4001</OrderId>
		<ItemNo>1</ItemNo>
		<Description>Notebook Basic 15</Description>
		<Quantity>10</Quantity>
		<DeliveryDate>30-5-2020</DeliveryDate>
		<ShippingAddress>NewYork</ShippingAddress>
	</Sales>
	<Sales>
		<OrderId>4002</OrderId>
		<ItemNo>2</ItemNo>
		<Description>Notebook Basic 18</Description>
		<Quantity>20</Quantity>
		<DeliveryDate>27-5-2020</DeliveryDate>
		<ShippingAddress>London</ShippingAddress>
	</Sales>
	<Sales>
		<OrderId>4003</OrderId>
		<ItemNo>3</ItemNo>
		<Description>Notebook Basic 20</Description>
		<Quantity>40</Quantity>
		<DeliveryDate>23-5-2020</DeliveryDate>
		<ShippingAddress>UK</ShippingAddress>
	</Sales>
	<Sales>
		<OrderId>4004</OrderId>
		<ItemNo>4</ItemNo>
		<Description>Notebook Basic 25</Description>
		<Quantity>20</Quantity>
		<DeliveryDate>20-5-2020</DeliveryDate>
		<ShippingAddress>Russia</ShippingAddress>
	</Sales>
	<Sales>
		<OrderId>4005</OrderId>
		<ItemNo>5</ItemNo>
		<Description>Notebook Basic 45</Description>
		<Quantity>20</Quantity>
		<DeliveryDate>19-5-2020</DeliveryDate>
		<ShippingAddress>France</ShippingAddress>
	</Sales>
</SalesOrder>

2)Sampledata.xml:

<?xml version="1.0" encoding="UTF-8"?>
<SalesOrder>
	<Sales>
		<OrderId id="4001" itemNo="1" Desc="Notebook Basic 15" qty="10" delivery="30-5-2020" shipping="NewYork">4001</OrderId>
	</Sales>
	<Sales>
		<OrderId id="4002" itemNo="2" Desc="Notebook Basic 18" qty="20" delivery="27-5-2020" shipping="London">4002</OrderId>
	</Sales>
	<Sales>
		<OrderId id="4003" itemNo="3" Desc="Notebook Basic 20" qty="40" delivery="23-5-2020" shipping="UK">4003</OrderId>
	</Sales>
	<Sales>
		<OrderId id="4004" itemNo="4" Desc="Notebook Basic 25" qty="20" delivery="20-5-2020" shipping="Russia">4004</OrderId>
	</Sales>
	<Sales>
		<OrderId id="4005" itemNo="5" Desc="Notebook Basic 45" qty="20" delivery="19-5-2020" shipping="France">4005</OrderId>
	</Sales>
</SalesOrder>

Binding Information:

XML model can be loaded with loadData() or setXML()

LoadData():

var oModel = new sap.ui.model.xml.XMLModel();
oModel.loadData("model/Sampledata.xml");

SetXML():

var oModel = new sap.ui.model.xml.XMLModel();  
oModel.setData(oXMLDocument);  
oModel.setXML(“<?xml version=”1.0” encoding=”UTF-8”?><Sales><xml>data</xml></Sales>”);

Binding Syntax for sample XML Document:

Assuming sample data(1) provided above, We have <SalesOrder> as the root element to the sample XML and we have the root path items for the table as {/Sales} since for XML model root must not be included in the path.

Binding Path Syntax for XML Model:

@attribute:

Similar to JSON model we would bind attributes with the binding path but for XML attributes, Special selector using the “@” character exists.

Assuming the Sampledata(2) provided above, In order to bind the attributes of XML data, We use root node “OrderId” followed by attribute as “OrderId/@id”.

Binding path syntax for the context text of an element:

text():

“text()” can be used to reference the context text of an element for the child nodes.

Binding Context for XML model:

To get the binding context onItemPress for ColumnListItem we use below syntax:

oEvent.getSource().getBindingContext().getObject();

oEvent.getSource().getBindingContext().getObject("OrderId”);

oEvent.getSource().getBindingContext().getObject("OrderId/text()");

Below is the output for the sample XML data listed above:

These are the brief introduction to client side XML model. I hope you will understand general syntax variations when compare to JSON. In the next blog, I am going to research more on OData V2 Models.

Thanks for your valuable time.

Good Day!!!

Original Article:
https://blogs.sap.com/2020/06/02/usage-of-client-side-xml-model-in-sapui5/