<!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://cloud.tinymce.com/stable/tinymce.min.js?apiKey=kazemlvxdha0ybe1teirg0ptha0icyxtujq64ordedixm0gj"></script>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
</script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</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
}
]
}
]
}
}
<sap.ui.core.mvc:View controllerName="view.Main"
xmlns="sap.m"
xmlns:c="sap.ui.core"
xmlns:sap.ui.core.mvc="sap.ui.core.mvc" xmlns:uxap="sap.uxap"
xmlns:semantic="sap.m.semantic"
xmlns:l="sap.ui.layout"
xmlns:rte="sap.ui.richtexteditor"
xmlns:f="sap.ui.layout.form" >
<Page title="This is a SAPUI5 MVC example">
<ObjectHeader id="idDetailPage" responsive="true" fullScreenOptimized="false" intro="{DisplayName}" title="{Title}" number="" numberUnit=""
numberState="Success" backgroundDesign="Translucent">
<attributes>
<ObjectAttribute title="JobCode" text="{JobCode}"/>
<ObjectAttribute title="SubType" text="{SubType}"/>
<ObjectAttribute id="idEffectiveDate" title="Effective Date"/>
</attributes>
<headerContainer>
<IconTabBar id="itb1" selectedKey="key1" upperCase="true" class="sapUiResponsiveContentPadding">
<items>
<IconTabFilter text="Active" count="" key="key1" id="editSubType">
<content>
<!-- <rte:RichTextEditor id="idRTE" width="100%" height="600px" value="{Text}" customToolbar="false"
showGroupFont="false" useLegacyTheme="true" showGroupLink="false" showGroupInsert="false" editorType="TinyMCE4"
beforeEditorInit="beforeEditorInit"></rte:RichTextEditor>-->
<!-- <c:HTML preferDOM="true" content="<TextArea id="idRTE" required="true" id="idRTE" width="100%" height="100%"></TextArea>" />-->
<!--<l:VerticalLayout id="idRTE" class="sapUiContentPadding" width="100%"></l:VerticalLayout>-->
<l:VerticalLayout id="idVerticalLayout" class="sapUiContentPadding" width="100%"></l:VerticalLayout>
</content>
</IconTabFilter>
<IconTabFilter text="Future" key="key2" visible="false">
</IconTabFilter>
</items>
</IconTabBar>
</headerContainer>
</ObjectHeader>
</Page>
</sap.ui.core.mvc:View>
sap.ui.define(['view.main'], function (Controller){
"use strict";
return Controller.extend("sap.ui.richtexteditor.sample.RichTextEditor.controller.RichTextEditor", {
onInit: function() {
var that = this,
sHtmlValue = '<p style="text-align: justify; background: white; font-size: 10pt; font-family: Calibri, sans-serif;"><strong><span style="font-size: 10.5pt; font-family: sans-serif; color: black;">Lorem ipsum dolor sit amet</span></strong>' +
'<span style="font-size: 10.5pt; font-family: sans-serif; color: black;">, consectetur adipiscing elit. Suspendisse ornare, nibh nec gravida tincidunt, ipsum quam venenatis nisl, vitae venenatis urna sem eget ipsum. Ut cursus auctor leo et vulputate. ' +
'Curabitur nec pretium odio, sed auctor felis. In vehicula, eros aliquam pharetra mattis, ante mi fermentum massa, nec pharetra arcu massa finibus augue. </span></p> ' +
'<p style="margin: 0in 0in 11.25pt; text-align: justify; background: white; font-size: 10pt; font-family: Calibri, sans-serif;"><img style="float: left; padding-right: 1em;" src="http://monliban.org/images/1473838236_274706_l_srgb_s_gl_465881_large.jpg" width="304" height="181" />' +
'<span style="font-size: 10.5pt; font-family: sans-serif; color: #0070c0;">Phasellus imperdiet metus est, in luctus erat fringilla ut. In commodo magna justo, sit amet ultrices ipsum egestas quis.</span><span style="font-size: 10.5pt; font-family: sans-serif; color: black;"> ' +
'Nullam ac mauris felis. Sed tempor odio diam, nec ullamcorper lacus laoreet vitae. <strong>Aenean quam libero</strong>, varius eu ex eu, aliquet fermentum orci. Donec eget ante sed enim pretium tempus. <strong><em>Aliquam semper neque eu aliquam dictum</em></strong>. ' +
'Nulla in convallis diam. Fusce molestie risus nec posuere ullamcorper. Fusce ut sodales tortor. <u>Morbi eget odio a augue viverra semper.</u></span></p>' +
'<p style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Fusce dapibus sodales ornare. ' +
'Nullam ac mauris felis. Sed tempor odio diam, nec ullamcorper lacus laoreet vitae. Aenean quam libero, varius eu ex eu, aliquet fermentum orci. Donec eget ante sed enim pretium tempus. Nullam laoreet metus ac enim placerat, nec tempor arcu finibus. ' +
'Curabitur nec pretium odio, sed auctor felis. Nam eu neque faucibus, pharetra purus id, congue elit. Phasellus neque lectus, gravida at cursus at, pretium eu lorem. </span></p>' +
'<ul>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Nulla non elit hendrerit, auctor arcu sit amet, tempor nisl.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Morbi sed libero pulvinar, maximus orci et, hendrerit orci.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Phasellus sodales enim nec sapien commodo mattis.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Integer laoreet eros placerat pharetra euismod.</span></li>' +
'</ul>' +
'<p style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #c00000;">Ut vitae commodo ante. Morbi nibh dolor, ullamcorper sed interdum id, molestie vel libero. ' +
'Proin volutpat dui eget ipsum scelerisque, a ullamcorper ipsum mattis. Cras sed elit sit amet diam convallis vehicula vitae ut nisl. Ut ornare dui ligula, id euismod lectus eleifend at. Nulla facilisi. In pharetra lectus et augue consequat vestibulum.</span></p>' +
'<ol>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Proin id eros vel libero maximus dignissim ac et velit.</span></li>' +
'<li style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">In non odio pharetra, dapibus augue quis, laoreet felis.</span></li>' +
'</ol>' +
'<p style="font-size: 10pt; font-family: Calibri, sans-serif;"><span style="font-family: sans-serif; color: #353535;">Donec a consectetur libero. Donec ut massa justo. Duis euismod varius odio in rhoncus. Nullam sagittis enim vel massa tempor, ' +
'ut malesuada libero mollis. Vivamus dictum diam diam, quis rhoncus ex congue vel.</span></p>' +
'<p style="text-align: center; font-size: 10pt; font-family: Calibri, sans-serif;" align="center"><em><span style="font-family: sans-serif; color: #a6a6a6;">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</span></em></p>' +
'<p style="text-align: right; font-size: 10pt; font-family: Calibri, sans-serif;" align="right"><span style="font-family: sans-serif; color: #353535;">-</span> <strong><span style="font-family: sans-serif; color: #353535;">Sed in lacus dolor.</span></strong></p>';
sap.ui.require(["sap/ui/richtexteditor/RichTextEditor", "sap/ui/richtexteditor/EditorType"],
function (RTE, EditorType) {
var oRichTextEditor = new RTE("myRTE", {
editorType: EditorType.TinyMCE4,
width: "100%",
height: "600px",
customToolbar: true,
showGroupFont: true,
showGroupLink: true,
showGroupInsert: true,
value: sHtmlValue,
ready: function () {
this.addButtonGroup("styleselect").addButtonGroup("table");
}
});
that.getView().byId("idVerticalLayout").addContent(oRichTextEditor);
});
}
});
});