sap.ui.define(
[
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'sap/ui/core/SeparatorItem',
],
function(Controller, JSONModel, SeparatorItem) {
'use strict';
return Controller.extend('com.sap.zmenu.controller.View1', {
onInit: function() {
var oModel = new JSONModel(this._getData());
this.getView().setModel(oModel);
},
getGroupHeader: function(oGroup) {
return new SeparatorItem({
text: oGroup.key,
});
},
//Get Data
_getData: function() {
var obj = {
'0': {
title: 'FirstTitle',
options: {
'0': {
name: 'name1',
},
'1': {
name: 'name2',
},
},
},
'1': {
title: 'SecondTitle',
options: {
'0': {
name: 'name1',
},
'1': {
name: 'name2',
},
},
},
};
return this._transformData(obj);
},
// Transform the data
_transformData(obj) {
const model = { modelExample: [] };
let id = 0;
for (const item of Object.keys(obj)) {
const { title } = obj[item];
for (const option of Object.keys(obj[item].options)) {
model.modelExample.push({
id,
name: obj[item].options[option].name,
title,
});
id += 1;
}
}
return model;
},
});
}
);
title=Title
appTitle=zTest
appDescription=App Description
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function (JSONModel, Device) {
"use strict";
return {
createDeviceModel: function () {
var oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel;
}
};
});
<mvc:View controllerName="com.sap.zmenu.controller.View1"
xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<MultiComboBox
selectionChange="handleSelectionChange"
selectionFinish="handleSelectionFinish"
width="500px"
items="{
path: '/modelExample',
sorter: {
path: 'title',
descending: false,
group: true
},
groupHeaderFactory: '.getGroupHeader'
}">
<core:Item key="{id}" text="{name}" />
</MultiComboBox>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"com/sap/zmenu/model/models"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("com.sap.zmenu.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>zmenu</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{"com.sap.zmenu": "./"}'
data-sap-ui-compatVersion="edge"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted"
></script>
</head>
<body class="sapUiBody">
<div
data-sap-ui-component
data-name="com.sap.zmenu"
data-id="container"
data-settings='{"id" : "zmenu"}'
></div>
</body>
</html>
{
"_version": "1.12.0",
"sap.app": {
"id": "com.sap.zmenu",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"resources": "resources.json",
"ach": "ach",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.38.11"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "com.sap.zmenu.view.View1",
"type": "XML",
"async": true,
"id": "View1"
},
"dependencies": {
"minUI5Version": "1.60.1",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {},
"sap.ui.unified": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.sap.zmenu.i18n.i18n"
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "com.sap.zmenu.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [
{
"name": "RouteView1",
"pattern": "RouteView1",
"target": ["TargetView1"]
}
],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "View1",
"viewName": "View1"
}
}
}
}
}
/* Enter your custom styles here */