Last week I blogged about using IBM's MobileFirst platform and Ionic. This is part of a series I'm doing discussing how to use both products together to build awesome mobile apps. (How awesome? Five Lion Robots that can transform into One Giant Robot awesome.) Currently there are a few steps you have to take to modify the default Ionic template to work with MobileFirst. My blog explains those steps and demonstrates it in a video. After discussing things with coworkers, we've come across a few small issues that slightly modify this process. In this post I'll explain the differences, but please be sure to read that first post so this makes sense.

Ok, first off, you can remove this line from the template:

<script>window.$ = window.jQuery = WLJQ;</script>

This line does not exist in the Ionic template but does exist in the default MobileFirst hybrid project. You don't need it, so just skip that step.

Second, there is a CSS element for iOS that breaks Ionic - but not all the time. I only noticed it in the tabs layout, not the default which is what I had used for my first post. Check out the screen shot below:

Notice how the tabs are missing the bottom portion. This is simple enough to correct. In your initialization routine, simply tell MobileFirst that you do not what to show the iOS7 status bar. As you can probably guess, this is only an issue on iOS. Here is the relevant code.

var wlInitOptions = {
	
	autoHideSplash: false,
	showIOS7StatusBar: false
		 
};

I should point out that Carlos' templates up on GitHub had this fixed already - https://github.com/csantanapr/mfp-ionic-templates.

Any way, I hope this helps, and later today I'll share another example of Ionic and MobileFirst!