Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
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:



 
8 Comments