CODEWITHSUNDEEP
javascriptlistsapui5
Sebi
Sebi

Reputation: 3979

sap.m.List Scroll to specific Item

I'm using sap.m.List in my SAPUI5 Application. There are 90 Entries, one for each day in the last 3 Month. Looks like this:

enter image description here

Now I want to scroll to a specific CustomListItem, when a Button is clicked. My View is looking like this: enter image description here

The Idea is that I have three Buttons for scrolling directly to an month. For example: Today, last Month, third Month. Clicking the Button directly scrolls to the first entry of that month. I just found sth. like oList.setSelectedItem(oItem, true); which has no effect.

Someone has an idea how this can be done?

Thank you in advance.

Upvotes: 1

Views: 3326

Answers (4)

Deyan Danov
Deyan Danov

Reputation: 11

I had the same issue today. The Page was not scrolling with the "scrollToElement" method.

oPage.scrollToElement(oList.getItems()[someIndex], 200);

What the documentation says is that the method works only if the element is rendered on the screen. At the point I called the method in the "PatternMatched" event of the controller, the list elements were still not rendered, therefore the "scrollToElement" method did not work.

The solution is to listen to an event that is fired when the list element rendering is complete and call the scroll method there.

XML

 <List
   id"list" updateFinished="onUpdateFinished"
    items="{path}">
    ...
  </List>

controller

onUpdateFinished() {
  

this.getView().byId('page').scrollToElement(this.getView().byId('list').getItems().[someIndex], 1000);

}

Upvotes: 0

Inizio
Inizio

Reputation: 2256

I have made few modification and able to achieve you requirement.

View

<!-- Buttons  --> 
<Button text="Previous Month" press="scrollToPreviousMonth" class="sapUiTinyMarginEnd"/> 
<Button text="Today" press="scrollToCurrentMonth" class="sapUiTinyMarginEnd"/> 
<Button text="Next Month" press="scrollToNextMonth"/>

<!-- List inside scroll Container -->   
<ScrollContainer id="oScrollContainer" height="405px" vertical="true">
    <List id="monthList"
        items="{ 
          path: 'dataModel>/items', 
          sorter: { path: 'group', group: true },
          groupHeaderFactory: '.getGroupHeaderMonth' }" 
          includeItemInSelection="true">
        <CustomListItem type="Active">
            <Toolbar>
                <Label text="{dataModel>title}"/>
                <ToolbarSpacer />
                <Label text="{dataModel>day}"/>
                <core:Icon width="50px" src="sap-icon://edit" />
            </Toolbar>
        </CustomListItem>
    </List> 
</ScrollContainer>

Controller

//Setting the data
setDataToView1: function(sType) {   
    var oData = [
       { "title": "Jan-01", "day": "01-01-2019", "status": "often", "group": "1" },
       { "title": "Jan-02", "day": "02-01-2019", "status": "often", "group": "1" },
       { "title": "Jan-03", "day": "03-01-2019", "status": "often", "group": "1" },
       { "title": "Jan-04", "day": "04-01-2019", "status": "often", "group": "1" },

       { "title": "Feb-01", "day": "01-02-2019", "status": "often", "group": "2" },
       { "title": "Feb-02", "day": "02-02-2019", "status": "often", "group": "2" },
       { "title": "Feb-03", "day": "03-02-2019", "status": "often", "group": "2" },
       { "title": "Feb-04", "day": "04-02-2019", "status": "often", "group": "2" },

       { "title": "Mar-01", "day": "01-03-2019", "status": "often", "group": "3" },
       { "title": "Mar-02", "day": "02-03-2019", "status": "often", "group": "3" },
       { "title": "Mar-03", "day": "03-03-2019", "status": "often", "group": "3" },
       { "title": "Mar-04", "day": "04-03-2019", "status": "often", "group": "3" }                 
    ];
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({ "items" : oData });
    this.getView().setModel(oModel, "dataModel");
},
//setting the group header
getGroupHeaderMonth: function (oGroup) {
    var oMonths = { "1" : "Jan", "2" : "Feb", "3" : "Mar", "4" : "Apr", "5" : "May", "6" : "Jun", "7" : "Jul", "8" : "Aug", "9" : "Sep", "10" : "Oct", "11" : "Nov", "12" : "Dec" };
    var custClass = oMonths[oGroup.key] +"MonthHdr";
    return new sap.m.GroupHeaderListItem({
        title: oMonths[oGroup.key],
        upperCase: false
    }).addStyleClass(custClass);
},
//Navigate to previous month list item
scrollToPreviousMonth: function(){
    this.scrollToItem(".JanMonthHdr");
},
//Navigate to current month list item
scrollToCurrentMonth: function(){
    this.scrollToItem(".FebMonthHdr");
},
//Navigate to next month list item
scrollToNextMonth: function(){
    this.scrollToItem(".MarMonthHdr");
},
//Helper function to scrolling to the corresponding list item
scrollToItem: function(sItem) {
    var oScrollList = this.byId("oScrollContainer"),
        oList = this.byId("monthList"),
        sItemId = jQuery(sItem).attr("id"),
        oItem = sap.ui.getCore().byId(sItemId);

    oList.setSelectedItem(oItem);
    oScrollList.scrollToElement(oItem, 2000);       
},

Output

enter image description here

Upvotes: 1

Voyager
Voyager

Reputation: 840

You could retrieve the ScrollDelegate of your surrounding container (in your case FixFlex I think) and then use it to scroll to the selected item. Short example:

oFixFlex.getScrollDelegate().scrollToElement(oItem.getDomRef());

Another alternative would be to wrap your List in a Scrollcontainer as mentioned in the other answer.

Upvotes: 0

davidgbarbero
davidgbarbero

Reputation: 114

I would suggest to take a look at this code snippet from Plunker. I forked another plunker and twitched the code a little bit. In it you can find a list inside a scroll container which is afterwards used for getting to the desired item by knowing an id property of the list item.

http://plnkr.co/edit/a5JwfkvAZcHq7NDoYG5s?p=preview

handleSelectChange: function(oEvent) {
      var sId = oEvent.getParameter("selectedItem").getBindingContext().getObject().id;
      var oList = this.getView().byId("ProductList");
      var aListItems = oList.getItems();
      var oListItem;
      aListItems.forEach(function(element){
        var sListObjectId = element.getBindingContext().getObject().id;
        if(sId === sListObjectId){
          oListItem = element;
        }
      })
      var oScrollContainer = this.getView().byId("oScrollContainer");
      jQuery.sap.delayedCall(0, null, function() {
        oScrollContainer.scrollToElement(oListItem);
        oList.setSelectedItem(oListItem);
      });
    }

Hope it helps!

Upvotes: 1

Related Questions