sap.m.List Scroll to specific Item

Question

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:

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

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.

Answer 1

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!

Answer 2

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

Answer 3

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.