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 a RDT device with ITS Mobile. I knew that the ITS Mobile part would require some tweaking of HTML template.
The first part, i.e. the custom transaction development was straight forward – typical ABAP dialog programming. I implemented it with the usual layout of RF transactions, the same that is used commonly in all standard LM* transactions:
I ended up with a couple of screens like the following:
ITS Mobile HTML templates
Once the transaction and its screens were ready, I generated HTML templates for ITS Mobile that made the transaction usable on the radio data terminals running Internet Explorer browser. There are numerous blogs and guides on how to generate the templates thus I will not focus on the generation here.
Initially the screens were rendered like that:
The above screenshot is a simulation of 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 MobileRow class proved to be the solution. Obviously there 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 web browser renders like that:
Now the elements occupy almost all available space. Also the end user acceptance test were successful. To put it simply warehouse people like the look of the screens!
Technical background
An ITS Mobile screen is build rows. Each row is a div of MobileRow class. Chrome developer tools show that nicely:
CSS provides zoom property. However it’s not a standard one: zoom Thus test the solution thoroughly.
Combining zoom property with MobileRow class using internal CSS works for me very well and proved to be 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 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 screens. They could be reduced thus 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 am not seasoned HTML / CSS developer. Thus any comments and improvements to the solution are more than welcomed.
Okumaya devam et...
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 a RDT device with ITS Mobile. I knew that the ITS Mobile part would require some tweaking of HTML template.
The first part, i.e. the custom transaction development was straight forward – typical ABAP dialog programming. I 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 ended up with a couple of screens like the following:
ITS Mobile HTML templates
Once the transaction and its screens were ready, I generated HTML templates for ITS Mobile that made the transaction usable on the radio data terminals running Internet Explorer browser. There are numerous blogs and guides on how to generate the templates thus I will not focus on the generation here.
Initially the screens were rendered like that:
The above screenshot is a simulation of 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 MobileRow class proved to be the solution. Obviously there 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 web browser renders like that:
Now the elements occupy almost all available space. Also the end user acceptance test were successful. To put it simply warehouse people like the look of the screens!
Technical background
An ITS Mobile screen is build rows. Each row is a div of MobileRow class. Chrome developer tools show that nicely:
CSS provides zoom property. However it’s not a standard one: zoom Thus test the solution thoroughly.
Combining zoom property with MobileRow class using internal CSS works for me very well and proved to be 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 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 screens. They could be reduced thus 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 am not seasoned HTML / CSS developer. Thus any comments and improvements to the solution are more than welcomed.
Okumaya devam et...