Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/customGroupFunction.js

Created July 17, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ikiw/bb2de7cd162bd88adf88 to your computer and use it in GitHub Desktop.
Save ikiw/bb2de7cd162bd88adf88 to your computer and use it in GitHub Desktop.
Download ZIP
Grouping with custom group function UI5
Raw
customGroupFunction.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Mobile App with XML View with JSON Data</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-xx-bindingSyntax='complex'></script>
<script id="myXml" type="text/xmldata">
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myController" displayBlock="true">
<App>
<Page title="Hello">
<Table
items="{
path: '/Customers',
sorter: {
path: 'Region',
descending: false,
group: '.getGroup'
},
groupHeaderFactory: '.getGroupHeader'
}"
headerText="Products" >
<StandardListItem
title="{Name}"
description="{ProductId}"/>
<columns>
<Column>
<Label text="Name" />
</Column>
<Column>
<Label text="ProductId" />
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Text text="{CompanyName}" />
<Text text="{City}" />
</cells>
</ColumnListItem>
</items>
</Table>
</Page>
</App>
</mvc:View>
</script>
<script>
sap.ui.controller("myController", {
onInit: function() {
var sUrl = "/databinding/proxy/http/services.odata.org/V2/Northwind/Northwind.svc/";
var model = new sap.ui.model.odata.ODataModel(sUrl, {metadataUrlParams: {}, json: true, loadMetadataAsync: true});
this.getView().setModel(model);
},
getGroup: function (oContext){
var sKey = oContext.getProperty("Region");
return {
key: sKey,
title: sKey || "No Specific Region"
};
},
getGroupHeader: function (oGroup){
return new sap.m.GroupHeaderListItem({
title: oGroup.title,
upperCase: false
});
}
});
sap.ui.view({ viewContent: jQuery('#myXml').html(), type:sap.ui.core.mvc.ViewType.XML }).placeAt("content")
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
@tokrex
Copy link

tokrex commented Mar 17, 2022

Consider using 'text' property instead of 'title'. In 1.93 'title' is not working.

Fix:

getGroup: function (oContext){
			var sKey = oContext.getProperty("Region");
			return {
				key: sKey,
				text: sKey || "No Specific Region"
			};
		},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment