How to handle dynamic date formats in Fiori as per SU01/SU3 user defaults

[Former Member]

Fiori does not support the automatic handling of date formats in standard. This blog will help you if you want to see the date shown on the fiori app formatted as per the user’s setting in the backend user defaults in transaction SU3.

Basically, a fiori app requires the date format to be defined at the UI level. You might be aware of the formatting options for example: formatOptions: { style: 'medium'}. There are multiple other formatting options available and you could use any one of them(style, pattern) for the date fields.

There are 2 ways you can achieve the formatted date as per the user defaults in txn SU3.

Way 1: Handle it in the fiori app using a formatter javascript.

1. Enhance your gateway OData service to retrieve the personal settings/user defaults of the user. Use Function module SUSR_USER_DEFAULTS_GET to get the user defaults.
2. Create your own Javascript file zformatter.js or extend the standard javascript util/Conversions.js to add your own JS function for handling the date conversion.
3. In the new function, set the date pattern as per the date format of the user retrieved from the OData results.

               var oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({pattern: "MM-dd-yyyy"});

                    return oDateFormat.format(new Date(value));

4. Extend the view and maintain the formatter too along with the property binding for the relevant date field. Example:

{path: 'CreatedOn',  formatter: 'cross.fnd.approve.requests.ZExtension.zformatter.formatterDate'}

Way 2: This method would appeal more to seasoned ABAP developers who are starting to learn SAPUI5.

1. When you enhance your gateway service, do not use the type Edm.DateTime for any Date fields. Instead use the type Edm.String.
2. When retrieving the date, get the formatted date from the backend.
3. Ensure that you have changed the property binding accordingly since the date field should not be of type ‘sap.ca.ui.model.type.Date’ and make sure to remove the formatOptions.

I would personally go with Way 1 since it is a more reliable solution. But there is no harm in adopting Way 2 if you are have only read-only date fields like all the approval applications in fiori.

However, in future I expect SAP to provide an option to handle this conversion in the fiori framework itself, probably also a personal settings link on the Launchpad which allows users to display/change their user defaults like preferred number format(for Currency), date format, printer, etc.

Until then, hope this helps someone out there wanting to get this working in their fiori applications. You can follow similar approaches for currency formatting too.