Super easy zooming of ITS Mobile screens
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:
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:
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!
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.
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.
thanks for sharing your solution.
Indeed, LM transactions in RDT devices are not suitable enough to being comfortably used. We are implementing Warehouse Management and this problem came up as soon as warehouse workers saw the tiny buttons they need to press, so that they would additionally need a digital pen to precisely click the right button and don't mess up the whole transaction.
The devices we've got use Android as OS, Chromium as web browser and additionally the Enterprise Browser app configured to directly launch LM01 transaction.
Just to playing somewhat around, and since the solution will be used in different type of devices, I wanted to apply some 'responsiveness' via @media rules. It worked fine when testing in Chrome for desktop, but not with RDT device´s Chromium nor Enterprise Browser app.
Then I just switched the solution to some simple CSS enlargements to get bigger buttons in Chromium, which was ok; however, it didn't make any effect on Enterprise Browser app. Now, we are in contact with the device provider´s engineers to see whether the app has some cache, initial state loading, etc. which prevents the changes to take place.
From your blog I understand IE browser solution you applied was totally fine and the users liked it, so I will bear it in mind in case we don't get any solution for Enterprise Browser in the short term. However, I would like to ask you whether you'd ever come across the same issue I have with this ready-to-go Enterprise Browser app.
Thanks in advance.
Thank you for your comment.
Frankly speaking I don't have any experience with Enterprise Browser. However from Zebra web page I recon it's just another web browser with some additional features
The use case I've described involved Motorola devices with Windows Mobile and IE web browser.
I'd say you don't have to worry about any responsiveness of your applications in SAP WM scenarios. SAP provides a bunch of standard LM* transactions and ITS Mobile just renders its screens as HTML pages. It's nothing fancy, no HTML5, no SAPUI5, no Fiori-like - just simple HTML pages. I'd keep that as it is. If you need to adjust the screen layout to device screen resolution, I'd suggest profile definitions in LRFMD transaction. There you can specify the screen size of the user's mobile device. SAP provides separate screens in LM* transactions for each screen format defined in LRFMD. You can as well define your own screens and LM-like transactions. That's exactly what I've done in the case described in the blog.
Having said that why don't just stick to Chromium or IE browser on your mobile devices? I'm quite sure it will be much easier to implement, tweak CSS and test.
Thanks for your blog Dominik!
I was struggling with Device Display of ITS Applications and your tip was really helpful.
Tweaking CSS is really the simplest way of adjusting the look&feel of the apps.
@Manuel, If changes does not take effect, maybe is ITS cache's that is taking old MIME CSS. You may try going to SMICM Transaction > More > Goto > HTTP Plug-In > Server Caché > Invalidate Globally, and try re-publishing and loading again.
Hope it helps
Thanks Dominik for this interesting information.
Hi Frank Rothkamm unfortunately I'm not aware of any in-depth training on ITSmobile and its HTML templates and CSSes.
I guess we are doomed to trial&error and SAP Community knowledge.
The problem with this solution that you mention is that you need to modify the zoom in all the templates of the application. I had thought to use a css and indicate it in the INCLUDECSS parameter so I wouldn't have to modify all the templates. But I can't get the css to find it.
I have a problem using an internal css file, I think the css file is looking for it in a different path to where the service is.
I have followed the wiki but I don't know why the service is in one path and the css looks for it in another.
Chrome looks css file in /sap/public/bc/its/mimes but the service is not in that path
Internet Service is in /sap/bc/gui/sap/its/test/mobile/
Can someone help me?
Thank you for the comment. You are absolutely right. However in my specific case that was the goal - to modify this one single screen without touching the others; the customer needed this one isolated modification.
See if the note 3056108 - ITSmobile: How to use ~ITSMOBILECSSINCLUDE parameter helps you.
Not being an ITS expert, I think that is how ITS services are organized, that CSS files sit under a different path that the path to the service itself.
For instance, standard ITSMOBILE service. The path to the service is sap/bc/gui/sap/its/test/mobile/itsmobile00 as visible in SICF:
The service itself is defined in SE80:
The ITSMOBILE.CSS file is available in the path sap/public/bc/its/mimes/itsmobile00/98/itsmobile00.css and I can access the file with the web browser: