I'm trying to use a external JSON file to bind data into a XML View in SAP WebIDE. And here is the code I'm using
view1.xml
<mvc:View controllerName="com.db.DataBinding.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns:m="sap.m" xmlns:core="sap.ui.core">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<m:Table id="tab1" items="{path : '/ProductCollection'}">
<columns>
<m:Column width="auto">
<m:Label text="Product Id"/>
</m:Column>
<m:Column width="auto">
<m:Label text="Product Name"/>
</m:Column>
<m:Column width="auto">
<m:Label text="Category"/>
</m:Column>
<m:Column width="auto">
<m:Label text="Supplier"/>
</m:Column>
</columns>
<m:ColumnListItem>
<m:Text text="{ProductId}"/>
<m:Text text="{Name}"/>
<m:Text text="{Category}"/>
<m:Text text="{SupplierName}"/>
</m:ColumnListItem>
</m:Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
view1.controller
onInit: function () {
var oTable = this.getView().byId("tab1");
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("./products.json");
oTable.setModel(oModel);
}
manifest.json
{
"_version": "1.8.0",
"sap.app": {
"id": "com.db.DataBinding",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_hcb", "sap_belize"]
},
"sap.ui5": {
"rootView": {
"viewName": "com.db.DataBinding.view.View1",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.db.DataBinding.i18n.i18n"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "com.db.DataBinding.view",
"controlAggregation": "pages",
"controlId": "idAppControl",
"clearControlAggregation": false
},
"routes": [{
"name": "RouteView1",
"pattern": "RouteView1",
"target": ["TargetView1"]
}],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "View1"
}
}
}
}
}
index.html
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>DataBinding</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"com.db.DataBinding": "./"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "com.db.DataBinding"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
products.json
{
"ProductCollection": [
{
"ProductId": "HT-1000",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 15 with 2,80 GHz quad core, 15\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 15",
"DateOfSale": "2017-03-26",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1000.jpg",
"Status": "Available",
"Quantity": 10,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 956,
"Width": 30,
"Depth": 18,
"Height": 3,
"DimUnit": "cm"
},
{
"ProductId": "HT-1001",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.5,
"WeightUnit": "KG",
"Description": "Notebook Basic 17 with 2,80 GHz quad core, 17\" LCD, 4 GB DDR3 RAM, 500 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 17",
"DateOfSale": "2017-04-17",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1001.jpg",
"Status": "Available",
"Quantity": 20,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1249,
"Width": 29,
"Depth": 17,
"Height": 3.1,
"DimUnit": "cm"
},
{
"ProductId": "HT-1002",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 18 with 2,80 GHz quad core, 18\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 18",
"DateOfSale": "2017-01-07",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1002.jpg",
"Status": "Available",
"Quantity": 10,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1570,
"Width": 28,
"Depth": 19,
"Height": 2.5,
"DimUnit": "cm"
},
{
"ProductId": "HT-1003",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Smartcards",
"WeightMeasure": 4.2,
"WeightUnit": "KG",
"Description": "Notebook Basic 19 with 2,80 GHz quad core, 19\" LCD, 8 GB DDR3 RAM, 1000 GB Hard Disc, Windows 8 Pro",
"Name": "Notebook Basic 19",
"DateOfSale": "2017-04-09",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1003.jpg",
"Status": "Available",
"Quantity": 15,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1650,
"Width": 32,
"Depth": 21,
"Height": 4,
"DimUnit": "cm"
},
{
"ProductId": "HT-1007",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.2,
"WeightUnit": "KG",
"Description": "Digital Organizer with State-of-the-Art Storage Encryption",
"Name": "ITelO Vault",
"DateOfSale": "2017-05-17",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1007.jpg",
"Status": "Available",
"Quantity": 15,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 299,
"Width": 32,
"Depth": 22,
"Height": 3,
"DimUnit": "cm"
},
{
"ProductId": "HT-1010",
"Category": "Accessories",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.3,
"WeightUnit": "KG",
"Description": "Notebook Professional 15 with 2,80 GHz quad core, 15\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro",
"Name": "Notebook Professional 15",
"DateOfSale": "2017-02-22",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1010.jpg",
"Status": "Available",
"Quantity": 16,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1999,
"Width": 33,
"Depth": 20,
"Height": 3,
"DimUnit": "cm"
},
{
"ProductId": "HT-1011",
"Category": "Laptops",
"MainCategory": "Computer Systems",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 4.1,
"WeightUnit": "KG",
"Description": "Notebook Professional 17 with 2,80 GHz quad core, 17\" Multitouch LCD, 8 GB DDR3 RAM, 500 GB SSD - DVD-Writer (DVD-R/+R/-RW/-RAM),Windows 8 Pro",
"Name": "Notebook Professional 17",
"DateOfSale": "2017-01-02",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1011.jpg",
"Status": "Available",
"Quantity": 17,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 2299,
"Width": 33,
"Depth": 23,
"Height": 2,
"DimUnit": "cm"
},
{
"ProductId": "HT-1020",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.16,
"WeightUnit": "KG",
"Description": "Digital Organizer with State-of-the-Art Encryption for Storage and Network Communications",
"Name": "ITelO Vault Net",
"DateOfSale": "2017-05-08",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1020.jpg",
"Status": "Available",
"Quantity": 14,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 459,
"Width": 10,
"Depth": 1.8,
"Height": 17,
"DimUnit": "cm"
},
{
"ProductId": "HT-1021",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.18,
"WeightUnit": "KG",
"Description": "Digital Organizer with State-of-the-Art Encryption for Storage and Secure Stellite Link",
"Name": "ITelO Vault SAT",
"DateOfSale": "2017-06-30",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1021.jpg",
"Status": "Available",
"Quantity": 50,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 149,
"Width": 11,
"Depth": 1.7,
"Height": 18,
"DimUnit": "cm"
},
{
"ProductId": "HT-1022",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.2,
"WeightUnit": "KG",
"Description": "32 GB Digital Assistant with high-resolution color screen",
"Name": "Comfort Easy",
"DateOfSale": "2017-03-02",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1022.jpg",
"Status": "Available",
"Quantity": 30,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1679,
"Width": 84,
"Depth": 1.5,
"Height": 14,
"DimUnit": "cm"
},
{
"ProductId": "HT-1023",
"Category": "Accessories",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Technocom",
"WeightMeasure": 0.8,
"WeightUnit": "KG",
"Description": "64 GB Digital Assistant with high-resolution color screen and synthesized voice output",
"Name": "Comfort Senior",
"DateOfSale": "2017-02-25",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1023.jpg",
"Status": "Available",
"Quantity": 24,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 512,
"Width": 80,
"Depth": 1.6,
"Height": 13,
"DimUnit": "cm"
},
{
"ProductId": "HT-1030",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 21,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 1920 x 1080 @ 85Hz, Dot Pitch: 0.27mm",
"Name": "Ergo Screen E-I",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1030.jpg",
"Status": "Available",
"Quantity": 14,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 230,
"Width": 37,
"Depth": 12,
"Height": 36,
"DimUnit": "cm"
},
{
"ProductId": "HT-1031",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 21,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 1920 x 1200 @ 85Hz, Dot Pitch: 0.26mm",
"Name": "Ergo Screen E-II",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1031.jpg",
"Status": "Available",
"Quantity": 24,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 285,
"Width": 40.8,
"Depth": 19,
"Height": 43,
"DimUnit": "cm"
},
{
"ProductId": "HT-1032",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 21,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 2560 x 1440 @ 85Hz, Dot Pitch: 0.25mm",
"Name": "Ergo Screen E-III",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1032.jpg",
"Status": "Available",
"Quantity": 50,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 345,
"Width": 40.8,
"Depth": 19,
"Height": 43,
"DimUnit": "cm"
},
{
"ProductId": "HT-1035",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 14,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 1600 x 1200 @ 85Hz, Dot Pitch: 0.24mm",
"Name": "Flat Basic",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1035.jpg",
"Status": "Available",
"Quantity": 23,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 399,
"Width": 39,
"Depth": 20,
"Height": 41,
"DimUnit": "cm"
},
{
"ProductId": "HT-1036",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 15,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 2048 x 1080 @ 85Hz, Dot Pitch: 0.26mm",
"Name": "Flat Future",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1036.jpg",
"Status": "Available",
"Quantity": 22,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 430,
"Width": 45,
"Depth": 26,
"Height": 46,
"DimUnit": "cm"
},
{
"ProductId": "HT-1037",
"Category": "Flat Screen Monitors",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Very Best Screens",
"WeightMeasure": 17,
"WeightUnit": "KG",
"Description": "Optimum Hi-Resolution max. 2016 x 1512 @ 85Hz, Dot Pitch: 0.24mm",
"Name": "Flat XL",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1037.jpg",
"Status": "Available",
"Quantity": 23,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 1230,
"Width": 54.5,
"Depth": 22.1,
"Height": 39.1,
"DimUnit": "cm"
},
{
"ProductId": "HT-1040",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Alpha Printers",
"WeightMeasure": 32,
"WeightUnit": "KG",
"Description": "Print 2400 dpi image quality color documents at speeds of up to 32 ppm (color) or 36 ppm (monochrome), letter/A4. Powerful 500 MHz processor, 512MB of memory",
"Name": "Laser Professional Eco",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1040.jpg",
"Status": "Available",
"Quantity": 21,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 830,
"Width": 51,
"Depth": 46,
"Height": 30,
"DimUnit": "cm"
},
{
"ProductId": "HT-1041",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Alpha Printers",
"WeightMeasure": 23,
"WeightUnit": "KG",
"Description": "Up to 22 ppm color or 24 ppm monochrome A4/letter, powerful 500 MHz processor and 128MB of memory",
"Name": "Laser Basic",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1041.jpg",
"Status": "Available",
"Quantity": 8,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 490,
"Width": 48,
"Depth": 42,
"Height": 26,
"DimUnit": "cm"
},
{
"ProductId": "HT-1042",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Alpha Printers",
"WeightMeasure": 17,
"WeightUnit": "KG",
"Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with Available first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color",
"Name": "Laser Allround",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1042.jpg",
"Status": "Available",
"Quantity": 9,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 349,
"Width": 53,
"Depth": 50,
"Height": 65,
"DimUnit": "cm"
},
{
"ProductId": "HT-1050",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Alpha Printers",
"WeightMeasure": 3,
"WeightUnit": "KG",
"Description": "4800 dpi x 1200 dpi - up to 35 ppm (mono) / up to 34 ppm (color) - capacity: 250 sheets - Hi-Speed USB, Ethernet",
"Name": "Ultra Jet Super Color",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1050.jpg",
"Status": "Available",
"Quantity": 17,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 139,
"Width": 41,
"Depth": 41,
"Height": 28,
"DimUnit": "cm"
},
{
"ProductId": "HT-1051",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Printer for All",
"WeightMeasure": 1.9,
"WeightUnit": "KG",
"Description": "1000 dpi x 1000 dpi - up to 35 ppm (mono) / up to 34 ppm (color) - capacity: 250 sheets - Hi-Speed USB - excellent dimensions for the small office",
"Name": "Ultra Jet Mobile",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1051.jpg",
"Status": "Available",
"Quantity": 18,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 99,
"Width": 46,
"Depth": 32,
"Height": 25,
"DimUnit": "cm"
},
{
"ProductId": "HT-1052",
"Category": "Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Printer for All",
"WeightMeasure": 18,
"WeightUnit": "KG",
"Description": "4800 dpi x 1200 dpi - up to 35 ppm (mono) / up to 34 ppm (color) - capacity: 250 sheets - Hi-Speed USB2.0, Ethernet",
"Name": "Ultra Jet Super Highspeed",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1052.jpg",
"Status": "Available",
"Quantity": 25,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 170,
"Width": 41,
"Depth": 41,
"Height": 28,
"DimUnit": "cm"
},
{
"ProductId": "HT-1055",
"Category": "Multifunction Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Printer for All",
"WeightMeasure": 6.3,
"WeightUnit": "KG",
"Description": "1000 dpi x 1000 dpi - up to 16 ppm (mono) / up to 15 ppm (color)- capacity 80 sheets - scanner (216 x 297 mm, 1200dpi x 2400dpi)",
"Name": "Multi Print",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1055.jpg",
"Status": "Available",
"Quantity": 16,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 99,
"Width": 55,
"Depth": 45,
"Height": 29,
"DimUnit": "cm"
},
{
"ProductId": "HT-1056",
"Category": "Multifunction Printers",
"MainCategory": "Printers & Scanners",
"TaxTarifCode": "1",
"SupplierName": "Printer for All",
"WeightMeasure": 4.3,
"WeightUnit": "KG",
"Description": "1200 dpi x 1200 dpi - up to 25 ppm (mono) / up to 24 ppm (color)- capacity 80 sheets - scanner (216 x 297 mm, 2400dpi x 4800dpi, high resolution)",
"Name": "Multi Color",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1056.jpg",
"Status": "Available",
"Quantity": 5,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 119,
"Width": 51,
"Depth": 41.3,
"Height": 22,
"DimUnit": "cm"
},
{
"ProductId": "HT-1060",
"Category": "Mice",
"MainCategory": "Computer Components",
"TaxTarifCode": "1",
"SupplierName": "Oxynum",
"WeightMeasure": 0.09,
"WeightUnit": "KG",
"Description": "Cordless Optical USB Mice, Laptop, Color: Black, Plug&Play",
"Name": "Cordless Mouse",
"ProductPicUrl": "test-resources/sap/ui/demokit/explored/img/HT-1060.jpg",
"Status": "Available",
"Quantity": 25,
"UoM": "PC",
"CurrencyCode": "EUR",
"Price": 9,
"Width": 6,
"Depth": 14.5,
"Height": 3.5,
"DimUnit": "cm"
}]}
this is the code I've been using and when I execute it I get this error :
**SCRIPT5022: failed to load 'null/App.js' from ../../resources/null/App.js: 404 - Not Found
HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). (XHR)GET - https://webidetesting4688865-p2000413989trial.dispatcher.hanatrial.ondemand.com/resources/null/App.js**
and I get a blank screen
could you please tell me what's wrong with the code??
PS: Please Comment if you feel the information provided us inadequate
