<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m,sap.ui.comp" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<!-- by Denise Nepraunig @denisenepraunig -->
<!-- example for a SAPUI5 MVC XML view with JSON data from a file
and data binding based on the demokit example from sapui5:
https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/samples
-->
<script>
// Best practice would be to set this stuff up in an Component.js
// but let's not over-complicate stuff for demonstration purposes
// http://scn.sap.com/community/developer-center/front-end/blog/2014/12/10/sap-ui5-with-local-json-model
var oModel = new sap.ui.model.json.JSONModel();
// Load JSON in model
oModel.loadData("products.json");
sap.ui.getCore().setModel(oModel);
sap.ui.localResources("view");
var app = new sap.m.App({
initialPage: "idMain"
});
var page = sap.ui.view({
id: "idMain",
viewName: "view.Main",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
# SAPUI5 MVC example with JSON file databinding
This is a simple MVC example where we load JSON data from an external file
and then bind this data against a table.
This example is based on:
[SAPUI5 Demokit Tables](https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/sample)
{
"ProductCollection": [
{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g",
"Price": 856.49,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 3,
"UoM": "PC",
"Width": 51,
"Depth": 42,
"Height": 18,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/large_HT-6100.jpg"
},
{
"ProductId": "2212-121-828",
"Name": "Gladiator MX",
"Category": "Graphics Card",
"SupplierName": "Technocom",
"Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",
"WeightMeasure": 321,
"WeightUnit": "g",
"Price": 81.7,
"CurrencyCode": "EUR",
"Status": "Discontinued",
"Quantity": 10,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1071.jpg"
},
{
"ProductId": "K47322.1",
"Name": "Hurricane GX",
"Category": "Graphics Card",
"SupplierName": "Red Point Stores",
"Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV",
"WeightMeasure": 588,
"WeightUnit": "g",
"Price": 219,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 25,
"UoM": "PC",
"Width": 34,
"Depth": 14,
"Height": 2,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1072.jpg"
},
{
"ProductId": "22134T",
"Name": "Webcam",
"Category": "Accessory",
"SupplierName": "Technocom",
"Description": "Web camera, color, High-Speed USB",
"WeightMeasure": 700,
"WeightUnit": "g",
"Price": 59,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 22,
"UoM": "PC",
"Width": 18,
"Depth": 19,
"Height": 21,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1112.jpg"
},
{
"ProductId": "P1239823",
"Name": "Monitor Locking Cable",
"Category": "Accessory",
"SupplierName": "Technocom",
"Description": "Lock for Monitor",
"WeightMeasure": 40,
"WeightUnit": "g",
"Price": 13.49,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 30,
"UoM": "PC",
"Width": 11,
"Depth": 11,
"Height": 3,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1111.jpg"
},
{
"ProductId": "214-121-828",
"Name": "Laptop Case",
"Category": "Accessory",
"SupplierName": "Red Point Stores",
"Description": "Laptop Case with room for pencils and other items",
"WeightMeasure": 1289,
"WeightUnit": "g",
"Price": 78.99,
"CurrencyCode": "EUR",
"Status": "Discontinued",
"Quantity": 15,
"UoM": "PC",
"Width": 53,
"Depth": 34,
"Height": 7,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1114.jpg"
},
{
"ProductId": "XKP-312548",
"Name": "USB Stick 16 GByte",
"Category": "Accessory",
"SupplierName": "Red Point Stores",
"Description": "USB 2.0 HighSpeed 16GB",
"WeightMeasure": 11,
"WeightUnit": "g",
"Price": 17.19,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 45,
"UoM": "PC",
"Width": 6,
"Depth": 2,
"Height": 0.5,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-6120.jpg"
},
{
"ProductId": "KTZ-12012.V2",
"Name": "Deskjet Super Highspeed",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "1200 dpi x 1200 dpi - up to 25 ppm (mono) / up to 24 ppm (colour) - capacity: 100 sheets - Hi-Speed USB2.0, Ethernet",
"WeightMeasure": 100,
"WeightUnit": "g",
"Price": 117.19,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 10,
"UoM": "PC",
"Width": 87,
"Depth": 45,
"Height": 39,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1052.jpg"
},
{
"ProductId": "89932-922",
"Name": "Laser Allround Pro",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with a first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color",
"WeightMeasure": 2134,
"WeightUnit": "g",
"Price": 39.99,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 12,
"UoM": "PC",
"Width": 42,
"Depth": 29,
"Height": 31,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1040.jpg"
},
{
"ProductId": "38094020.1",
"Name": "Flat S",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "19 inches Optimum Resolution 1600 x 1200 @ 85Hz, Max resolution 1984 x 1488 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1401,
"WeightUnit": "g",
"Price": 339,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 12,
"UoM": "PC",
"Width": 88,
"Depth": 13,
"Height": 49,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1030.jpg"
},
{
"ProductId": "870394932",
"Name": "Flat Medium",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "21 inches Optimum Resolution 1984 x 1488 @ 85Hz, Max resolution 1720 x 1280 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1800,
"WeightUnit": "g",
"Price": 639,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 16,
"UoM": "PC",
"Width": 102,
"Depth": 13,
"Height": 54,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1032.jpg"
},
{
"ProductId": "282948303-02",
"Name": "Flat X-large II",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "23 inches Optimum Resolution 2048 × 1536 @ 85Hz, Max resolution 2080 × 1560 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 2100,
"WeightUnit": "g",
"Price": 1239,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 5,
"UoM": "PC",
"Width": 112,
"Depth": 13,
"Height": 60,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1138.jpg"
},
{
"ProductId": "OP-38800002",
"Name": "High End Laptop 2b",
"Category": "Laptop",
"SupplierName": "Titanium",
"Description": "Notebook Professional 17 with 2,3GHz - 17 inches XGA - 2048MB DDR2 SDRAM - 40GB Hard Disc - DVD-Writer (DVD-R/+R/-RW/-RAM)",
"WeightMeasure": 1190,
"WeightUnit": "g",
"Price": 939,
"CurrencyCode": "EUR",
"Status": "Out of Stock",
"Quantity": 18,
"UoM": "PC",
"Width": 64,
"Depth": 34,
"Height": 4,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1010.jpg"
},
{
"ProductId": "977700-11",
"Name": "Hardcore Hacker",
"Category": "Keyboard",
"SupplierName": "Titanium",
"Description": "Corded Keyboard with special keys for media control, USB",
"WeightMeasure": 651,
"WeightUnit": "g",
"Price": 89,
"CurrencyCode": "EUR",
"Status": "Available",
"Quantity": 20,
"UoM": "PC",
"Width": 53,
"Depth": 24,
"Height": 6,
"DimUnit": "cm",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1063.jpg"
}
],
"ProductCollectionStats": {
"Counts": {
"Total": 14,
"Weight": {
"Ok": 7,
"Heavy": 5,
"Overweight": 2
}
},
"Groups": {
"Category": {
"Projector": 1,
"Graphics Card": 2,
"Accessory": 4,
"Printer": 2,
"Monitor": 3,
"Laptop": 1,
"Keyboard": 1
},
"SupplierName": {
"Titanium": 3,
"Technocom": 3,
"Red Point Stores": 5,
"Very Best Screens": 3
}
},
"Filters": [
{
"type": "Category",
"values": [
{
"text": "Projector",
"data": 1
},
{
"text": "Graphics Card",
"data": 2
},
{
"text": "Accessory",
"data": 4
},
{
"text": "Printer",
"data": 2
},
{
"text": "Monitor",
"data": 3
},
{
"text": "Laptop",
"data": 1
},
{
"text": "Keyboard",
"data": 1
}
]
},
{
"type": "SupplierName",
"values": [
{
"text": "Titanium",
"data": 3
},
{
"text": "Technocom",
"data": 3
},
{
"text": "Red Point Stores",
"data": 5
},
{
"text": "Very Best Screens",
"data": 3
}
]
}
]
}
}
<mvc:View
controllerName="view.Main"
id=""
xmlns:commons="sap.ui.commons"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns:sap.ui.core="sap.ui.core"
xmlns:sap.ui.layout.form="sap.ui.layout.form"
xmlns="sap.m"
xmlns:sap.comp.variants="sap.ui.comp.variants">
<App>
<pages>
<Page navButtonPress="onPress" navButtonType="Back" showFooter="false" showNavButton="true" showSubHeader="false" title="Inscripciones Postgrados"
titleLevel="H1">
<content>
<sap.ui.layout.form:SimpleForm columnsL="2" emptySpanM="0" editable="true" columnsM="2" emptySpanL="0" emptySpanS="0" id="__form3"
labelMinWidth="192" labelSpanL="4" labelSpanM="4" labelSpanS="12" layout="ResponsiveGridLayout" minWidth="0" width="100%"
xmlns:sap.ui.layout.form="sap.ui.layout.form">
<sap.ui.layout.form:content>
<Label id="__labe21" required="true" text="Universidad" textAlign="Begin" width="100%"/>
<Input id="oIUniversidad" maxWidth="60%" width="50%" showValueHelp="true" valueHelpRequest="helpRequestUniversidad"/>
<Label id="__labe22" required="true" text="Departamento Universidad" width="100%"/>
<Input editable="false" fieldWidth="60%" id="oIDptoUniversidad" maxWidth="70%" width="50%"/>
<Label id="__labe23" required="true" text="Ciudad Universidad" width="100%"/>
<Input editable="false" fieldWidth="50%" id="oICiudadUniversidad" maxWidth="70%" width="50%"/>
<Label id="__labe12" required="true" text="Fecha de Grado" width="100%"/>
<Select autoAdjustWidth="false" id="oSDiaFechaGrado" selectedItemId="oIdDia_0" selectedKey="oKeyDia_0">
<items>
<sap.ui.core:ListItem id="oIdDia_0" key="oKeyDia_0" text=""/>
</items>
<layoutData>
<l:GridData indentS="0" indentXL="0" indentSmall="0" indentLarge="0" indentL="0" indentM="0" indentMedium="0" id="__data41" spanL="1" spanLarge="1"
spanM="1" spanMedium="1" spanS="2" spanSmall="2" spanXL="1"/>
</layoutData>
</Select>
<Select autoAdjustWidth="false" id="oSMesFechaGrado" selectedItemId="oIdMes_0" selectedKey="oKeyMes_0">
<layoutData>
<l:GridData indentSmall="0" spanL="2" indentXL="0" indentM="0" indentLarge="0" indentMedium="0" indentS="0" indentL="0" spanLarge="2" spanM="2"
spanMedium="2" spanS="3" spanSmall="3" spanXL="3"/>
</layoutData>
<items>
<sap.ui.core:ListItem id="oIdMes_0" key="oKeyMes_0" text=""/>
</items>
</Select>
<Select autoAdjustWidth="true" id="oSYearFechaGrado" selectedItemId="oIdYear_0" selectedKey="oKeyYear_0">
<layoutData>
<l:GridData indentSmall="0" spanL="2" indentXL="0" indentM="0" indentLarge="0" indentMedium="0" indentS="0" indentL="0" spanLarge="2" spanM="2"
spanMedium="2" spanS="3" spanSmall="3" spanXL="3"/>
</layoutData>
<items>
<sap.ui.core:ListItem id="oIdYear_0" key="oKeyYear_0" text=""/>
</items>
</Select>
</sap.ui.layout.form:content>
<sap.ui.layout.form:title>
<sap.ui.core:Title id="oTEduPre" text="Educación Pregrado"/>
</sap.ui.layout.form:title>
</sap.ui.layout.form:SimpleForm>
</content>
</Page>
</pages>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("view.Main", {
helpRequestUniversidad: function(evt) {
var oView = this.getView();
var oCBSede = oView.byId("oCBSede");
// var oHelpModel = oCBSede.getModel();
// var oHelpModel = new sap.ui.model.json.JSONModel();
// var oHelpModel = new sap.ui.model.json.JSONModel();
// oHelpModel.setData({
// cols: [
// {label: "Company Code", template: "CompanyCode"},
// {label: "Company Name", template: "CompanyName"},
// {label: "City", template: "City", demandPopin : true},
// {label: "Currency Code", template: "CurrencyCode", demandPopin : true}
// ]
// });
var oIUniversidad = oView.byId("oIUniversidad");
var oIDptoUniversidad = oView.byId("oIDptoUniversidad");
var oICiudadUniversidad = oView.byId("oICiudadUniversidad");
var oTextSearch = oIUniversidad.getValue();
this.aKeys= ["Objid","Stext"];
var oValueHelpDialog = new sap.ui.comp.valuehelpdialog.ValueHelpDialog({
basicSearchText: "",
title: "Universidad",
supportMultiselect: false,
supportRanges: false,
supportRangesOnly: false,
// key: "Objid",
key: this.aKeys[1],
descriptionKey: this.aKeys[0],
stretch: sap.ui.Device.system.phone,
ok: function(oControlEvent) {
var token = oControlEvent.getParameter("tokens");
var oUniversidad = token[0].mAggregations.customData[0].mProperties.value;
if (oUniversidad) {
oIUniversidad.setValue(oUniversidad.Stext);
oIDptoUniversidad.setValue(oUniversidad.Bezei);
oICiudadUniversidad.setValue(oUniversidad.Ort01);
}
oValueHelpDialog.close();
},
cancel: function(oControlEvent) {
sap.m.MessageToast.show("Cancel pressed!");
oValueHelpDialog.close();
},
afterClose: function() {
oValueHelpDialog.destroy();
}
});
var oColModel = new sap.ui.model.json.JSONModel();
oColModel.setData({
cols: [
{label:"Universidad", template:"Stext"},
{label:"Pais", template:"Landx50"},
{label:"Dpto", template:"Bezei", demandPopin:true},
{label:"Ciudad", template:"Ort01", demandPopin:true}
]
});
// var sServiceUrl = "http://server.local:8000/sap/opu/odata/sap/ZXXX";
var helpURL = "/UniversidadSet?$filter=startswith(Stext, '" + oTextSearch + "')";
oValueHelpDialog.getTable().setModel(oColModel, "columns");
// var oRowsModel = new sap.ui.model.json.JSONModel(sServiceUrl+helpURL+"?$format=json");
// oValueHelpDialog.getTable().setModel(oRowsModel);
// oValueHelpDialog.getTable().setModel(oHelpModel);
if (oValueHelpDialog.getTable().bindRows) {
oValueHelpDialog.getTable().bindRows(helpURL);
}
if (oValueHelpDialog.getTable().bindItems) {
var oTable = oValueHelpDialog.getTable();
oTable.bindAggregation("items", "/", function(sId, oContext) {
var aCols = oTable.getModel("columns").getData().cols;
return new sap.m.ColumnListItem({
cells: aCols.map(function(column) {
var colname = column.template;
return new sap.m.Label({
text: "{" + colname + "}"
});
})
});
});
}
var oFilterBar = new sap.ui.comp.filterbar.FilterBar({
advancedMode: true,
filterBarExpanded: false,
showGoOnFB: sap.ui.Device.system.phone,
filterGroupItems: [new sap.ui.comp.filterbar.FilterGroupItem({
groupTitle: "foo",
groupName: "gn1",
name: "n1",
label: "Universidad",
control: new sap.m.Input().setValue(oTextSearch)
})],
search: function() {
var oText = arguments[0].mParameters.selectionSet[0].getValue();
helpURL = "/UniversidadSet?$filter=startswith(Stext, '" + oText + "')";
var oTable2 = oValueHelpDialog.getTable();
oTable2.unbindRows();
oTable2.bindRows(helpURL);
if (oTable2.bindItems) {
oTable2.bindAggregation("items", "/", function(sId, oContext) {
var aCols = oTable2.getModel("columns").getData().cols;
return new sap.m.ColumnListItem({
cells: aCols.map(function(column) {
var colname = column.template;
return new sap.m.Label({
text: "{" + colname + "}"
});
})
});
});
}
sap.m.MessageToast.show("Search pressed '" + oText + "''");
}
});
if (oFilterBar.setBasicSearch) {
oFilterBar.setBasicSearch(new sap.m.SearchField({
showSearchButton: sap.ui.Device.system.phone,
placeholder: "Search",
search: function(event) {
oValueHelpDialog.getFilterBar().search();
}
}));
}
oValueHelpDialog.setFilterBar(oFilterBar);
if (oIUniversidad.$().closest(".sapUiSizeCompact").length > 0) { // check if the Token field runs in Compact mode
oValueHelpDialog.addStyleClass("sapUiSizeCompact");
} else {
oValueHelpDialog.addStyleClass("sapUiSizeCozy");
}
oValueHelpDialog.open();
oValueHelpDialog.update();
}
});
});