<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/1.28.10/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.demo.wt",
height: "100%"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
// Code goes here
/* Styles go here */
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("sap.ui.demo.wt.Component", {
metadata: {
manifest: "json"
},
init: function () {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set data model
// create the views based on the url/hash
this.getRouter().initialize();
}
});
});
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.ui.demo.wt",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"ach": "CA-UI5-DOC",
"dataSources": {
"invoiceRemote": {
"uri": "../../../../../../../../proxy/http/services.odata.org/V2/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": "sap.ui.demo.wt.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.wt.i18n.i18n"
}
},
"invoice": {
"dataSource": "invoiceRemote"
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.wt",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [
{
"pattern": "",
"name": "overview",
"target": "overview"
},
{
"pattern": "detail",
"name": "detail",
"target": "detail"
}
],
"targets": {
"overview": {
"viewName": "Overview"
},
"detail": {
"viewName": "Detail"
}
}
}
}
}
<mvc:View
controllerName="sap.ui.demo.wt.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<App class="sapUiDemoWT" id="app"/>
</mvc:View>
sap.ui.define([
'jquery.sap.global',
'sap/m/MessageToast',
'sap/ui/core/Fragment',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, MessageToast, Fragment, Controller, JSONModel) {
"use strict";
var PageController = Controller.extend("sap.ui.demo.wt.App", {
oPersonalizationDialog : null,
onInit : function() {
// set explored app's demo model on this sample
this.getView().setModel(
new JSONModel("https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/sample/P13nDialog/products.json"));
},
handleClose : function(oEvent) {
var oSortPanel = oEvent.getSource().getAggregation("panels")[1];
var oSortItems = oSortPanel.getAggregation("sortItems")[0];
var oItemsObject = {"ColumnKey":oSortItems.getColumnKey(),"Operation":oSortItems.getOperation()};
alert(JSON.stringify(oItemsObject));
this.oPersonalizationDialog.close();
},
handleReset : function(oEvent) {
MessageToast.show("Reset button has been clicked", {
width : "auto"
});
},
openDialog : function() {
// associate controller with the fragment
this.oPersonalizationDialog = sap.ui.xmlfragment("sap.ui.demo.wt.PersonalizationDialog", this);
this.getView().addDependent(this.oPersonalizationDialog);
// toggle compact style
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this.oPersonalizationDialog);
this.oPersonalizationDialog.open();
},
onPersonalizationDialogPress : function(oEvent) {
this.openDialog();
},
onAddColumnsItem : function(oEvent){
MessageToast.show("Event 'addColumnsItem' fired in order to move the selected column item", {
width : "auto"
});
}
});
return PageController;
});
<mvc:View
controllerName="sap.ui.demo.wt.App"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Page title="P13nDialog">
<content>
<Button
text="Show Personalization Dialog"
press="onPersonalizationDialogPress" />
</content>
</Page>
</mvc:View>
<core:FragmentDefinition xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<P13nDialog ok="handleClose" cancel="handleClose" showReset="true"
reset="handleReset" initialVisiblePanelType="sort">
<panels>
<P13nColumnsPanel title="Columns" visible="true" addColumnsItem="onAddColumnsItem"
type="columns"
items="{
path: '/ColumnCollection'
}">
<items>
<P13nItem columnKey="{path}" text="{text}" visible="{visible}" />
</items>
</P13nColumnsPanel>
<P13nSortPanel title="Sort" visible="true" type="sort"
containerQuer="true" layoutMode="Desktop"
items="{
path: '/ColumnCollection'
}">
<P13nItem columnKey="{path}" text="{text}" />
<sortItems>
<P13nSortItem columnKey="name" operation="Ascending" />
</sortItems>
</P13nSortPanel>
<P13nFilterPanel title="Filter" visible="true" type="filter"
containerQuer="true" layoutMode="Desktop"
items="{
path: '/ColumnCollection'
}">
<P13nItem columnKey="{path}" text="{text}" />
<filterItems>
<P13nFilterItem columnKey="name" operation="BT"
value1="a" />
</filterItems>
</P13nFilterPanel>
</panels>
</P13nDialog>
</core:FragmentDefinition>