cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

UI5 Content not created in sap.m.page?

Go to solution
SandipAgarwalla
Active Contributor

on ‎02-26-2013 11:54 AM

0 Kudos

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

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

GrahamRobbo
Active Contributor
‎02-27-2013 3:09 AM
0 Kudos

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

Show replies
Show replies
SandipAgarwalla
Active Contributor
‎02-27-2013 6:26 AM
0 Kudos

Hi Gramham

Thanks for your time.

I tried the way you have shown, but it does not show the content..I dnt have a real simulator, but tried in all browsers (chrome,FF) in iPhone mode..Also tried it in Electric Simulator but same results. I am using the UI5 build 1.8.5, could that be an issue?

One more question, if I have to add an table in the page - where is the best way to insert the code?

Can I create the Table just above the "return new sap.m.Page({" line, and then add the table as content?

Sorry if its too dumb a question, I am just starting with the IDE

Thanks, Sandip

GrahamRobbo
Active Contributor
‎02-27-2013 7:14 AM
0 Kudos

Hi Sandip,

I don't think the UI5 runtime you have should be a problem. Let me give you all my code sample to try.

This is the index.html file.

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

                                   <script src="resources/sap-ui-core.js"

                      id="sap-ui-bootstrap"

                      data-sap-ui-libs="sap.m"

                      data-sap-ui-theme="sap_mvi" >

              </script>

              <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->

                                   <script>

                                       sap.ui.localResources("abc");

                     var app = new sap.m.App({initialPage:"idinitial1"});

                     var page = sap.ui.view({id:"idinitial1", viewName:"abc.initial", type:sap.ui.core.mvc.ViewType.JS});

                     app.addPage(page);

                     app.placeAt("content");

                                   </script>

       </head>

       <body class="sapUiBody" role="application">

              <div id="content"></div>

       </body>

</html>

This is the initial.controller.js - nothing in it of course (note I spelled "initial" with a lowercase 'l')

sap.ui.controller("abc.initial", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

*/

//   onInit: function() {

//

//   },

/**

* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered

* (NOT before the first rendering! onInit() is used for that one!).

*/

//   onBeforeRendering: function() {

//

//   },

/**

* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.

* This hook is the same one that SAPUI5 controls get after being rendered.

*/

//   onAfterRendering: function() {

//

//   },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

*/

//   onExit: function() {

//

//   }

});


And this is the initial.view.js file

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");

                                        }

                              }) ]

                    });

          }

});

Maybe trying these will help you?

Don't worry about asking dumb questions - I am doing exactly the same as I work my way through this. So nothing I say here is necessarily the best way to do it - just where my thinking is at the moment.

In terms of laying out a page I have to say that I have not played with the sap.m libraries at all - I am mainly using the sap.ui and sap.viz libraries.

I have generally been wrapping the contents of the view in a verticalLayout and then when I want to go across the page using the HorizontalLayout. Something like this...

sap.ui.jsview("sandip.layout", {

          getControllerName : function() {

  return "sandip.layout";

          },

          createContent : function(oController) {

                    return new sap.ui.commons.layout.VerticalLayout(

     "layout1", {

                              content : [ new sap.ui.commons.TextView({

                                        text : "Vertical Layout",

                                        design : sap.ui.commons.TextViewDesign.Bold

                              }), new sap.ui.commons.Button({

                                        text : "Hello"

                              }), new sap.ui.commons.HorizontalDivider(),

                                        new sap.ui.commons.Button({

                                                  text : "World"

                                        }),

                                        new sap.ui.commons.HorizontalDivider(),

                                        new sap.ui.commons.layout.HorizontalLayout("layout2", {

                                                  content : [ new sap.ui.commons.TextView({

                                                            text : "Horizontal Layout",

                                                            design : sap.ui.commons.TextViewDesign.Bold

                                                  }), new sap.ui.commons.Button({

                                                            text : "Hello"

                                                  }), new sap.ui.commons.Button({

                                                            text : "World"

                                                  }) ]

                                        }) ]

                    });

          }

});

Cheers

Graham Robbo


SandipAgarwalla
Active Contributor
‎02-27-2013 8:33 AM
0 Kudos

Hey Graham

Thank you so much for your help. Well, I got it working :)...Had to build the page content afresh and some help from the API documentation

Here is the code -

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

      getControllerName : function() {

         return "abc.Initial";

      },

      createContent : function(oController) {

           //Global variables

           this.setHeight("100%");

           var bckGrndDesign = sap.m.PageBackgroundDesign.List;

          

           // Create UI5 Elements here   

          

           //Start with Footer

           var oFooter = new sap.m.Bar({

                enableFlexBox : true,               

                contentLeft : new sap.m.Text("Holla",{text:"SABox"}),

                contentMiddle : new sap.m.Button("Holla2",{text:"Click Me",type:sap.m.ButtonType.Accept}),

                contentRight : new sap.m.Text("Holla3",{text:"CopyRight@SA"}),

           });

          

           // Some more elements in the content area

           //var oControls = [];

          

           var oText1 = new sap.m.Text({

                text: "My First Mobile Text",

                textDirection : sap.ui.core.TextDirection.Inherit,

                });

           //Some More Elemnets

           var oButton1 = new sap.m.Button({

                text : "Content Button",

                type : sap.m.ButtonType.Reject,

                              

           });

          

                    

           // Actual Page Starts here

           var oPage = new sap.m.Page({

                title : "UI5 PoC @Sandip Agarwalla",

                showNavButton : true,

                showHeader : true,

                navButtonText : "Back to Home",

                enableScrolling : true,

                backgroundDesign : bckGrndDesign,

                footer: oFooter,

                content: [oText1,oButton1],

                navButtonTap: function(){

                     alert("So you want to go back Home??");

                }

           });

          

          

         // return the page with the content

           return oPage;

      }

});

I was confused initially with the script and xml way of defining the elements..Now would stick to the scripting way, as I can relate it to JAVA style of coding..

One more question, can I use the UI Core elements (Layout, Table etc) in the sap.m.page?

Thanks again.

regards, sandip

GrahamRobbo
Active Contributor
‎02-27-2013 9:18 AM
0 Kudos

Good news.

Not sure about what elements to use with the sap.m.page. As mentioned I have done very little with this. Have a go and find out I reckon.

Cheers

Graham Robbo

Former Member
‎05-12-2013 5:31 PM
0 Kudos

Hi Sandip,

I still don't see any Content even after replicating the View Code from above. Is there a way to debug ? It just displays a blank Page.

Thanks

Srikanth

AndreasKunz
Advisor
Advisor
‎05-15-2013 11:35 AM
0 Kudos

Hi,

blank page usually means: either JavaScript error or content HTML is rendered, but with 0 pixels height.

Your browser developer tools should make it easy to find out what is the case.

In case of zero height, there is probably something set to 100% height, but the parent does not have a specified height.

Regards

Andreas

Former Member
‎05-16-2013 6:00 PM
0 Kudos

Hi Andreas,

Error is "sap is undefined". I am pretty much sure that it is not able to reference the SAP UI5 ToolKit Library. I tried various options

<script src="resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_mvi" >

<script src = "/resources/sap-ui-core.js"

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.m"

data-sap-ui-theme="sap_mvi" >

Please advise on how to reference the Library


Former Member
‎04-28-2014 7:31 PM
0 Kudos

Hi,

add /sapui5/ in front of resources

regards

Answers (3)

Answers (3)

former_member192490
Explorer
‎04-20-2016 7:14 PM
0 Kudos

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

Show replies
Show replies
former_member192490
Explorer
‎04-20-2016 9:00 PM
0 Kudos

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

Former Member
‎02-01-2016 4:47 AM
0 Kudos

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
   ]
   });
Show replies
Show replies
Former Member
‎03-27-2014 7:21 AM
0 Kudos

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"});

      }

Show replies
Show replies
Ask a Question