Skip to Content
Technical Articles
Author's profile photo Irina Zhilina

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.

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Thanks Irina - I've added this to the SAP Fiori for SAP S/4HANA wiki - Expert Deep Dive page

      Author's profile photo Irina Zhilina
      Irina Zhilina
      Blog Post Author

      Thanks a lot Jocelyn!

      Author's profile photo K Anandh
      K Anandh

      Hi Irina Zhilina,

       

      We are trying to build POC in S/4HANA 1909. We are experiencing some Technical Bottleneck in Webclient UI Integrated Mode in FLP.

      Could please provide more details on How to build this Integrated Mode in S/4HANA 1909?

      I am sorry, if this is not right place to pose this question.

       

      Thanks & Regards

      Author's profile photo Irina Zhilina
      Irina Zhilina
      Blog Post Author

      Hi Anandh,

       

      No worries! 🙂

      Have you checked this blog by Saminder Kaur? If not, please try it first.

      https://blogs.sap.com/?p=876071

      Anyways, we can move this conversation to the Messenger.