I have a problem.

I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.

I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.

Then I return the scroll container.

The code is this:

sap.ui.jsview("ttest.initView", {

/** Specifies the Controller belonging to this View. 
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf ttest.initView
*/ 
getControllerName : function() {
    return "ttest.initView";
},

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
* Since the Controller is given to this method, its event handlers can be attached right away. 
* @memberOf ttest.initView
*/ 
createContent : function(oController) {

    var oTweetList = new sap.m.List("items", {  
          threshold: 2,  
          inset : false,    
          showUnread : true,  
          scrollToLoad : true,   

          columns : [
             new sap.m.Column({  
                styleClass : "data",  
                hAlign : "Left",  
             })
          ]  
    });

    var oSlider = new sap.m.Slider({
        id: "tweetSlider",
        width: '100%',
        min: 0,

        change : function(oEvent){
            //Update tweet list
            var startIndex = 0;
            var endIndex = this.getValue();
            oController.updateTweetList("update", startIndex, endIndex);
        }
    });

    var oPage = new sap.m.Page({
        title: "Tweet list for @matteorenzi",
        enableScrolling : false,
        headerContent: [
            new sap.m.Button({
                icon: "sap-icon://refresh",
                press : function(oEvent){
                    //Update tweet list with all tweets
                    oController.updateTweetList("first", "", "");
                }
            })
        ],
        content: [
            oSlider,
            oTweetList
        ]
    });

    var oScroller = new sap.m.ScrollContainer({
        vertical : true,
        horizontal : false,
        content : [
                    oPage
        ]
    });

    oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
        var template = new sap.m.ColumnListItem({  
            type : "Navigation", 
            cells : [  
               new it.besolution.Tweet({
                   user :       "{user/name}",
                   username :   "{user/screen_name}",   
                   tweet :      "{text}",

                   press : function(oEvent){    
                       var path = this.getBindingContext().getPath();
                       sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
                       app.to("iduserDetails");
                   }
               })
            ]  
        });

        oSlider.setMax(oGlobalModel.getProperty("/size") - 1);

        oTweetList.setModel(oGlobalModel);
        oTweetList.bindAggregation("items", "/tweets/", template);
    });

    return oScroller;
}

});

The page didn't load. I don't know how to do. Why the list is invisible?

Obviously, if I remove the scroll container and I return the oPage element, the list is visible.

Why? How I have to write my code to show the list without the scrollbar?

I have a problem.

I have a list of tweets to show in a page. For mobile devices I don't want to show the right vertical scrollbar.

I've build the page, with its slider and its tweets list. Then I put this page in a scroll container.

Then I return the scroll container.

The code is this:

sap.ui.jsview("ttest.initView", {

/** Specifies the Controller belonging to this View. 
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf ttest.initView
*/ 
getControllerName : function() {
    return "ttest.initView";
},

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
* Since the Controller is given to this method, its event handlers can be attached right away. 
* @memberOf ttest.initView
*/ 
createContent : function(oController) {

    var oTweetList = new sap.m.List("items", {  
          threshold: 2,  
          inset : false,    
          showUnread : true,  
          scrollToLoad : true,   

          columns : [
             new sap.m.Column({  
                styleClass : "data",  
                hAlign : "Left",  
             })
          ]  
    });

    var oSlider = new sap.m.Slider({
        id: "tweetSlider",
        width: '100%',
        min: 0,

        change : function(oEvent){
            //Update tweet list
            var startIndex = 0;
            var endIndex = this.getValue();
            oController.updateTweetList("update", startIndex, endIndex);
        }
    });

    var oPage = new sap.m.Page({
        title: "Tweet list for @matteorenzi",
        enableScrolling : false,
        headerContent: [
            new sap.m.Button({
                icon: "sap-icon://refresh",
                press : function(oEvent){
                    //Update tweet list with all tweets
                    oController.updateTweetList("first", "", "");
                }
            })
        ],
        content: [
            oSlider,
            oTweetList
        ]
    });

    var oScroller = new sap.m.ScrollContainer({
        vertical : true,
        horizontal : false,
        content : [
                    oPage
        ]
    });

    oEventBus.subscribe("it.besolution.PopulateList", "Go", function(chId, evId, data){
        var template = new sap.m.ColumnListItem({  
            type : "Navigation", 
            cells : [  
               new it.besolution.Tweet({
                   user :       "{user/name}",
                   username :   "{user/screen_name}",   
                   tweet :      "{text}",

                   press : function(oEvent){    
                       var path = this.getBindingContext().getPath();
                       sap.ui.getCore().byId("iduserDetails").setModel(oGlobalModel).bindElement(path);
                       app.to("iduserDetails");
                   }
               })
            ]  
        });

        oSlider.setMax(oGlobalModel.getProperty("/size") - 1);

        oTweetList.setModel(oGlobalModel);
        oTweetList.bindAggregation("items", "/tweets/", template);
    });

    return oScroller;
}

});

The page didn't load. I don't know how to do. Why the list is invisible?

Obviously, if I remove the scroll container and I return the oPage element, the list is visible.

Why? How I have to write my code to show the list without the scrollbar?

• javascript
• scrollbar
• sapui5

Share Improve this question Follow edited Sep 16, 2014 at 13:24 DWRoelands 4,94044 gold badges3030 silver badges4545 bronze badges asked Sep 16, 2014 at 11:22 sharkbaitsharkbait 3,0501616 gold badges5454 silver badges8989 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

If you don't want to show the right vertical scrollbar. There is a property called enableScrolling.And you really want to use ScrollContainer, put it as Page content, not the other way around.

enableScrolling default: true   

Whether the Page takes special measures to make page content scrollable and keep headers fixed. If set to false, there will be no scrolling at all; for performance reasons this is highly remended when scrolling is not needed. The Page only allows vertical scrolling because horizontal scrolling is discouraged in general for full-page content. If it still needs to be achieved, disable the Page scrolling and use a ScrollContainer as full-page content of the Page. This allows you to freely configure scrolling. It can also be used to create horizontally-scrolling sub-areas of (vertically-scrolling) Pages.