Skip to Content

UI5 Content not created in sap.m.page?

dear all,

I am creating an simple ui5 app, with 2 pages using the mvc paradigm..But somehow I cant seem to be able to create contents in the Mobile pages

e.g. i have written this in the first page

sap.ui.jsview("abc.Initial", {

getControllerName : function() {

return "abc.Initial";

},

createContent : function(oController) {

return new sap.m.Page({

title: "UI5 First Page",

content: (new sap.m.Button({

text:"Go to Page2",

tap: function(){

//app.to("abc.SecondPage");

alert("Hello");

}

})

) }); }});

while testing the app in Chrome browser with user agent set as Ipad/iphone - the content is not created as shown in the screen shot..

I even created one more page, with some content but same issue..No content is generated..

sap.ui.jsview("abc.SecondPage", {

getControllerName : function() {

return "abc.SecondPage";

},

createContent : function(oController) {

return new sap.m.Page({

title: "UI5 Mobile Second page",

showNavButton: true,

navButtonTap: function(){

app.back(); // when tapped, the back button should navigate back up to page 1

},

icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

content : new sap.m.Text({text:"Hello Mobile World!"})

});

}

});

Did I miss something? Anything else to be done so that the Ui5 content is generated

Appreciate your help

Regards, Sandip

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

4 Answers

  • Best Answer
    Feb 27, 2013 at 03:09 AM

    Hi Sandip,

    I repeated your example on my system and it worked fine - so I don't think the problem is with your code. I am running version 1.8.9 of the runtime. The only thing I noticed was that the IDE defined the content parameter of the sap.m.page object as an array. It worked both ways for me but you might want to try this to see if it works.

    createContent : function(oController) {

    return new sap.m.Page({

    title : "UI5 First Page",

    content : [ new sap.m.Button({

    text : "Go to Page2",

    tap : function() {

    alert("Hello");

    }

    }) ]

    });

    }

    Otherwise maybe you should try a different browser - or even better an iOS simulator.

    Cheers

    Graham Robbo

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 27, 2014 at 07:21 AM

    Hi Sandip,

    It is mandatory to add the page to an App. Please find your revised code.

    createContent : function(oController) {

    new sap.m.App({pages:[ new sap.m.Page({

    //enableScrolling: false,

    //showHeader: true,

    title: "UI5 First Page",

    content: new sap.m.Button({

    text:"Go to Page2",

    tap: function(){

    //app.to("abc.SecondPage");

    alert("Hello");

    }

    }

    )})]}).placeAt("content");

    //var App = new sap.m.App({ id:"App"});

    }

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Feb 01, 2016 at 04:47 AM

    Hi i am using js view. i want to pass page icon but it's not display

    return new sap.m.Page({ title: "My TimeSheet", icon: "http://www.sap.com/global/ui/images/global/sap-logo.png", content: [ ele ] });
    Add comment
    10|10000 characters needed characters exceeded

  • Apr 20, 2016 at 06:14 PM

    Hi,

    I just got the same issue, and it only happens on js view, not xml view.

    After debugging the issue in Chrome, it shows, the content is hidden by the two element style

    overflow-x: hidden

    overflow-y: auto

    on "__page00-cont" element, once the two attributes are removed then the content shows properly.

    But I am not sure what is the best way to remove it in jsview code as below:

    sap.ui.jsview("sap.ui.demo.wt.view.App", {

    /** 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 controller.myview

    */

    getControllerName: function() {

    return "sap.ui.demo.wt.controller.App";

    },

    createContent : function(oController) {

    var controls = [ new sap.m.Button({

    text : "{i18n>showHelloButtonText}",

    press: oController.onShowHello

    }),

    new sap.m.Input("myinput",{

    value:"{/recipient/name}",

    description:"Hello {/recipient/name}",

    valueLiveUpdate:true,

    width:"60%"

    })

    ];

    return new sap.m.Page({

    title : "{i18n>homePageTitle}",

    content : controls

    });

    }

    });

    Thanks.

    Jonathan


    Add comment
    10|10000 characters needed characters exceeded

    • Hi

      Found a workaround for this issue by disabling scroll on the sap.m.page's root view

      sap.ui.jsview("sap.ui.demo.wt.view.App", {

      /** 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 controller.myview

      */

      getControllerName: function() {

      return "sap.ui.demo.wt.controller.App";

      },

      createContent : function(oController) {

      var controls = [ new sap.m.Button({

      text : "{i18n>showHelloButtonText}",

      press: oController.onShowHello

      }),

      new sap.m.Input("myinput",{

      value:"{/recipient/name}",

      description:"Hello {/recipient/name}",

      valueLiveUpdui5ate:true,

      width:"60%"

      })

      ];

      var page = new sap.m.Page({

      title : "{i18n>homePageTitle}",

      content : controls,

      enableScrolling : false

      });

      return page;

      }

      });

      Jonathan