***TEAM WDA***: Let Your Applications Breath – Responsive Content Padding


What is it? 

The padding of content towards the browser frame or within controls adjusts to the browser size:
Small browser – small padding, big browser – big padding. 

In other words – the white space or ‘breathing space’ (as our UX designers call it 😊) adjusts to the available space. 

This works also for popups: small popup –small padding, big popup – big padding. 

With SAP_UI 7.57 Web Dynpro ABAP supports responsive paddings as another step towards a modern UI.

The great news

All applications built with the Floorplan Manager (FPM) will improve directly – as all the paddings are adjusted by the FPM framework automatically.


How to adapt free-style Web Dynpro applications? 

If you still have some freestyle Web Dynpro ABAP applications in use, you can adapt these applications as well.  

The basic steps: 

  • Remove the default window padding  
  • Use 100% width for controls which should span the whole window 
    • On popups for example the accordion or a panel stack 
    • On the main window for the page header 
    • The message area  
  • Set content padding to the container-like controls which should show padding 
  • Adjust layout paddings to get a perfect overall alignment 

In the test application WDR_TEST_MSG_AREA_RESP you can try out these changes. 

For examples of this principle delivered with this release, see the ‘Adapt Filters’ dialog box in the Filter Bar and the value help dialog box.

 

More details can be found in note ‘How to: Enable Responsive Content Padding’