Hide scrolling lines on handheld screen. ITSMOBILE. SAP Extended Warehouse Management.

[alexey_karmazin]

 

This blog post describes how to hide scrolling lines on handheld device. Screenshots in this blog were captured based on SAP S/4HANA 1809. Nevertheless, the information provided in this blog should be also relevant for other releases and deployment options,

 

Business Case:

• Existing HTML template has little bit bigger size for a particular device in the warehouse. When HTML page does not fit completely to the screen, even for couple of pixels system automatically add scrolling line, which consumes the space on the screen;

Example:

Before widow width reduction:

After window width reduction:

This example was shown in the Internet Explorer Browser on PC. Nevertheless, the same system behavior is valid for handheld devices. In the context of hardware (handheld devices) window size will depend on screen size.

 

Solution Proposal:

• Adjust HTML template in order to hide scrolling lines to avoid unnecessary screen consumption;


• Please, take into consideration, that in the current guide mobile.css is located in ITSMOBILE and html templates are used for /SCWM/RFUI service. If you want to use the step by step guide you need to consider:
  
  
  
  • Web service name, which is being used in your environment instead of standard /SCWM/RFUI;
  
  
  • Path to mobile.css, which is being used for your service;
  
  
  
  

 

Benefits:

• The change described in this blog post has very low effort. This solution can be really beneficial for the case, when the new device was connected to SAP Extended Warehouse Management and for some reason this device has different screen characteristics from the majority of devices, that are being used in the warehouse. This can happen:
  
  
  
  • During roll-out implementation
  
  
  • Temporary replacement
  
  
  
  

 

Step by step guide:

• Start transaction SE80 and select service ITSMOBILE


• Select file “ITSMOBILE-->Topic 99-->STYLES-->ALL-->CSS”

 

Recommendation: before making any changes make a backup of mobile.css file and html template, in which changes will be implemented.

 

Add new div ZMobileUserArea in the file:

.ZMobileUserArea {

overflow-x:hidden !important;

overflow-y:hidden !important;

}

 

• Determine the function group and screen, which is being used for the display profile

Go to transaction SPRO

Select display profile and press button “Maintain Screens”

Based on the template determine template program and screen number:

• Start transaction SE80. Open internet service, which is being used to connect devices. In our example, internet service name /SCWM/RFUI. Find html template, which corresponds to the screen program and screen number determined on the previous step;

 

Add newly created div class next to the MobileUserArea

<div class="MobileUserArea ZMobileUserArea">`

• Save template and publish changes

• Check results

Start transaction SICF and test service RFUI

Now, in case, if window size is being reduced no scrolling lines are added:

 

The changes can be also checked in the developer mode. To start developer mode in Internet explorer press F12. Go to DOM explorer.

 

Conclusion:

In this blog post step by step guide was provided how to disable scrolling lines in ITSMOBILE.

I hope you enjoyed this blog post and gained new experience. Please, feel free to share you feedback and ask questions.