SAP GUI for HTML on Touch Devices

Until now, the support of touchable controls has not been fully offered. With SAP S/4HANA Cloud 1905 and SAP S/4HANA (on-premise) 1909, the touch-enablement of the SAP GUI for HTML framework will be finally completely available for the Belize and Quartz themes.
In this blog article, new adjustments, defined gestures and the preserving of existing controls will be listed.

Touch-enabled applications

• Controls are rendered identically as usual to enable a good user experience.
• After some complements, all controls can be accessed via touch gestures now.
• A few functions had to be moved to the context menu to enable them for touch screens.
• It’s an out-of-the-box solution, so no further adjustments are needed.

Tree Control with the Single Selection Column

You can single tap (touch) one of the radio buttons to select the whole row. The selection highlights the desired choice in a user-friendly way.

By tapping, you can also drag a column…

… and drop it.

Fullscreen ALV Grid

A new ALV Grid fullscreen button is also part of touch-enablement. The button is placed at the end of the ALV toolbar. It allows you to enlarge the grid in the user area for a better interaction.

The following picture shows the screen after having pressed the fullscreen button:

Overall, the following touch gestures have been integrated:

How to Enable FLP tiles for Touch Devices

SAP Fiori launchpad is a shell with SAP Fiori apps. It’s also another entry point for SAP GUI for HTML on desktop and mobile devices.
The Launchpad customizing allows to enable specific apps on different device types:

• Desktop
• Tablet
• Phone

The defined settings determine on which device type to display the tiles.
Normally, all three types are selected by default. However, it could be possible that for some tiles, which were built in the past, the types Tablet and Phone are deselected. In this case, SAP GUI for HTML tiles will not be displayed on these devices.
Therefore, make sure to enable the Tablet type of the tiles you want to interact with on mobile devices by marking the checkboxes using your Launchpad customizing.
For more information, see: SAP Help Doc

What can I Do to Make My App Work Better?

• The apps work like on the desktop, just on a smaller screen:
  • If you make your browser window smaller, you will see the same effects like on tablets.
  • In many cases, it helps if the minimum size of a container is increased to improve usability.
• Some transactions contain functionality that is only available through double-click. For touch-enablement this functionality must, therefore, be made available in a different way, so in this case note:
  • Every function should also be accessible through menu or toolbar.
  • This also gives the action a name that can be displayed.
  • If you have such a functionality, you can add an entry to the context menu, for example.

Further Links

For information on touch-enablement of the Classical UIs in general, see also this blog.