7 Tips for your sapui5 mobile app

[SergioG_TX]

Happy 2017 all and thank you for reading my first blog of this year. Those of you who followed me in 2016 probably remember my blogs through development of CDS tables, data models, security  and my review of the sapui5 book – which I highly recommend to read.

On this blog I would like to share some of the most time consuming tasks I encountered and tips of my findings while developing this mobile app on the HANA cloud platform. The end result of this app is a master detail application.

The overview of the different parts of the application (index.html, views, controllers, manifest, controller files, etc.) can be found here

This blog is only highlighting the time-consuming tasks which can be applied to other sapui5 mobile applications.

• Split-App (how to go back to master on mobile)

I used this control on my application. I expected by using sapui5, the app would be responsive; however, once I started testing (my own fault for not reading the About section, which states…”it maintains two NavContainers if running on tablet and one - on phone” I kept thinking I had done something wrong because I was not able to see the master list showing on my phone, nor the icon to pull it into the detail screen (sap:icon//home2)

On the Desktop it looks like this


On Tablet mode



On Phone mode (master – detail web screenshots… actual phone screenshot further below)




so to address my issue, I used the device model to display the detail view header container.. and in it i used a button to show the container i needed.

For additional split app modes (mainly on tablet/desktop mode) you can see these options:

https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.SplitAppMode/samples

 

• Icon tab bar – tab default selection

This was a very easy thing to do so that when a user switches the selected item on the master list, the first icon tab is selected – the default behavior is that the last selected icon is still selected if the master list item is changed. My approach was to use the set the selected item every time the master list item was changed.  (simple js logic, no picture)

 

• Custom header with menu, title and logo

I wanted to show a company logo on the header of the detail side which by default it only shows a title (if set) so I created a custom header container which holds a left content, middle content, and right content:

• I set the home button on the left content (when clicking on it, it shows the master list again - this solved my split app issue on phone mode)


• The user on the middle (just a nice to have)


• the logo on the right content

Pseudo code

<SplitApp>

<detailPages>

<Page>

<customHeader>

<Bar>

<contentLeft> <Button .. /> </contentLeft>

<contentMiddle> <Title .. /> <contentMiddle>

<contentRight> <Image ../>  </contentRight>

</Bar>

</customHeader>

</Page

</detailPages>

<masterPages> ... </masterPages>

</SplitApp>

 

 

• Expression binding

I really like this feature of inline expressions when setting visibility of some of the controls or containers. Since I do not want to add unnecessary model properties - I can get away with an inline expression as shown here (pseudo code) – please consider these inline expressions, they will save you time and code

<MyControl   visible=”{= !${namedModel>/property} }” />           // based on a negation property

<MyControl   visible=”{= ${namedModel>/property} >  0  }” />    // based on an if condition
Another example is found under the invoice list xml view: https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.tutorial.walkthrough.22/code/w...

Please notice:  the wrapper { }, the equal sign just inside the curly brace and the $ before the expression

• Component-preload (package.json, node, gulp)

This was probably the most frustrating piece of developing a sapui5 app. When you try to launch the app and you do not have a Component-preload file, the app throws an error, then it fetches the views/controllers and any other file is required resulting in a tremendously slow load time.

Thanks for HP Seitz and his blog  I was able to easily follow and create my own Component-preload.js file after having installed node and gulp (pre-reqs). There may be a lot more posts about the way to generate the component-preload file, however, I was unsuccessful at the other ones using grunt.

One thing to know here is that if the component-preload.js file is created successfully and deployed, then it contains the xml and js files (as seen on the example from HP and myself) into one file so that the initial request load time is much faster (mine was reduced from 9s to about 3s.  Additionally, it is important to know that if something changes on the views or controller.js files or any file which is part of the Component-preload file, then, you will need to re-generate it so the changes take effect . Furthermore you will need to re-deploy it (activate).

 

FYI –

The gulpfile, package.json files do not need to be activated – they basically are needed to create the Component-preload file via gulp / node

 

• Image@2 not found – apparently due to the responsiveness of the framework… when working with some smart phones, the Image control will try to load a higher quality picture, so I want to tell the framework that there isn’t a better quality picture by setting the Image to ignore the density awareness as described here:

https://help.sap.com/saphelp_uiaddon10/helpdata/en/f8/6dbe9d7f7d48dea5286003b1322165/content.htm

in the event that you do have a higher quality image, your image needs to be saved as:  image@1.5.png or image@2.png (or whatever your extension is)

 

• Last but not least When you get stuck and think that the framework has issues and think you can’t really move forward, please post questions on scn.sap.com – you will get a lot of help here - and then please share your solutions

please let me know if you have questions or any comments

thank you for reading
Sergio