- SAP Managed Tags:
Introduction
The task seamed pretty easy: develop a custom mobile transaction for a warehouse process (the exact details of the process are irrelevant here) and make it usable comfortably on an RDT device with ITS Mobile. I knew that the ITS Mobile part would require some tweaking of HTML templates.
The first part, i.e. the custom transaction development was straight forward - typical ABAP dialog programming. I have implemented it with the usual layout of RF transactions, the same that is used commonly in all standard LM* transactions:
- standard screen size of 20 columns and 16 rows
- main function buttons at the top
- auxiliary buttons at the bottom
- input/output fields in between
I have ended up with a couple of screens like the following:
ITS Mobile HTML templates
Once the transaction and its screens were ready, I have generated HTML templates for ITS Mobile that made the transaction usable on radio data terminals running Internet Explorer browser. There are numerous blogs and guides on how to generate the templates so I skip the generation part here.
Initially the screens were rendered like that:
The above screenshot is a simulation of a mobile device in Chrome browser, however the screen looked very similar on the actual device.
Notice that the screen elements occupy roughly 2/3 of available space. That rendered the elements tiny on the actual device making the transaction uncomfortable to use in the harsh warehouse environment.
After some poking and debugging the ITS Mobile screen with Chrome developer tools I have found a very easy way to scale screens.
Each HTML template contains <head> element:
`<head>`You can find it at the beginning of the template around line 38:
Adding zoom property to the MobileRow class proved to be the solution. Obviously there are multiple ways to accomplish that. What I wanted to do is to be able to tweak just an individual screen and not to influence any other mobile transaction already in use. Therefore I have chosen Internal CSS approach i.e. to define the style for the entire HTML page within the <head> section of the page.
So it was as easy as changing that one line of the HTML template to:
`<head><style>.MobileRow {zoom:150%}</style>`Now the screen in a web browser renders like that:
The elements occupy almost entire available space. The end users' acceptance test were successful. To put it simply they just like the look of the screens!
Technical background
An ITS Mobile screen is build of rows. Each row is a div element of MobileRow class. Chrome developer tools show that nicely:
CSS provides zoom property. However it's not a standard one: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom So you nee to test the solution thoroughly.
Combining zoom property with MobileRow class using internal CSS works very well for me and proved to be a very easy way to scale individual ITS Mobile screens.
Final remarks
I am aware that ITS Mobile templates can be adjusted in a global way with external CSS files. However I was tasked with implementing just a single transaction and didn't want to step over other people's toes and mess up their developments. Hence the Internal CSS approach.
There are still quite ample margins / padding around push buttons. They could be reduced allowing further zooming of the screen. However 150% zoom proved to be good enough and achievable with a change to only one line of the HTML template.
If you are going to tweak ITS Mobile templates mind the ` (Grave Accent) character surrounding <head> element. It's tiny, displayed in blue in the HTML template editor so it's very easy to delete it accidentally. I did that at least once 😉
I am not seasoned HTML / CSS developer. Thus any comments and improvements to the solution are more than welcomed.
9 Comments
