Skip to Content
avatar image
M Bel

Scroll bar in sap.m.List

Jan 26, 2017 at 05:23 PM | 250 Views

Hello,

I have a list that is part of a screen with other informations. This list can have a lot of entries and I would like to display it with a limited height and a scroll bar. Right now, the scroll bar for the list is not displayed even if I have a lot of entries. I tried to set the height but it does not worked.

var oListItemTemplate = new sap.m.CustomListItem({
      content: [oMessageIcon, oMessageText]
    }).addStyleClass("sapMeListItem");


    this.oMessageList = oMessageList = new sap.m.List({
      visible: true,      
      ScrollToLoad: true,
      growingThreshold : 5,
      items: {
        path: "JsonSes>/__Messages",
        template: oListItemTemplate
      }
    }).addStyleClass("sapMeSesMessageList");

time.jpg

Could you please help me?

Thanks in advance!

Marie

time.jpg (49.4 kB)
SAPUI5
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    VIPLOVE KHUSHALANI
    Jan 27, 2017 at 07:44 AM

    Hi Marie ,

    Place the sap.m.list control inside sap.m.ScrollContainer and set the height of the scroll container, as the content height inside the scroll container increases it will auto give a scroll bar

    thanks

    Viplove

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    M Bel
    Feb 01, 2017 at 09:12 PM

    Hello,

    Thank for you answer and I am sorry for the delay

    the sap.m.list is in a page and SAP do not recommend to use it

    "Do not use nested scrolling

    We do not recommend to use nested levels of scrolling, for example, when a page with enabled vertical scrolling contains a scroll container that has vertical scrolling too. Such combinations may lead to behavior that is unexpected both for programmers and users. "

    SAP scrolling bar

    I don't have a lot of experience but now, I am trying to use sap.ui.table.Table but when I display the information, I see 25 rows but the cells are empty. 

    	    var oTable = new sap.ui.table.Table({
			title: "Table Example",
			visibleRowCount: 5,
			firstVisibleRow: 3,	 
			selectionMode : sap.ui.table.SelectionMode.Single,
			selectionBehavior: sap.ui.table.SelectionBehavior.Row			
	    });
    
	    oTable.addColumn(new sap.ui.table.Column({
	        label: new sap.ui.commons.Label({text: "Comment"}), 
	        template: new sap.ui.commons.TextView({value:"{JsonSes>Text}"})
	      }));
	    
	    oTable.setModel(this.getModel("JsonSes"));
	    oTable.bindRows("JsonSes>/__SESDetailMessages");

    Could you please help me?

    Thank you!

    Marie

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    M Bel
    Feb 02, 2017 at 01:19 PM

    Thank you very much for your help! :)

    Add comment
    10|10000 characters needed characters exceeded