Generating Fiori UIs
In the previous blog post, we explained how to use the SAP UI5 generation provided with SAP BPM to create task UIs. These generated UIs have been a useful starting point for developing your own UIs. Starting with NetWeaver 7.50 SP02, further improvements for the generated task UIs are now available, without changing the steps required to generate task UIs.
#1 SAP Fiori UIs are generated
SAP Fiori guidelines provide best practices for usable and reasonable UIs. BPM UI5 generation now follows these set of rules defined by the Fiori standards. Technically, it means that the generated UIs use the sap.m UI elements and controls.
#2 Collections are rendered in tables In the previous version of the BPM UI5 generation, collections have been simply bound to the first entry in the collection. Manual effort was required to change this into a table format. The improved BPM UI5 generation, which is available as of NetWeaver 7.50 SP02, now automatically generates a table. The table surely includes all fields and elements of the complex data type, and also functionalities such as adding and removing lines and displaying the number of table entries.
#3 Subpages for nested complex data types
Simple types in a collection are now rendered as a table. However, what happens in case the collection contains a complex data type? With the enhanced UI5 generation of BPM, even this case is covered. An additional subpage is generated. Every line item of the table in the main page contains a navigation element to the respective subpage. Each subpage contains all attributes of a data type which could also include collections. In addition, the arrow in the top left corner allows navigating back to the main page. Double nested data types are also possible and supported with the new BPM UI5 generation.
#4 Data type dependent entry fields
The latest version supports data type dependent entry fields. For date, datetime and time fields, a date picker control is generated. According to the Fiori guidelines, the alignment of these fields in tables is right. (Standard alignment is left.)
Previously, the boolean fields have been generated as checkboxes. With the new generation, two different controls are generated. If the boolean value is part of a complex type in a table, it is shown as a checkbox, and otherwise as a switch control.
For int values there is a specific handling in tables regarding the alignment. Standard alignment is left, however for int values it is right.
SAP BPM provides an enhanced version of the SAPUI5 task generation with NetWeaver 7.50 SP02. This contains a new style, improved SAPUI5 control usage for specific data types, table support for complex data types, and subpage support for nested complex types. Now it gets easier to build responsive, complex UIs.
It would be awesome to generate SAP UI5 from any ODATA-Service not only from BPM-Context. So you could generate a base UI from your own TaskData-Service of your business layer 😉 .
You can actually do this with the SAP Web IDE.
Export the generated UI5 application as a ZIP, and extract into a Web DC project...
thanks for reply. I haven't done much with the Web IDE yet but i will give that a try and maybe write a blog about the experience 😉 . I hope it also uses sap.m and follows the fiori pattern.