Hi Experts,
I am trying to show the data of a listitem in some input fields which are in a popover window. After clicking on the listitem the data of that listitem will automatically appear on the popover window. I am using sap.m library. I have coded
In view.js
createContent : function(oController) {
var list = new sap.m.List("list",{
headerText: "Contact List",
items: {
path: "/KEY",
//sorter : new sap.ui.model.Sorter("FIRSTNAME"),
template: new sap.m.ObjectListItem({
title: "{FIRSTNAME}",
number: "{PHONE}",
type: sap.m.ListType.Active,
press : function (evt) {
//var data = {};
context = evt.getSource().getBindingContext();
//var selectedIndex = data.context.sPath.split("/")[2];
//var Odata = data.context.oModel.oData.KEY[selectedIndex];
console.log(context);
popover1.openBy(this,context);
},
firstStatus : new sap.m.ObjectStatus({
text : "{EMAIL}",
state : "Success"
}),
/*secondStatus : new sap.m.ObjectStatus({
text : ,
state : "Success"
}),*/
attributes : [
new sap.m.ObjectAttribute({
text : "{LASTNAME}"
}),
new sap.m.ObjectAttribute({
text : "{ADDRESS}"
})
]
})
}
});
var popover = new sap.m.Popover({
title: "Add Contacts",
placement: sap.m.PlacementType.Top,
footer: new sap.m.Bar({
contentRight: [
new sap.m.Button({
text: "Save",
icon: "sap-icon://save",
press: function () {
var oParameters = ({
"Listid" : "List",
"First" : sap.ui.getCore().getElementById('First').getValue(),
"Phone" : sap.ui.getCore().getElementById('Phone').getValue(),
"Last" : sap.ui.getCore().getElementById('Last').getValue(),
"Email" : sap.ui.getCore().getElementById('Email').getValue(),
"Address" : sap.ui.getCore().getElementById('Address').getValue(),
"City" : sap.ui.getCore().getElementById('City').getValue(),
"State" : sap.ui.getCore().getElementById('State').getValue(),
"Zip" : sap.ui.getCore().getElementById('Zip').getValue(),
});
console.log(oParameters);
var url = "http://vikalp.webhop.net:8000/sap/bc/zrestateui5_lis?sap-client=800";
var model = new sap.ui.model.json.JSONModel();
$.ajax({
url : url ,
dataType : "jsonp",
type : "POST",
data: oParameters,
success: function(data,textStatus,jqXHR) {
data = JSON.parse(data);
console.log(data);
model.setData(data);
},
});
sap.ui.getCore().setModel(model);
popover.close();
}
})
],
contentLeft: [
new sap.m.Button({
text: "Close",
icon: "sap-icon://close",
press: function () {
popover.close();
}
})
],
}),
content: new sap.m.VBox({
//width:"300px",
items: [
new sap.m.Input("First",{
type: sap.m.InputType.Text,
placeholder: 'First Name',
width:"240px"
}),
new sap.m.Input('Phone',{
type: sap.m.InputType.Number,
placeholder: 'Phone No',
width:"240px"
}),
new sap.m.Input('Last',{
type: sap.m.InputType.Text,
placeholder: 'Last Name',
width:"240px"
}),
new sap.m.Input("Email",{
type: sap.m.InputType.Email,
placeholder: 'Email',
width:"240px"
}),
new sap.m.Input("Address",{
type: sap.m.InputType.Text,
placeholder: 'Address',
width:"240px"
}),
new sap.m.Input("City",{
type: sap.m.InputType.Text,
placeholder: 'City',
width:"240px"
}),
new sap.m.Input("State",{
type: sap.m.InputType.Text,
placeholder: 'State',
width:"240px"
}),
new sap.m.Input("Zip",{
type: sap.m.InputType.Text,
placeholder: 'Zipcode',
width:"240px"
}),
]
}),
}).addStyleClass("sapUiPopupWithPadding");
var popover1 = new sap.m.Popover("pop",{
title: "Contact Information",
placement: sap.m.PlacementType.Right,
beforeOpen: function(oEvent){
oController.display(oEvent);
sap.ui.getCore().setBindingContext(context);
},
// afterOpen: function (evt) {
//
// },
footer: new sap.m.Bar({
contentLeft: [
new sap.m.Button({
text: "Close",
icon: "sap-icon://close",
press: function () {
popover1.close();
}
})
],
}),
content: new sap.m.VBox({
//width:"300px",
items: [
new sap.m.HBox({
items: [
new sap.m.Label({
text:"First Name",
width:"140px",
}),
new sap.m.Label({
text:"{FIRSTNAME}",
width:"140px",
}),
new sap.m.InputBase("First2",{
type: sap.m.InputType.Text,
//value: sap.ui.getCore().setObject(oList) , //
width:"240px",
placeholder : "{FIRSTNAME}"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Last Name",
width:"140px",
}),
new sap.m.Input('Last2',{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Phone No",
width:"140px",
}),
new sap.m.Input('Phone2',{
type: sap.m.InputType.Number,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Email",
width:"140px",
}),
new sap.m.Input("Email2",{
type: sap.m.InputType.Email,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Address",
width:"140px",
}),
new sap.m.Input("Address2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"City",
width:"140px",
}),
new sap.m.Input("City2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"State",
width:"140px",
}),
new sap.m.Input("State2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
new sap.m.HBox({
items: [
new sap.m.Label({
text:"Zip Code",
width:"140px",
}),
new sap.m.Input("Zip2",{
type: sap.m.InputType.Text,
width:"240px"
}),
]
}),
]
}),
}).addStyleClass("sapUiPopupWithPadding");
return new sap.m.Page("page",{
title: "mEstate",
content: [list],
subHeader: new sap.m.Bar("searchBar",{
contentMiddle: [
new sap.m.SearchField( "searchField", {
placeholder: "Search",
showRefreshButton: true,
search: function onSearch(event) {
// alert(event.getParameter("query"));
jQuery.sap.log.debug("searchField: search for: " +
event.getParameter("query"));
if(event.getParameter("refreshButtonPressed")){
list.bindAggregation("items", {
path: "/KEY",
template : new sap.m.ObjectListItem({
title: "{FIRSTNAME}",
number: "{PHONE}",
type: sap.m.ListType.Active,
firstStatus : new sap.m.ObjectStatus({
text : "{EMAIL}",
state : "Success"
}),
/*secondStatus : new sap.m.ObjectStatus({
text : "{}",
state : "Success"
}),*/
attributes : [
new sap.m.ObjectAttribute({
text : "{LASTNAME}"
}),
new sap.m.ObjectAttribute({
text : "{ADDRESS},{CITY},{STATE,{ZIPCODE}"
})
]
})
});
}
var filters = [];
var searchString = event.getParameter("query");
if (searchString && searchString.length > 0) {
var filter = new sap.ui.model.Filter("FIRSTNAME",
sap.ui.model.FilterOperator.Contains, searchString);
filters.push(filter);
var binding = list.getBinding("items");
binding.filter(filters);
}
},
width: "100%",
tooltip: "Search for objects..",
refreshButtonTooltip: "Refresh"
})
]
}),
showNavButton: true,
navButtonTap:function(){
app = sap.ui.getCore().byId("myApp");
app.to("idfirst1");
},
footer: new sap.m.Bar({
contentLeft: [
new sap.m.Button({
text: "Add Contact",
icon: "sap-icon://add",
press: function () {
popover.openBy(this);
}
})
]
}),
});
}
});
In controller.js
onBeforeRendering
: function() {
var url = 'http://vikalp.webhop.net:8000/sap/bc/zrestateui5_lis?sap-client=800';
var model = new sap.ui.model.json.JSONModel();
$.ajax({
url : url ,
dataType : "jsonp",
type : "GET",
//jsonCallback : 'himmm',
success: function(data,textStatus,jqXHR) {
data = JSON.parse(data);
console.log(data);
model.setData(data);
},
});
sap.ui.getCore().setModel(model);
},
display: function(oEvent){
context = oEvent.getSource().getBindingContext();
}
});
I am getting no output in the popover window. Can anyone please show me how can I get the data in the popover window.
Thanks in advance
Himadri