Show data of a listitem in a popover window

Question

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

Answer 1

Hi Himadri,
first, it would be very useful if you can post a running example of the problem on jsfiddle.net or a similar plattform. And maybe you find the mistake by yourself when creating a minimalistic example...
Second, I haven't used the Popover for now, but you call
popover1.openBy(this,context);
The second parameter is a context in your case, but the documentation states that it should be an boolean. What do you intend here?
Greets,
ben