Designing WebClient UI Pages in SAP Fiori Style

To enable consistent user experience for SAP S/4HANA customers using WEBCUIF based applications, we introduced runtime transformation of our classic form views into SAP Fiori style.

Runtime transformation alone does not always produce perfect results and, therefore, might need some  manual adjustments. To facilitate the design process, we enhanced the WEBCUIF Configuration Tool so that admin users and developers could easily modify or create new versions of configurable form views in SAP Fiori style.

In brief,

• there can be two layout versions maintained for the same configuration of a form view, fixed (old classic design) and responsive (SAP Fiori design)

• responsive layouts can be created from scratch or by transforming existing fixed layouts
• users can add new fields, groups and configurable areas, remove them and arrange layout elements into flexible columns (up to 4).
• responsive behavior and runtime presentation of layouts can be tested directly in the Configuration tool.

Migration to SAP Fiori 3 design is of great importance for UX consistency reasons. Even though the fixed layouts are still supported, we do not recommend them for further use unless absolutely necessary, like in case of highly customized pages containing plain HTML. Those kind of views are not transformable and need some rework to support responsive layouts.

We also adopted Dynamic Header, a signature element of SAP Fiori Object Page. It is now available for use with the responsive layouts.

Creation process is simple. Templates are provided in the Header XML of the Configuration Tool for the supported facets, Key Value, Form, Image and Progress Indicator. 

The enhanced WEBCUIF Configuration Tool is included in release SAP S/4HANA 1909 FPS1.

Yo can find more details on responsive layouts and dynamic headers here:

SAP standard note 2858410 – Responsive Layout in the configuration tool for form views.

SAP Help Portal – https://help.sap.com/viewer/62055d1ef81d43f3aa41473061d86046/1909.000/en-US/f319c3d618264e5ebd65ff55ee43fe53.html

I will update the above link as soon as Help for SAP S/4HANA 1909 FPS1 is available.