SAPUI5 Mobile - Only Page Title Displayed

[Former Member]

Dear All,

Today I started, or maybe I would like to start, with a sample sapui5 app for mobile.

I already used sapui5 to develop a desktop app with no "big" problem.

I just created a new project "for mobile" and I added a sample button to the initial view. Below the really sample JS View code:

sap.ui.jsview("mobileTestApp.Home", {

      getControllerName : function() {

         return "mobileTestApp.Home";

      },

      createContent : function(oController) {

           return new sap.m.Page({

              title: "Title",

              content: new sap.m.Button({ text: "button 1" })

          });

      }

});

When I run tha app on my local test server "http://localhost:8080/mobileTestApp/index.html?sap-ui-xx-fakeOS=android" only the page title is displayed, no button. The content page is totally black and not white as I expected.

The same result for "sap-ui-xx-fakeOS=ios" or "sap-ui-xx-fakeOS=blackberry"

If I inspect the html result code using firebug or something like that, the button tag is present but not displayed

If I create put the code to create the page and the button within a "script" tag in the index.html file, it works fine

I'm not able to understand this behaviour. What mistake did I make?

Thanks for your cooperation.

Regards,

Mirco

[Former Member · Accepted solution]

Hi Mirco,

I had the same problem. The solution is quite simple. You just have to set the height.

createContent : function(oController) {             

               this.setHeight("100%");

               return new sap.m.Page({

              title: "Title",

              content: new sap.m.Button({ text: "button 1" })

     });

}

Regards,

Christian

[Former Member · Accepted solution]

Thank you Christian, your help is really appreciate.

to be honest, I have difficulties to understand the reason for that.

It would be better if height = 100% was the default value.

Thanks again,

Mirco

[AndreasKunz · Accepted solution]

Hi Mirco (and Christian),

first of all: yes, this is indeed unexpected and hard to find out, hence it has been changed and it will no longer be required in future releases of SAPUI5 Mobile to set the View height to 100%.

The reason is:

sap.ui.core.Views - created even before UI5 Mobile existed - by default have a height (and width) that adjusts to their content, just like an inline-block div in HTML.

The content of your View here is a sap.m.Page control which on the other hand tries to cover 100% of its parent size. So this is a sort of loop where one tries to adapt to the other.

As always in CSS, the result is that they just collapse to zero height (or rather to the height of the page header, which has a defined size)...

But you shouldn't need to care about this: as I wrote, future versions of the sap.m.App/sap.m.NavContainer control set the height of their children to 100%, so this will work without explicitly setting the height.

Regards

Andreas

[Former Member · Accepted solution]

Hi Andreas,

Thanks for clarifying, but what I can say is that it is a bit discouraging, since it prevent us from having a simple "Hello World" application working properly. It would be nice to have the sapui5 eclipse plugin creating the MVC with the setHeight, at least for this version.

Regards,

Christian

[AndreasKunz · Accepted solution]

Hi Christian,

yeah, sure, it should not have happened like this, but it did. The issue is fixed in version 1.8.6, I'm just not sure when it will be available (SDN trial currently has 1.8.4, NW Cloud has 1.8.5).

Sorry

Andreas

[pmuessig · Accepted solution]

Hi Andreas, hi Christian,

UI5 1.8.6 is on the way and will be available with the next update cycle of NW Cloud soon (when I remember right this will be in approx. 2-3 weeks).

Merry Christmas and Happy New Year!

Best regards,

Peter

[Former Member · Accepted solution]

Hi Perter, Andreas and Christin,

thanks for your information and your update.

simply having a wonderful christmas time.

Regards,

Mirco

[Former Member · Accepted solution]

Hi Christian Jianelli,

How can I add a custom button  to the page header in sap.m.page

[Former Member · Accepted solution]

Hi M Sudhakar Reddy,

Sorry, but I'm developing only desktop applications until now. I suggest you to create a new discussion to get some help on that.

Regards,

Christian

[Former Member · Accepted solution]

Hi Christian,

Appreciate for your reply. May I know , How desktop apps are different from Mobile apps using SAPUI5?

Are desktop applications single page apps like mobile apps?

How you are navigating between two views in desktop apps ( I know we are using page navigation using event bus) .

Please suggest me the good approach for desktop apps.

[Former Member · Accepted solution]

Hi M Sudhakar Reddy,

There are many differences. To be brief the I can say that the navigation and events (gestures) are different, what require a specific set of components.

Regards,

Christian

[junwu · Accepted solution]

Hi Andreas,

just found this old thread, the problem is I still have this issue in my app, can u have a look?

Best regards,

Jun

[Former Member]

Hi Guys,

I need some help from you guys. I want to add a Google Map in my SAPUI5 Mobile App, can any one tell me how to do that.

Thanks and best regards.

fahad

[Former Member]

Hi Fahad,

Please take a look at the link below. You might find it useful.

http://buildmobile.com/build-a-location-based-mobile-app-with-html5-and-javascript-part-1/

Regards,

Christian

[Former Member]

Hi Guys,

i'm hitting the same issue and inserting the line this.setHeight("100%"); doesn't solve the problem.

I'm running SAPUI5 Version 1.12.1 with the Eclipse Plugin and the Home.view.js looks like the following:

sap.ui.jsview("danishrailwaymobiletimesheet.Home", {

      getControllerName : function() {

         return "danishrailwaymobiletimesheet.Home";

      },

      createContent : function(oController) {

                this.setHeight("100%");

                var button = new sap.m.Button({text: "Hello"});

                var verticalBox = new sap.m.VBox({

                          items : [button]

                });

                var page = new sap.m.Page({

                          title: "{i18n>home.title}",

                          content: [verticalBox]           

          });

                return page;

      }     

});

When i look at the resulting html i see that the <div> containing the VerticalBox and the Button has the style "overflow-x: hidden".

<section id="__page0-cont" class="sapMPageBgStandard" style="overflow-x: hidden; overflow-y: auto;">

     <div id="__page0-scroll" class="sapMPageScroll sapMPageScrollEnabled">

          <div id="__vbox0" data-sap-ui="__vbox0" class="sapMFlexBox sapMVBox" style="display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column">

               <div class="sapMFlexItem">

                    <button type="button" id="__button0" data-sap-ui="__button0" class="sapMBtn sapMBtnDefault">

                         <span class="sapMBtnContent">Hallo</span>

                    </button>

               </div>

          </div>

      </div>

</section>

I'm not sure if this might be the root of the problem. When i inspect the html element in Chrome all divs seem to overlay each other on the top title bar.

Any help would be very much appreciated.

P.S. I've used the embedded IE in Eclipse and standalone up-to-date Chrome to display the page.

[Former Member]

Same issue here. Would be really nice if such very simple examples work right out of the box, without the need to search in forums for help.

To make the controls visible, remove position:absolute from the CSS class .sapMPage>section.

No idea why the default framework CSS would position the page controls at absolute 0,0 when there is a header on the page.

[AndreasKunz]

Hi Robert,

sorry for the delayed reply, but it's not too easy to give a definite answer without more information.

First of all, you mention Chrome and IE. Please note that the mobile sap.m library (with sap_mvi theme) only is guaranteed to run properly on mobile devices:

https://sapui5.netweaver.ondemand.com/sdk/docs/guide/BrowserSupport.html#SAPUI5forMobile

In desktop Chrome it does work, but only for the development scenario, and a URL parameter "sap-ui-xx-fakeOS=ios" or "sap-ui-xx-fakeOS=android" must be set then to decide which native appearance should be applied.

Without this, the theme is in a sort of undefined state, it will look crappy and especially the problem that page content appears behind the header may result from this undefined state.

As written: this is the case if you are using the "sap_mvi" theme.

The new "sap_bluecrystal" theme for sap.m has been enabled to run on both, mobile and desktop platforms (IE9+, Chrome, Safari), so the issue you mention should not happen with this theme.

I'd suggest you try adding the given URL parameter when testing with Chrome (or to switch the theme). Please note that the developer tools in Chrome itself can now also be used to emulate touch support or fake the user-agent. This mechanism sort of does the same as the "fakeOS" URL parameter, so you could also entirely use this one. But they interfere, so when using the fakeOS URL parameter, make sure you do not have the developer tools open and set to emulate touch support (otherwise fakeOS is ignored).

Regards

Andreas

[AndreasKunz]

Hi Juergen,

please check my reply to Robert. I assume you may also be using the "sap_mvi" theme on desktop browsers without the "fakeOS" URL parameter, which is not supported.

I completely agree that this is not very nice, but as mentioned in my other reply, the new Blue Crystal theme does support desktop browsers, so it should not happen there.

I also think that even in this undefined, unsupported state the behavior should not have such issues, but on the other hand you will have other issues, otherwise it would not be "unsupported"... 😉

The 0,0 position probably comes from the introduction of transparent/translucent headers where the page content actually needs to start at 0,0. But sure, I agree that this 0,0 should only be applied once the header actually is transparent. Apparently this undefined state was not tested...

Regards and sorry

Andreas

[Former Member]

Hi Andreas,

thanks for the quick reply. Unfortunately adding the fakeOS parameter only applies the theme correctly but still the controls are all cramped up at the top of the page under the header. Only removing the position:absolute solves this.

So I will have to overload the css class to cope with this. Still learning and testing, so this is not critical in any projects of mine yet. Though I suggest this to be fixed in one of the upcoming versions.

Best regards,

  Jürgen

[AndreasKunz]

Hi Jürgen,

we'd love to fix the issue, but we need to understand it first.

See this simple example:

http://jsbin.com/aku-mobile-list-databinding/3/edit

This one seems to work fine: the "Dummy Button" appears below the header, not behind it. So I wonder what is different in your case. Reproducing it in jsbin would of course help a lot.

Regards

Andreas

[Former Member]

Well, in your case all JS is in the HTML while I tried the MVC example; but the documentation is unclear to me... to many options and I have difficulties to grasp the different approaches (App, page, View, sap.m and the other packages).

I fixed the issue by a) using the blue crystal theme and then adding this to the head of my html:

		<style type="text/css">
			.sapMPage>section {
				position: inherit;
			}

Now everything is in order.

[AndreasKunz]

Well, an MVC example with multiple files is hard to put on jsbin, that's why I kept it simple (or rather used an existing one).

Maybe knowing the hierarchy of controls in your case would help to understand what's going wrong. If there are just plain controls directly inside a Page control, it does not make a difference whether Views were used or not.

Actually in MVI the position/top:0px is correct and the child of this <section> (holding all the controls) should be pushed down by a border-top-width which equals the header height and depends on the platform.

(with no fakeOS, the platform would not be set and this top border would be missing, but that's what we discussed before)

If it works for you - fine. But still overriding the page content positioning could break something. The "absolute" is there for a reason.

To be precise: to clamp the page content area between header and footer by setting top and bottom to zero or other fixed values. A fixed pixel or percentage height cannot be used for this. As a result the height of your Page content area might extend only as far as the Page is filled with controls. If the screen is taller than the list of controls, the user won't be able to pull down the page if he touches it below its lower edge, which now is not at the bottom screen edge (or footer) anymore.

Regards

Andreas

[Former Member]

Hi Andreas!

I see the 3em top margin on the in the CSS but it does not work while absolute is set. Once positioning is relative the top 3em is working. I have not yet tested it on a mobile browser, only Chrome and FF desktop.

In general I agree: twisting the framework is only a last resort. In this stage of me learning SAP UI5 it's not harmful as long as I keep in mind the change.

Thanks for the explanation, though.

Best regards,

  Jürgen

[AndreasKunz]

Hi Jürgen,

I see...

But it really should be a border, not a margin. And this also works with position:absolute

http://jsbin.com/aku-xx-border-test/2/edithttp://jsbin.com/aku-xx-border-test/1/

So something special seems to interfere in your case.

Regards

Andreas

[Former Member]

Hi Peter, Andreas and Mirco,

Thank you very much for your attention and help.

Merry Christmas and Happy New Year!!!

Regards,

Christian