How to emulate your Fiori and UI5 apps on mobile devices in Google Chrome DevTools
Hi again Fiori friends!
How do I emulate my UI5 and Fiori apps as if they were running on mobile devices?
Whilst extending Fiori applications and developing custom UI5 apps, I stumbled across this nifty tool called “Device Mode Mobile Emulation” in Google Chrome DevTools when debugging my UI5 code. If you’re not across this already – get on it ASAP – it is an awesome tool I simply cannot live without it!
When building my UI5 applications or extending existing Fiori ones – I *always* build for mobile first. One of the reasons one of my client organisations has gone ahead with Fiori and UI5 as the choice UI is to get SAP applications ready to be used in the field and drive productivity gains. Whilst some applications will be purely used on desktops – it’s important to be mobile ready and understand the implications of your design and coding decisions when simulating your applications on mobile devices. This is particularly relevant for smaller screen sizes and slower mobile data networks.
An overview to getting acquainted with “Device Mode Mobile Emulation” in Google DevTools.
Using this tool will help you simulate how your Fiori extensions and UI5 apps respond to:
- A wide range of modern mobile smartphones and tablets.
- Device orientation changes.
- Touch emulation.
- Simulate network conditions with device throttling (Eg. 3G, LTE, 4G, Wireless, Offline Mode)
For a great detailed overview visit https://developer.chrome.com/devtools/docs/device-mode
Here’s one of Google overview videos to get you acquainted in under 5 minutes.
Let’s try Google Chrome DevTools with SAP Fiori.
Now that we’re somewhat familiar with this tool, let’s apply this to Fiori with a real example.
Step 1 – Open up https://www.sapfioritrial.com/ in Google Chrome and go straight to the demo Fiori Launchpad.
Step 2 – When you’re at the SAP Fiori Demo Launchpad in Google Chrome, press F12 or CTRL+SHIFT+I to fire up the DevTools panel. Your screen should look like the screenshot below.
Step 3 – Click on Toggle device mode to start the device emulator as I’ve highlighted in red above.
Step 4 – Your screen should now look like this:
Step 5 – When you’re in this screen you’ll see you can toggle your mobile device and network speed. For the purposes of this quick demo I’ve selected an Apple iPhone 6 and a 3G connection speed.
Now we’ve set these parameters. The browser will ask us to refresh… so click on refresh!
Step 6 – Refresh your browser and Fiori should re-render as if it was running on an iPhone 6.
Now that we’ve clicked refresh, check out how the Fiori Launchpad has re-rendered for an iPhone 6.
Now that you’ve got a sample Fiori application being simulated, start exploring and see what else you can find!
Happy developing in the Fiori and UI5 space.