Skip to Content

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.

/wp-content/uploads/2014/06/11_487472.png/wp-content/uploads/2014/06/22_487473.png

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.

To report this post you need to login first.

2 Comments

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

  1. Manish Mohan

    Thank you Varun. Shouldn’t the user have an option to change date settings on Fiori Launchpad under user preferences? Is this something that can be enabled?

    Thank you,

    Manish

    (0) 
  2. Tobias Schnur

    Hello,

    I know this blog is quite old but I think you don’t need to implement your own OData service to get the user date format settings (at least for Fiori 2.0 hosted on ABAP System). During Fiori Startup date format settings for current user are read by the framework (actually in the “abab.js” file) and they are set to configuration object of SAPUI5 core. You can access it with the following logic:

    sap.ui.getCore().getConfiguration().getFormatSettings().getDatePattern("medium");

    I am not sure if this also works for Fiori 1.0 since I don’t have such a system at hand.

    I hope this is helpful for others with the same problem.

    Regards

    Tobias

    (0) 

Leave a Reply