Skip to Content
0
Apr 23, 2014 at 07:41 AM

Show data of a listitem in a popover window

911 Views

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