Skip to Content
Technical Articles

Super easy zooming of ITS Mobile screens

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.

3 Comments
You must be Logged on to comment or reply to a post.
  • Hi Dominik,

    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.

  • Hi Manuel,

    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

    https://www.zebra.com/gb/en/products/software/mobile-computers/mobile-app-utilities/enterprise-browser.html

    https://www.zebra.com/content/dam/zebra_new_ia/en-us/solutions-verticals/product/Software/Mobility%20Software/enterprise-browser/enterprise-browser-spec-sheet-en-us.pdf

    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.

    Best regards

    Dominik Tylczyński

  • 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

    Regards!

    Luciano