Skip to Content
Product Information

SAP Fiori elements floorplans for OData v2 – Highlights as of UI5 1.78 version

It is always interesting to know what is offered with every product release. If you are someone who is already using SAP Fiori elements or someone who is considering the usage of SAP Fiori elements this blog post will help you to get an idea of latest offerings by SAP Fiori elements. Give a read, so that you don’t leave any stone unturned.

Every time I talk to a user of SAP Fiori elements, they are really fascinated about the way how SAP Fiori elements makes application development easier, with some minimal configuration changes to the app descriptor file (manifest.json) or to the annotations.xml, they get a rich UI experience and consistency across all their applications.

As a user myself, I have felt many times how easy my work would have been if I can create business objects staying in the list report. I am very sure many users of SAP Fiori elements would have also felt the same. When the data required to create a BO is very small it is always a hassle to navigate back from List Report to Object for each object creation.

SAP Fiori elements has found a solution to make things much easier now (Thanks to our brilliant design team), and the attractive part is that this is available by effectively maintaining the required fields in the manifest.

Enabling Object Creation Through Dialog in the List Report

Objects with less than 8 required fields can now be created quickly using a dialog on the list report page and worklist, without navigating to the object page.

This feature enables object creation in a single view app with only list report or worklist.

To enable it add the property createWithParameterDialog in the manifest and pass the properties of related entity set as the below example:

"createWithParameterDialog" : {

                        "fields" : {

                            "BusinessPartnerID" : {"path":"BusinessPartnerID"},

                            "CurrencyCode" : {"path":"CurrencyCode"},

                            "BillingStatus" : {"path":"BillingStatus"},

                            "DeliveryStatus" : {"path":"DeliveryStatus"},

                            "OpportunityID" : {"path":"OpportunityID"},

                            "GrossAmount" :{"path":"GrossAmount"}

                        }

                }

Please check this Link for more details

Imagine the experience of a user, who needs to see only few fields for his daily transactions on his mobile device to perform a leave approval, but he ends up seeing all the fields that fits a desktop. Wouldn’t this make his/her work harder by going through all the fields for every transaction?

Are you also one of such a user had come across this hurdle? Time to relax, SAP Fiori elements have got you now.

Objectpage floorplan for Odata v2 is enhanced to support the UI.Importance annotations in their smart forms.

This gives a flexibility to the app developer to show or hide the fields on. small screen devices.

The annotation can take values such as “High/Medium/Low”, and based on these values the decision to show a field on a particular device is made.

Mobile Devices – Only fields with of Importance “High”

Tablets – Only fields with of Importance “High” or “Medium”

Desktop – All fields

The icing on the cake is that, this comes with very minimal changes and very cost effective for maintenance.

Please check this Link for more details.

 

– All fields seen in larger devices in section “General Information”

-Only 2 fields with High Importance are seen in General Information section on Mobile devices

Let us look into another user experience enhancement now, Imagine a user who want to represent the date in a literal term, he/she wants to filter the data based on the time it was created, and it is always easier for such a user who is more used to a literal term of date such a “Yesterday”, “Last 5 months”, “Quarter 1” , to represent the date in the Smart filter bar in the same way than just having a normal date range. Usage of a date in a literal term (i.e semantic date range) would make the transaction easier.

List Report floorplan for Odata v2 is enhanced to provide support for semantic date range on smart filter bar.

Currently in the Smart FilterBar any filter field of type “Date” is shown as a Date Picker in the UI. Where as many of our applications would prefer to show some filter fields with semantic date range such as “Tomorrow”, “Last Week”, “Last 3 Weeks” etc. This is now possible by adding some configurations in the manifest.

"sap.ui.generic.app": {

    “pages”: {

        “component”: {

            "filterSettings": {

                "dateSettings":{

                    "selectedValues": "DAYS,WEEK,MONTH,DATERANGE,QUARTER,YEAR",

                    "fields": {

                        "DatePropert1": {

                            "selectedValues": "TOMORROW,NEXT,LASTYEAR,LAST2WEEKS,LAST3WEEKS,LAST4WEEKS,LAST5WEEKS,YEARTODATE,QUARTER1,QUARTER2,QUARTER3,QUARTER4",

                            "exclude": true

                        },

                        "DateProperty2": {

                            "customDateRangeImplementation": "SOMULTIENTITY.ext.controller.customDateRangeType",

                            "selectedValues": "FROM,TO,DAYS,WEEK,MONTH,DATERANGE,TODAY,TOMORROW,YEAR,YESTERDAY",

                            "exclude": true

                        },

                        "DateProperty3": {

                            "selectedValues": "YESTERDAY",

                            "exclude": false

                        }

                    }

                }

            }

        }

    }

}

 

you can refer to this Link for more details.

 

 

If you are user who user a lot of CRUD operations, you would have noticed the delete form the table always works  in the way that only when an item is selected, the delete button is enabled on the table toolbar and then the delete can be performed. Some of our users requested for an even easier way to delete the objects by having an option within the row itself.

SAP Fiori elements now provides this interesting feature too.

 

Inline delete option in List Report and Object Page tables

 

The inline deletion in a table of list report and object page can now be enabled by setting the inlineDelete property. This enables the deletion of a record just by clicking the Delete button at the end of each record in table without having to select it.

For this set the property to true for tableSettings in the manifest as shown below:

"tableSettings": {

     "inlineDelete": true

}

After you enable this setting, a Delete button is displayed at the end of the row in the table.

Please check this link for more details

 

 

Let’s talk about Message Handling offerings, it is always important to see what is going wrong when you are working on a transaction, and has been improved with many new features, and needless to say it truly stands a class apart.

Message Handling improvements as below

  • The focus in the UI can be moved to the error field with the click of the error from the message popover
  • Even if error appears occurs in the sub object page, it can be now shown in the main object page
  • Grouping and filtering of the messages are possible in the message pop over
  • If error occurs on a table, a message strip is shown above the table
  • The table row, if has an error, is highlighted.

 

Flexible Column Layout support for non-draft application with edit mode

Flexible Column Layout support is a very old feature of SAP Fiori elements, but we have not officially supported it for non-draft application with object edit use cases, until recent times.

The flexible column layout can now be used in edit mode for non-draft apps which have only main object page. However in display mode, 3 column mode can be used.

If you are looking for edit use case in non-draft, you can restrict the application to two column layout by adding below manifest property.

"flexibleColumnLayout": {

                "maxColumnsCount": 2,

                …

}

Please check this Link for more details.

 

These are the highlights of SAP Fiori elements as of  UI5 1.78 version, as mentioned already SAP Fiori elements enables an easier application development and modification, and the maintenance of the same with very minimal effort and cost.

 

6 Comments
You must be Logged on to comment or reply to a post.