on 11-20-2012 1:49 PM
Hello,
I'm trying to get data into a simple table.
I've used the following tutorial to get the basic layout for the table and the layout:
As you can see it uses an oData connection.
But I want to get the following data into the same table.
I have the following XML:
or JSON Data:
{"RESULTS":[
{"RESULT":{"TGROUP":"0001","TGROUP_TXT":"Hogeschool/Universitair"}},
{"RESULT":{"TGROUP":"0002","TGROUP_TXT":"Stagiairs"}},
{"RESULT":{"TGROUP":"0003","TGROUP_TXT":"Starters/pas afgestudeerden"}},
{"RESULT":{"TGROUP":"0004","TGROUP_TXT":"Leidinggevenden/directie"}},
{"RESULT":{"TGROUP":"0005","TGROUP_TXT":"Specialisten"}},
{"RESULT":{"TGROUP":"0006","TGROUP_TXT":"ICT"}},
{"RESULT":{"TGROUP":"0007","TGROUP_TXT":"Technici"}},
{"RESULT":{"TGROUP":"0008","TGROUP_TXT":"Arbeiders"}},
{"RESULT":{"TGROUP":"0009","TGROUP_TXT":"Zorg"}},
{"RESULT":{"TGROUP":"0010","TGROUP_TXT":"Maatschappelijk werk"}},
{"RESULT":{"TGROUP":"0011","TGROUP_TXT":"Hoger onderwijs"}},
{"RESULT":{"TGROUP":"0012","TGROUP_TXT":"Kleuter/lager onderwijs"}},
{"RESULT":{"TGROUP":"0013","TGROUP_TXT":"Shared Service"}}]}
I have found the following test code:
var oTable = sap.ui.getCore().byId("table");
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
firstName: "Peter",
lastName: "Pan"
});
oModel.loadData("data.json");
oTable.setModel(oModel);
rPannel.addContent(oTable);
layout.createRow(rPannel);
this.addContent(layout);
But I don't know if this is correct, nor don't I know how to build the table. Or how to structure the data if it's coming from the online xml or json.
Kind regards,
Vincent
Hi Vincent,
Please find the HTML code below.
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>Table example</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>
<script>
// create the DataTable control
var oTable = new sap.ui.table.Table({editable:true});
// define the Table columns
var oControl = new sap.ui.commons.TextView({text:"{RESULT/TGROUP}"}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Group"}), template: oControl }));
var oControl = new sap.ui.commons.TextView({text:"{RESULT/TGROUP_TXT}"}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Group Text"}), template: oControl }));
var aData =
{"RESULTS":[
{"RESULT":{"TGROUP":"0001","TGROUP_TXT":"Hogeschool/Universitair"}},
{"RESULT":{"TGROUP":"0002","TGROUP_TXT":"Stagiairs"}},
{"RESULT":{"TGROUP":"0003","TGROUP_TXT":"Starters/pas afgestudeerden"}},
{"RESULT":{"TGROUP":"0004","TGROUP_TXT":"Leidinggevenden/directie"}},
{"RESULT":{"TGROUP":"0005","TGROUP_TXT":"Specialisten"}},
{"RESULT":{"TGROUP":"0006","TGROUP_TXT":"ICT"}},
{"RESULT":{"TGROUP":"0007","TGROUP_TXT":"Technici"}},
{"RESULT":{"TGROUP":"0008","TGROUP_TXT":"Arbeiders"}},
{"RESULT":{"TGROUP":"0009","TGROUP_TXT":"Zorg"}},
{"RESULT":{"TGROUP":"0010","TGROUP_TXT":"Maatschappelijk werk"}},
{"RESULT":{"TGROUP":"0011","TGROUP_TXT":"Hoger onderwijs"}},
{"RESULT":{"TGROUP":"0012","TGROUP_TXT":"Kleuter/lager onderwijs"}},
{"RESULT":{"TGROUP":"0013","TGROUP_TXT":"Shared Service"}}]}
;
// create a JSONModel, fill in the data and bind the Table to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(aData);
oTable.setModel(oModel);
oTable.bindRows("/RESULTS");
// finally place the Table into the UI
oTable.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Vincent,
in Venkatesh's example you can just replace
var aData = ...
oModel.setData(aData);
with:
jQuery.ajax({
url: "/path/to/data.json", // for different servers cross-domain restrictions need to be handled
dataType: "json",
success: function(data, textStatus, jqXHR) { // callback called when data is received
oModel.setData({data: data}); // fill the received data into the JSONModel
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error occurred");
}
});
Regards
Andreas
Hey Andreas
Was just curious: how does this use of jQuery.ajax compare with the SAPUI5 loadData method of sap.ui.model.json.JSONModel? Or did you just use the explicit ajax() call to highlight handling errors, etc?
cheers
dj
Hello Andreas,
I think we are getting closer to the final result I'm looking for.
I have Implemented your code like this
But it is still not showing anything except for the errors.
Other information:
The link is via VPN so you will not be able to access it from your location but in FF the output looks like this:
{"RESULTS":[
{"RESULT":{"POSTING":"00505686209A1ED285EE08B57B223FB1","TITLE":"Test requisition Remsis","LANGUAGE":"en"}},
{"RESULT":{"POSTING":"00505686209A1ED283D768A973517FB1","TITLE":"Bouwkundige","LANGUAGE":"en"}},
{"RESULT":{"POSTING":"00505686209A1ED283D76F64FE01BFB1","TITLE":"Assistant Broker","LANGUAGE":"en"}},
{"RESULT":{"POSTING":"00505686209A1ED283D78AA0000BFFB1","TITLE":"Dynamic Implementation Engineer","LANGUAGE":"en"}},
{"RESULT":{"POSTING":"00505686209A1ED283D797A35D6A9FB1","TITLE":"Legacy Functionality Developer","LANGUAGE":"en"}},
{"RESULT":{"POSTING":"00505686209A1ED283D7A36F559F7FB1","TITLE":"Diensthoofd Preventieadviseur","LANGUAGE":"en"}},
{"RESULT":{"POSTING":"00505686209A1ED283D7A8EFC6559FB1","TITLE":"Senior Configuration LiasonSenior Configuration LiasonSenior Configuration LiasonSenior Configuration LiasonSenior Configuration LiasonSenior Configuration Liason","LANGUAGE":"en"}}]}
And I debugged the call to the SAP Backend via Firebug and it gives me back an OK as you can see below or via this http://i.imgur.com/utiWq.png , but the answer (antwoord) is empty.
Kind regards,
Vincent
Hi Vincent
Permit me to have a go at replying.
With the code you used (http://pastie.org/5437098) there are couple of small issues:
(1) you didn't declare the oModel
(2) the oModel.setData({data: data}) call is setting the data, but not as you're expecting to bind to it (bearing in mind you're about to call bindRows with "/RESULTS".
To fix (1), just add the declaration like this:
var oModel = new sap.ui.model.json.JSONModel();
To fix (2), the easiest way would be to adjust the JSON you're supplying in the setData() call to something like this:
oModel.setData(data);
so that the bindRows() call finds the records.
To be extreme, and to underline how this works, you could also specify the following in the setData() call:
oModel.setData({RESULTS: data.RESULTS});
but that would be of course crazy ... although it sort of illustrates the relationship 🙂
cheers
dj
Hello DJ,
Again much thanks for your input into this mather, do you have access to a JSON link yourself for testing purposes?
Since the link I use for testing, works perfectly in FF (just shows the data in the window), but with the JQuery I don't get any return message in the SAPUI5 or via Firebug.
So I'm wondering if the code is the problem or my link is the problem.
The updated code looks like this: http://pastie.org/5437820
I would appreciate it if someone could test the code with another JSON link.
Kind regards & thanks again for the fast reply,
Vincent
Yes, I used my own copy of your JSON, served it from my own domain.
So I took your latest code, changed the URL from
http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/yr_hot_jobs
to
http://www.pipetree.com/qmacro/scratchpad/vincent.json
and started Chrome with --disable-web-security (as Andreas said previously: "for different servers cross-domain restrictions need to be handled")
I got the data OK.
Also it works within the Eclipse-local web browser, which is IE based:
dj
Hey Vincent,
You're experiencing XSS issues with the JSON calls.
You can work around this by packing your request. http://remysharp.com/2007/10/08/what-is-jsonp/
Add a parameter to your jQuery call: callback=?
If you have access to the backend coding, you can simply wrap the response
READ TABLE me->parameters INTO lw_param_format WITH KEY name = 'callback'.
IF sy-subrc IS INITIAL.
CONCATENATE lw_param_format-value '(' lv_result ')' INTO lv_result.
ENDIF.
Hello Andreas Kunz
What if I want to post now, I have edited your code like this:
var aData =
jQuery.ajax({
type: "POST",
contentType: "application/xml",
url: "http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post", // for different servers cross-domain restrictions need to be handled
data: {firstname:"ezfzef",lastname:"efzefzef",callback:"?"},
dataType: "json",
success: function(xml) { // callback called when data is received
//oModel.setData(data); // fill the received data into the JSONModel
alert("success to post");
},
error: function(xml) { // callback called when data is received
//oModel.setData(data); // fill the received data into the JSONModel
alert("fail to post");
alert(xml);
}
});
But I'm not able to get data into the system, I've tested the link via SOAPUI (a tool for webservice testing, and it worked).
The only error I get back from SAP via Firebug is this one:
NetworkError: 405 Method not allowed - http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post
Kind regards,
Vincent
I am using the Below code ......y its not working Error is comming ........if the cross browser is the issue for this code ,,,,,then tell me how to disable the cross domain issue in browser Friend
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAPUI5 Conditional Databinding</title>
<script src="resources/sap-ui-core.js"
type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_goldreflection">
</script>
<script>
jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['ERROR']);
// create the DataTable control
var oTable = new sap.ui.table.Table({editable:true});
// define the Table columns
var oControl = new sap.ui.commons.TextView({text:"{RESULT/POSTING}"}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Posting"}), template: oControl }));
var oControl = new sap.ui.commons.TextView({text:"{RESULT/TITLE}"}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Title"}), template: oControl }));
var oModel = new sap.ui.model.json.JSONModel();
var aData =
jQuery.ajax({
url: "http://www.pipetree.com/qmacro/scratchpad/vincent.json", // for different servers cross-domain restrictions need to be handled
dataType: "json",
success: function(data, textStatus, jqXHR) { // callback called when data is received
oModel.setData(data); // fill the received data into the JSONModel
alert("sparta");
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error");
}
});
oTable.setModel(oModel);
oTable.bindRows("/RESULTS");
// finally place the Table into the UI
oTable.placeAt("dataTable");
</script>
</head>
<body class="sapUiBody">
<h1>SAPUI5 Conditional Databinding</h1>
<div id="dataTable"></div>
</body>
</html>
As u said DJ this time i disable my websecurity and run this code its success 😕 buttttttttt i get alert msg SPARTA.......but i dnt get JSON data inside the table why DJ ?
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SAPUI5 Conditional Databinding</title>
<script src="resources/sap-ui-core.js"
type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_goldreflection">
</script>
<script>
jQuery.sap.log.setLevel(jQuery.sap.log.LogLevel['ERROR']);
// create the DataTable control
var oTable = new sap.ui.table.Table({editable:true});
// define the Table columns
var oControl = new sap.ui.commons.TextView({text:"{RESULT/POSTING}"}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Group"}), template: oControl }));
var oControl = new sap.ui.commons.TextView({text:"{RESULT/TITLE}"}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Group Text"}), template: oControl }));
var oModel = new sap.ui.model.json.JSONModel();
var aData =
jQuery.ajax({
url: "http://www.pipetree.com/qmacro/scratchpad/vincent.json", // for different servers cross-domain restrictions need to be handled
dataType: "json",
success: function(data, textStatus, jqXHR) { // callback called when data is received
oModel.setData(data);
//oModel.setData({data: data}); // fill the received data into the JSONModel
alert("sparta");
},
error: function(jqXHR, textStatus, errorThrown) {
alert(jqXHR);
alert(textStatus);
alert(errorThrown);
}
});
oTable.setModel(oModel);
oTable.bindRows("/RESULTS");
// finally place the Table into the UI
oTable.placeAt("dataTable");
</script>
</head>
<body class="sapUiBody">
<h1>SAPUI5 Conditional Databinding</h1>
<div id="dataTable"></div>
</body>
</html>
K.Shri Vishnu Priyan: Shri Vishnu Priyan Krishnamurthy
Example:- A Programme to get JASON data in SAPUI5
Reference: OpenWeatherMap free weather API
Chandrashekhar Mahajan: http://scn.sap.com/people/chandrashekhar.mahajan
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[SAPUI5 App based on Open Weather Map JSON API]" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' charset='utf-8' />
<title>Weather Forecast Using OpenWeatherMap API</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_platinum'
data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>
<script>
//Create a matrix layout with 2 columns
var oMatrixHead = new sap.ui.commons.layout.MatrixLayout({
layoutFixed : true,
width : '300px',
columns : 2
});
oMatrixHead.setWidths('100px', '200px');
//Create a header
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
colSpan : 3
});
oCell.addContent(new sap.ui.commons.TextView({
text : 'SAPUI5 App based on Open Weather Map JSON Search API',
design : sap.ui.commons.TextViewDesign.H1
}));
oMatrixHead.createRow(oCell);
//Create Matrix layout
var oLabel = new sap.ui.commons.Label({
text : 'City'
});
var oInputQuery = new sap.ui.commons.TextField({
value : '',
width : '100%',
required : true
});
oLabel.setLabelFor(oInputQuery);
oMatrixHead.createRow(oLabel, oInputQuery);
//Create a standard divider
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
colSpan : 2
});
oCell.addContent(new sap.ui.commons.HorizontalDivider());
oMatrixHead.createRow(oCell);
// Attach the layout to the page
oMatrixHead.placeAt("content");
// create matrix layout
var oMatrix = new sap.ui.commons.layout.MatrixLayout({
id : 'matrix',
layoutFixed : false,
columns : 3,
});
// create a JSONModel, fill in the data and bind the Table to this model
var oModel = new sap.ui.model.json.JSONModel();
// create button
var oButtonSearch = new sap.ui.commons.Button(
{
text : "Search",
tooltip : "Search",
press : function() {
var qString = oInputQuery.getValue();
//Validation for Query String
if (qString == '') {
alert('City cannot be blank');
return false;
}
// service url for Open Weather Map JSON API
var url = 'http://api.openweathermap.org/data/2.5/weather?q='
+ qString
+ '&mode=json&units=metric&callback=getJSON';
//Ajax Call with Callback function and JSONP data type
$
.ajax({
url : url,
jsonpCallback : 'getJSON',
contentType : "application/json",
dataType : 'jsonp',
success : function(data, textStatus, jqXHR) {
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
oMatrix.setVisible(true);
//Lable and TextField for City
oLabelCity = new sap.ui.commons.Label({
id : 'L-City',
text : 'City'
});
oTFCity = new sap.ui.commons.TextField({
id : 'TF-City',
tooltip : 'City',
editable : false,
value : '{/name}',
width : '200px'
});
oLabelCity.setLabelFor(oTFCity);
oMatrix.createRow(oLabelCity, oTFCity);
//Lable and TextField for Country
oLabelCountry = new sap.ui.commons.Label({
id : 'L-Elev',
text : 'Country'
});
oTFCountry = new sap.ui.commons.TextField({
id : 'TF-Elev',
tooltip : 'Country',
editable : false,
value : '{/sys/country}',
width : '200px'
});
oLabelCountry.setLabelFor(oTFCountry);
oMatrix.createRow(oLabelCountry, oTFCountry);
//Lable and TextField for Latitute
oLabelLat = new sap.ui.commons.Label({
id : 'L-Lat',
text : 'Latitude'
});
oTFLat = new sap.ui.commons.TextField({
id : 'TF-Lat',
tooltip : 'Latitude',
editable : false,
value : '{/coord/lat}',
width : '200px'
});
oLabelLat.setLabelFor(oTFLat);
oMatrix.createRow(oLabelLat, oTFLat);
//Lable and TextField for longitude
oLabelLon = new sap.ui.commons.Label({
id : 'L-Lon',
text : 'Longitude'
});
oTFLon = new sap.ui.commons.TextField({
id : 'TF-Lon',
tooltip : 'Longitude',
editable : false,
value : '{/coord/lon}',
width : '200px'
});
oLabelLon.setLabelFor(oTFLon);
oMatrix.createRow(oLabelLon, oTFLon);
//Create a standard divider
var oCell = new sap.ui.commons.layout.MatrixLayoutCell(
{
colSpan : 3
});
oCell
.addContent(new sap.ui.commons.HorizontalDivider());
oMatrix.createRow(oCell);
var imageIcon = oModel
.getProperty("/weather/0/icon");
var imageIconsrc = 'http://openweathermap.org/img/w/'
+ imageIcon + '.png';
//Weather image
var oImageWeather = new sap.ui.commons.Image(
{
src : imageIconsrc,
alt : '{/weather/0/icon}'
});
//Lable and TextField for weather
oLabelWeather = new sap.ui.commons.Label({
id : 'L-Weather',
text : 'Weather'
});
oTFWeather = new sap.ui.commons.TextField({
id : 'TF-Weather',
tooltip : 'Weather',
editable : false,
value : '{/weather/0/description}',
width : '200px'
});
oLabelWeather.setLabelFor(oTFWeather);
oMatrix.createRow(oLabelWeather,
oTFWeather, oImageWeather);
//Create a standard divider
var oCell = new sap.ui.commons.layout.MatrixLayoutCell(
{
colSpan : 3
});
oCell
.addContent(new sap.ui.commons.HorizontalDivider());
oMatrix.createRow(oCell);
//Lable and TextField for temp_c
oLabelTemp = new sap.ui.commons.Label({
id : 'L-Temp',
text : 'Temperature'
});
var tempstring = oModel
.getProperty("/main/temp");
//Append Degree Celsius unit symbol to Temperature reading
var tempinC = tempstring + "\u2103";
oTFTemp = new sap.ui.commons.TextField({
id : 'TF-Temp',
tooltip : 'Temperature',
editable : false,
value : tempinC,
width : '220px'
});
oLabelTemp.setLabelFor(oTFTemp);
oMatrix.createRow(oLabelTemp, oTFTemp);
var date = oModel.getProperty("/dt");
var dt = new Date(date * 1000);
var hr = dt.getHours();
if (hr < 10)
hr = '0' + hr;
var mn = dt.getMinutes();
if (mn < 10)
mn = '0' + mn;
var mon = dt.getMonth() + 1;
if (mon < 10)
mon = '0' + mon;
var day = dt.getDate();
if (day < 10)
day = '0' + day;
var year = dt.getFullYear();
var obs_time = year + '.' + mon + '.' + day
+ ' ' + hr + ':' + mn;
//Lable and TextField for Obervation Time
oLabelObsTime = new sap.ui.commons.Label({
id : 'L-ObsTime',
text : 'Observation Time'
});
oTFObsTime = new sap.ui.commons.TextField({
id : 'TF-ObsTime',
tooltip : 'Observation Time',
editable : false,
value : obs_time,
width : '220px'
});
oLabelObsTime.setLabelFor(oTFObsTime);
oMatrix
.createRow(oLabelObsTime,
oTFObsTime);
var sunrise = oModel
.getProperty("/sys/sunrise");
var dt_sr = new Date(sunrise * 1000);
var hr_sr = dt_sr.getHours();
if (hr_sr < 10)
hr_sr = '0' + hr_sr;
var mn_sr = dt_sr.getMinutes();
if (mn_sr < 10)
mn_sr = '0' + mn;
var sunrise_time = (hr_sr + ':' + mn_sr + ' AM');
//Lable and TextField for Sunrise
oLabelLclTime = new sap.ui.commons.Label({
id : 'L-LclTime',
text : 'Sunrise'
});
oTFLclTime = new sap.ui.commons.TextField({
id : 'TF-LclTime',
tooltip : 'Sunrise',
editable : false,
value : sunrise_time,
width : '220px'
});
oLabelLclTime.setLabelFor(oTFLclTime);
oMatrix
.createRow(oLabelLclTime,
oTFLclTime);
var sunset = oModel
.getProperty("/sys/sunset");
var dt = new Date(sunset * 1000);
var hr = dt.getHours();
if (hr < 10)
hr = '0' + hr;
var mn = dt.getMinutes();
if (mn < 10)
mn = '0' + mn;
var sunset_time = (hr + ':' + mn + ' PM');
//Lable and TextField for Sunset
oLabelSunsetTime = new sap.ui.commons.Label(
{
id : 'L-SunsetTime',
text : 'Sunset'
});
oTFSunsetTime = new sap.ui.commons.TextField(
{
id : 'TF-SunsetTime',
tooltip : 'Sunset',
editable : false,
value : sunset_time,
width : '220px'
});
oLabelSunsetTime.setLabelFor(oTFSunsetTime);
oMatrix.createRow(oLabelSunsetTime,
oTFSunsetTime);
//Lable and TextField for relative humidity
oLabelRelHum = new sap.ui.commons.Label({
id : 'L-RelHum',
text : 'Humidity'
});
oTFRelHum = new sap.ui.commons.TextField({
id : 'TF-RelHum',
tooltip : 'Humidity',
editable : false,
value : '{/main/humidity}',
width : '220px'
});
oLabelRelHum.setLabelFor(oTFRelHum);
oMatrix.createRow(oLabelRelHum, oTFRelHum);
//Lable and TextField for Wind
oLabelWind = new sap.ui.commons.Label({
id : 'L-Wind',
text : 'Wind'
});
oTFWind = new sap.ui.commons.TextField({
id : 'TF-Wind',
tooltip : 'Wind',
editable : false,
value : '{/wind/speed}',
width : '220px'
});
oLabelWind.setLabelFor(oTFWind);
oMatrix.createRow(oLabelWind, oTFWind);
//attach it to some element in the page
oMatrix.placeAt('content');
}
});
}
});
// attach it to some element in the page
oButtonSearch.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hello,
I am new in SAPUI 5 world and searching for the same thing as Vincent. But instead of JSON data type I am using XML.
"Rss_Reader.xml"
<Rss_Reader>
<news>
<Editor>Rahul</Editor>
<Date>19 jan 2013 </Date>
<Headline>SAPUI5</Headline>
<Description>Started Working on this new Platform</Description>
</news>
<news>
<Editor>Rex</Editor>
<Date>18 jan 2013 </Date>
<Headline>SAPUI</Headline>
<Description>Platform</Description>
</news>
</Rss_Reader>
and using the following UI5 specifics
var oModel = new sap.ui.model.xml.XMLModel();
oModel.loadData("RSSReader.xml");
instead of AJAX
To check I am using the code :
Var oData = oModel.getProperty("Editor");
alert(oData.value);
Thanks in advance
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Rahul
I might have misunderstood what you're trying to do, but all you need to do is specify the correct path to the property. I implemented a little data table and assigned an XML data model to it, with the XML above as the source.
var oModel = new sap.ui.model.xml.XMLModel();
oModel.loadData("rssreader.xml", "", false);
sap.ui.getCore().setModel(oModel);
oTable.bindRows("/news");
oTable.placeAt("dataTable");
Screenshot attached
dj
I 've been trying to make this code work , but i don't know why i can't get any data , can anyone please run it and tell me if it works , thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="./resources/sap-ui-core.js" type="text/javascript"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.ux3, sap.ui.commons, sap.ui.table"
data-sap-ui-theme="sap_goldreflection">
</script>
<script type="text/javascript">
// Create a SAP UI5 shell element
var oShell = new sap.ui.ux3.Shell("newsAppShell", {
appIcon : "http://www.sap.com/global/images/SAPLogo.gif",
showSearchTool:false,
appTitle : "news", });
// Just take the shell and place it in the html area called shellArea
oShell.placeAt("shellArea");
sap.ui.localResources("sitmil");
var layout = new sap.ui.commons.layout.MatrixLayout('layout');
layout.setWidth('80%');
// Pannel for Results
var rPannel = new sap.ui.commons.Panel('rPannel');
// Result Pannel
var rTitle = new sap.ui.commons.Title('rTitle');
rTitle.setText('News');
rPannel.setTitle(rTitle);
// Data table
var oTable = new sap.ui.table.DataTable();
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Editor"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Editor"),
sortProperty: "Editor"
}));
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Date"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Date"),
sortProperty: "from"
}));
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Headline"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Headline" +
""),
sortProperty: "Headline"
}));
oTable.addColumn(
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Description1"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Description"),
sortProperty: "Description"
}));
var oModel = new sap.ui.model.xml.XMLModel();
var sXML = "<news><Editor>Rahul</Editor><Date>19 jan 2013 </Date><Headline>SAPUI5</Headline><Description>Started Working on this new Platform</Description></news>"
oModel.setXML(sXML);
oTable.setModel(oModel);
oTable.bindRows("/news");
// add oTable content to the resultPannel
rPannel.addContent(oTable);
layout.createRow(rPannel);
oShell.addContent(layout);
</script>
</head>
<body class="sapUiBody" role="application">
<div id="shellArea"></div>
</body>
</html>
Hi Reda,
Answered in the following post
http://scn.sap.com/thread/3456181
Thanks and Regards, Venkatesh
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Bump
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
101 | |
13 | |
13 | |
11 | |
11 | |
7 | |
6 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.