Skip to Content

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:

 

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply