<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Demo</title>
<script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.f"
data-sap-ui-frameOptions="allow"
data-sap-ui-theme="sap_belize_plus"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceRoots='{"demo": "./"}'
data-sap-ui-xx-componentPreload="off"
data-sap-ui-xx-supportedLanguages=""
>
</script>
<script>
sap.ui.getCore().attachInit(function() {
sap.ui.component({
async: true,
manifestUrl: "manifest.json",
}).then(function(createdComponent) {
sap.ui.require([
"sap/m/Shell",
"sap/ui/core/ComponentContainer",
], function(Shell, ComponentContainer) {
new Shell({
app: new ComponentContainer({
component: createdComponent,
height: "100%"
})
}).placeAt("content");
});
});
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent"
], function(UIComponent) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json"
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
}
});
});
{
"_version": "1.7.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_belize_hcw",
"sap_belize_hcb",
"sap_belize_plus",
"sap_belize"
]
},
"sap.ui5": {
"config": {
"sapFiori2Adaptation": true
},
"dependencies": {
"minUI5Version": "1.46.7",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.f": {}
}
},
"resources": {
"js": [
],
"css": [
]
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML"
},
"routing": {
"routes": [{
"name": "home",
"pattern": "",
"target": "home",
"titleTarget": "home"
}],
"targets": {
"home": {
"viewId": "homeView",
"viewName": "Home",
"transition": "fade",
"viewLevel": 1
},
"notFound": {
"viewName": "Home",
"transition": "slide",
"viewLevel": 98
}
},
"config": {
"async": true,
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "home"
}
}
}
}
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" async="true">
<App id="rootApp">
<pages>
<!-- Navigated views will be placed in here -->
</pages>
</App>
</mvc:View>
<mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" controllerName="demo.controller.Home" displayBlock="true" async="true">
<Page id="homePage" title="Home">
<List id="idList" items="{accordion>/accodata}">
<items>
<CustomListItem>
<Panel expandable="true" expanded="{accordion>expanded}" expand="onPanelExpand">
<headerToolbar>
<Toolbar active="true" press="onPanelToolbar">
<content>
<Text text="{accordion>title}" />
</content>
</Toolbar>
</headerToolbar>
<content>
<Text text="{accordion>content}" />
</content>
</Panel>
</CustomListItem>
</items>
</List>
</Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("demo.controller.Home", {
onInit: function() {
var oMyModel = new sap.ui.model.json.JSONModel({
accodata: [{
expanded: false,
title: 'Title A',
content: 'Content AAA'
}, {
expanded: true,
title: 'Title B (expanded on init)',
content: 'Content BBB'
}, {
expanded: false,
title: 'Title C',
content: 'Content CCC'
}, {
expanded: false,
title: 'Title D',
content: 'Content DDD'
}]
}
);
this.getView().setModel(oMyModel, "accordion");
},
onPanelExpand: function(oEvent) {
if (oEvent.getParameters().expand) {
var oModel = this.getView().getModel("accordion");
var aPath = oEvent.getSource().getBindingContext("accordion").getPath().split("/");
var selectedIndex = +aPath[aPath.length - 1];
var aAccordion = oModel.getProperty("/accodata");
for (var i = 0; i < aAccordion.length; i++) {
if (i !== selectedIndex) {
aAccordion[i].expanded = false;
}
}
oModel.updateBindings();
}
},
onPanelToolbar: function(oEvent) {
var oPanel = oEvent.getSource().getParent();
oPanel.setExpanded(!oPanel.getExpanded());
}
});
});