OData binding to a table in XML Fragment in SAP UI5

[former_member303090]

OData model is a server-side model, so entire data is available at the server side. The client side can see only rows and fields and you can’t use sorting and filtering at the client side. There is a need to send a request to the server to complete these tasks.

Fragments are light-weight UI parts which can be reused, defined similar to views, but the definition of the controller is absent as they don't have controllers.

They can be reused and if source code is required for event handler methods, they can connect to existing controllers of the view which they are part of.

manifest.json:
Data source creation:
Create a new data source in the descriptor editor of manifest.json by hitting a plus button.

Now select a system from destinations you already added in the HANA cockpit from the drop down and also select corresponding service name as shown below.



Click on next and then Finish.
Model creation:
In order to access the data in the data source we create a model in the descriptor. Create a model by hitting on plus button in the descriptor editor of manifest.json file.



Now provide a model name and select a data source. Click on ok.



view1.view.xml: In the view, define a fragment as shown below.

<mvc:View controllerName="manifest.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core">

	 <core:Fragment   fragmentName="manifest.view.HelloDailog" type="XML" />

</mvc:View>

HelloPanel.fragment.xml:
we will define only the fragment assets and no controller as fragments won't have controllers in the fragment core. We defined a table here as follows.

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">	

		 	<Table id="producttable" items="{/user_detailsSet}">

		 			<columns>

			<Column

				width="12em">

				<Text text="Name" />

			</Column>

			<Column

				minScreenWidth="Tablet"

				demandPopin="true">

				<Text text="City" />

			</Column>

			</columns>

						<items>

							<ColumnListItem>

								<cells>

									<Text text="{Name}"/>

									<Text text="{City}"/>

								</cells>

							</ColumnListItem>

						</items>

					</Table>

</core:FragmentDefinition>

view1.controller.js:

Here we are instantiating the fragment by calling sap.ui.xmlfragment method by defining the fragment path.

In the onInit function, we are going to access the table which we have created in the fragment by it's Id and will create a column list item having two cells to bind the items of the table later.

		onInit: function() {

			var oView = this.getView();

		// create dialog via fragment factory

		var oDialog = sap.ui.xmlfragment( "manifest.view.HelloDailog");

		

		//Accessing the table from the fragment by it's Id	

			var oTable = this.byId("producttable");

	

		//column list item creation

			var oTemplate = new sap.m.ColumnListItem({

				cells: [new sap.m.Text({

					text: "{Name}"

				}), new sap.m.Text({

					text: "{City}"

				})]

			});

			var sServiceUrl = "/sap/opu/odata/sap/ZUSER_DETAILS_88_SRV";

		//Adding service to the odata model

			var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, false);

		//Setting model to the table

			oTable.setModel(oModel);

			oTable.bindAggregation("items", {

				path: "/user_detailsSet",

				template: oTemplate

			});

		}

Output:

The output is as follows:



 

[former_member253655]

Hi Sri Divya,

In the above example since you have already done the binding of items in he XML, why do we need to bind items again in the controller?

Actually I was trying the same thing, when I bind items to the table in XML, it gives error "Missing template or factory function for aggregation items of Element sap.m.Table#attributeTable3 !".

If i do it using controller, it works.

But I want to do it in XML only, do you have any idea why items binding is not working in XML.

Kind regards,

Nishit

[former_member667745]

Thanks, Sri Divya

very useful content ?

[former_member669493]

thank  you

[former_member303090]

Thank you

[former_member303090]

🙂

[somnathamp2018_62]

Simple yet Useful Blog. Hi Nishit the whole idea of MVC is to seperate the view from the controller . Why at first you need to bind inj View level in XML . The Binding will happen in controller , XML View will present to the user. This is an example of how to use Fragments ...so what you can do is to simply remove the <items> aggregation from the View and adjust the same in VIEW controller as apart from this XML view is only displaying the colomn name and text . The data coming from Odata source will be binded ti the view in view1.controller.js.

 

Regds,

Somnath.

 

[former_member293765]

Without fragment factory also we can bind ...

var oTable = this.byId("producttable");

Just change it simply as ...

var oTable  = sap.ui.getCore().byId("producttable");

[nandini_2026]

I have taken this as service url to bind data to fragment i.e., https://services.odata.org/northwind/northwind.svc/Products?$format=json

and it showing error as "Failed to execute 'send' on 'XMLHttpRequest': Fail…d/northwind.svc/Products/$metadata?$format=json'.",

can any one help me out with this?