1 Reply Latest reply on Feb 19, 2020 3:07 AM by John 'JB' Brock-Oracle

    Fetch on listView and selected item


      JET version 8.0


      I am trying to select the item from the listview . I can see the keyset object in event.data.value. I would best need to get the selected id and name out from the model or read the id from the event.data.value - keyset object.


      2 problems,


      I am not able to bind the collection when fetch is completed.

      //  self.locations.fetch().done(function () { 

            self.dataProvider = new CollectionDataProvider(self.locations);

         //  });


      I cant bind list on fetch.done();

      Even after I fetch the data into collection, collection.get(event.data.value) complains of a Promise Error.




        <div id="listViewContainer">


                  <oj-list-view id="listview" aria-label="simple list" data="[[dataProvider]]" selection-mode="single" on-selected-changed="[[handleSelectionChanged]]">

                      <template slot="itemTemplate" data-oj-as="item">


                              <oj-bind-text value='[[item.data.propertyName]]'></oj-bind-text>








      define(['ojs/ojcore','knockout', 'ojs/ojmodel','ojs/ojcollectiondataprovider',


      'ojs/ojarraydataprovider','ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojinputtext','ojs/ojlistview','ojs/ojkeyset'],




        function pageData(enterprise,propertyId)


          this.enterprise = enterprise;

          this.propertyId = propertyId;


        var self = this;

        self.dataProvider = ko.observableArray();

        self.myLocationCol = ko.observableArray();



      // Use a singleton so that the state is not lost when navigating back

        var viewModel =


          initialize: function (info)


            viewModel.parentRouter = info.parentRouter;

            var enterprise = info.parentRouter.pageData.enterprise(); //do this as this is observable

            self.RESTurl = 'url'

            self.parseLocation = function (response) {

              return {

                propertyId: response.propertyId,

                propertyName: response.propertyName,   



            //Single line of data

            self.locationModel = Model.Model.extend({

              urlRoot: RESTurl,

              parse: self.parseLocation,

              idAttribute: 'propertyId'


            self.mylocation = new self.locationModel();

            //Multiple models i.e. multiple lines of data

            self.locationCollection = new Model.Collection.extend({

              url: RESTurl,

              model: mylocation,

              comparator: 'propertyId'


            self.locations = new self.locationCollection();


          //  self.locations.fetch().done(function () { 

            self.dataProvider = new CollectionDataProvider(self.locations);

         //  });



          handleSelectionChanged: function(event)


            this.selectedids = event.detail.value;      

            viewModel.parentRouter.pageData = new pageData(enterprise,event.detail.value);


          /*  var findselected = self.locations.get(event.detail.value)       //event.detail.value contains the ID of the selected list item 


                console.log(res); //Whole model object 

                console.log(res.attributes);//Attributes of the model 

            });  */


             //return true;



        return viewModel;


        • 1. Re: Fetch on listView and selected item
          John 'JB' Brock-Oracle

          The easiest way to get the data associated with a selected item in a listview is to bind the first-selected-item attribute to an observable and then access that variable from the on-selected-changed event handler.  It will return the key and a data object which will contain all of the data for that specific item.


          Something like this should work.


          this.changeHandler = (event) => {
                  var sel = document.getElementById('listview').firstSelectedItem;
                  console.log('changeHandler: '+JSON.stringify(sel));