<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Smart Form</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.ui.comp.sample.smartform": "./", "sap.ui.demo.mock": "mockdata"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Smart Form",
enableScrolling : false,
content: [ new sap.ui.core.ComponentContainer({
height : "100%", name : "sap.ui.comp.sample.smartform"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</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
}
]
}
]
}
}
<core:View xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:smartForm="sap.ui.comp.smartform" xmlns:smartField="sap.ui.comp.smartfield"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
controllerName="view.Main" class="sapUiSizeCompact"
height="100%">
<Page id="smartFormPage" showHeader="false" enableScrolling="true" class="sapUiContentPadding">
<content>
<smartForm:SmartForm id="smartForm"
app:defaultCheckBoxDisplayBehaviour="OnOff"
app:defaultDropDownDisplayBehaviour="idAndDescription"
editTogglable="true" title="{Name}">
<smartForm:Group label="Product">
<smartForm:GroupElement>
<smartField:SmartField value="{ProductId}" />
</smartForm:GroupElement>
<smartForm:GroupElement label="IGNORE">
<smartField:SmartField textLabel="{Name}" value="{Name}" />
</smartForm:GroupElement>
<smartForm:GroupElement tooltip="{i18n>CAT_TOOLTIP}" label="{i18n>CAT_LABEL}" >
<smartField:SmartField value="{Category}">
<smartField:configuration>
<smartField:Configuration controlType="dropDownList"
displayBehaviour="descriptionAndId" />
</smartField:configuration>
</smartField:SmartField>
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{Description}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{Price}" />
</smartForm:GroupElement>
</smartForm:Group>
<smartForm:Group label="Supplier">
<smartForm:GroupElement>
<smartField:SmartField value="{SupplierName}" />
</smartForm:GroupElement>
</smartForm:Group>
<smartForm:Group label="Stock">
<smartForm:GroupElement>
<smartField:SmartField value="{Status}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{Quantity}" />
</smartForm:GroupElement>
</smartForm:Group>
<smartForm:Group label="Specification">
<smartForm:GroupElement>
<smartField:SmartField value="{Width}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{Depth}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{Height}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{WeightMeasure}" />
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{MyBoolean}">
<smartField:configuration>
<smartField:Configuration
displayBehaviour="TrueFalse" />
</smartField:configuration>
</smartField:SmartField>
</smartForm:GroupElement>
<smartForm:GroupElement>
<smartField:SmartField value="{YourBoolean}">
</smartField:SmartField>
</smartForm:GroupElement>
</smartForm:Group>
<smartForm:Group label="Picture">
<smartForm:GroupElement>
<Image src="{ProductPicUrl}" />
</smartForm:GroupElement>
</smartForm:Group>
</smartForm:SmartForm>
</content>
</Page>
</core:View>
sap.ui.controller("view.Main", {
onInit: function() {
var sURL, oModel;
var sResourceUrl;
sResourceUrl = "test-resources/sap/ui/comp/demokit/sample/smartform/i18n/i18n.properties";
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleUrl: sResourceUrl,
bundleLocale: sLocale
});
this.getView().setModel(oResourceModel, "i18n");
/*
* LRep request are mocked in file: sap.ui.comp.sample.smartform.Component
*/
jQuery.sap.require("sap.ui.core.util.MockServer");
var oMockServer = new sap.ui.core.util.MockServer({
rootUri: "smartform.SmartForm/"
});
oMockServer.simulate("test-resources/sap/ui/comp/demokit/sample/smartform/mockserver/metadata.xml", "test-resources/sap/ui/comp/demokit/sample/smartform/mockserver/");
oMockServer.start();
oModel = new sap.ui.model.odata.v2.ODataModel("smartform.SmartForm", true);
//oModel.setCountSupported(false);
oModel.setDefaultBindingMode("TwoWay"); // <-- needed to take over changes into model
this.getView().setModel(oModel);
var that = this;
oModel.getMetaModel().loaded().then(function() {
that.getView().byId("smartFormPage").bindElement("/Products('1239102')");
});
},
onExit: function() {
var i;
}
});
jQuery.sap.declare("sap.ui.comp.sample.smartform.Component");
jQuery.sap.require("sap.ui.fl.Cache");
sap.ui.core.UIComponent.extend("sap.ui.comp.sample.smartform.Component", {
metadata: {
rootView: "sap.ui.comp.sample.smartform.SmartForm",
dependencies: {
libs: [ "sap.m", "sap.ui.comp" ]
},
config: {
sample: {
stretch: true,
files: [ "SmartForm.view.xml", "SmartForm.controller.js", "/mockserver/metadata.xml", "/mockserver/Products.json" ]
}
}
}
});
//flex framework does resolve any LRep requests for this specific component with the given content -> there are changes = empty and no additional back-end call is needed
sap.ui.fl.Cache._entries["sap.ui.comp.sample.smartform.Component"] = {
promise: Promise.resolve({"changes":{"changes":[],"settings":{"isKeyUser":true,"isAtoAvailable":false,"isProductiveSystem":false,"features":{"addField":["CUSTOMER","VENDOR"],"addGroup":["CUSTOMER","VENDOR"],"removeField":["CUSTOMER","VENDOR"],"removeGroup":["CUSTOMER","VENDOR"],"hideControl":["CUSTOMER","VENDOR"],"unhideControl":["CUSTOMER","VENDOR"],"renameField":["CUSTOMER","VENDOR"],"renameGroup":["CUSTOMER","VENDOR"],"moveFields":["CUSTOMER","VENDOR"],"moveGroups":["CUSTOMER","VENDOR"]}}},"componentClassName":"sap.ui.comp.sample.smartform.Component"})
};