Skip to Content
Technical Articles
Author's profile photo Alexander Schmalzhaf

UI5 SmartControls: How to use “Date” and “Time”-related Data Types

 

Why…?

It is quite important to sort out the right combination of OData (V2) Data Type / Annotations and SmartControl settings to match the targeted use case perfectly.

In date- and time-related issues it is not always obvious which combination fits the concrete use case best. Below you find a list to understand a bit when to use what.

Usage recommendation

(sorted descending to their importance/frequency of use):

 

For Dates

Example “Dec. 12th, 2020”
OData Service Metadata
Edm.DateTime with sap:display-format="Date"
UI The SmartControls show only the “date” part of the timestamp, independent of the local time zone (e.g. there is no shift of a date when looked at from two different machines in two different timezones). For input, a date picker is offered.
Real-world sample Use this data type for all dates that are globally not shifted, e.g. birthdays (Mr. Gauß was born on Apr. 30th, 1777, independent if you speak about it in India or America).

 

For Time Stamps containing Date and Time

Example “Dec. 12th, 2020, 19:22:39”
OData Service Metadata
Edm.DateTimeOffset
UI The SmartControls show data and time in local user time zone. For input, a DateTime picker is offered.
Real-world sample Use this data type for timestamps that should be shown in the users timezone, e.g. build timestamps, creation timestamps (a car production was completed at Dec. 12th, 10:21:32 GMT) or the beginning of a virtual meeting (here, every user wants to see “her” specific start timestamp).

 

For Time Stamps containing Date and Time, displayed in their local representation

Example “Jun. 3rd, 2019, 10:00:00”
OData Service Metadata
Edm.DateTime
UI

Currently not well supported by the SAPUI5 SmartControls.

A work around could be to use a combination of two fields, one typed as Edm.DateTime with sap:display-format=”Date” and one typed as Edm.Time.

Real-world sample Use this data type to present a timestamp in its “local” representation and not recalculated to the user’s timezone, e.g. for arrival of a plain on a certain airport (where the user wants to see the local date/time, not recalculated to her current time zone).

 

For Times

Example “19:33:49”
OData Service Metadata
Edm.Time
UI The SmartControls show the time as given by the service. For input, a time picker is offered.
Real-world sample Use this data type to express a certain time on a fixed date or on no specific date, e.g. start and end times for sessions on a onsite event.

 

Conclusion

With the above mentioned hints it might got clearer which data type needs to be taken in the OData service. But there is even more! For further details and hints about how the functions and features of the UI5 Smart Controls can be leveraged and wich specific OData features are supported, please see also the “Smart Controls” area in the UI5 documentation and the respective API reference pages of the controls (SmartField, SmartFilterBar, SmartTable, SmartChart).

 

Assigned Tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Aashima Arya
      Aashima Arya

      Dear Alexandar,

       

      Thank you for sharing this.

      Is there any way i can set time with zone?

      lets suppose time format is long and if i want to edit the time - it should allow me to select time and zone both.

       

      Thank you,

      Aashima

      Author's profile photo Alexander Schmalzhaf
      Alexander Schmalzhaf
      Blog Post Author

      Hello Ashima,

       

      although this question is about a year old let me shortly answer:

      The only possibility to maintain both, (date)time AND timezone, is by modeling these two fields explicitly in the data model.

      So when you really need the possibility to maintain a timezone, you should introduce a property for it. Only with that, you also could think of providing a valuelist for the property listing all availbale timezones.

      Best regards

      Alexander

      Author's profile photo Aashima Arya
      Aashima Arya

      Thank you 🙂

      Author's profile photo Frank Müller
      Frank Müller

      Dear Alexandar,

      Thank you very much for sharing this.

      Do you know if it is planned, that the smart controls will support Edm.DateTime for timestamps correctly?

      Best regards

      Frank

       

      Author's profile photo Alexander Schmalzhaf
      Alexander Schmalzhaf
      Blog Post Author

      Hello Frank,

      according to my knowledge there are currently no discussions to change the support for Edm.DateTime.

      However, there have been discussions to enhance the Edm.DateTimeOffset handling:

      DateTimeOffset is used for date and time - where these are currently recalculated to the local timezone. The point of discussion has been to enable a second "mode": Display a DateTimeOffset timestamp in the timezone given.

      That might also fulfill your requirement.

      Unfortunately I cannot say how the discussions went on and if and when it will make it to the product...

       

      BR
      Alex

      Author's profile photo Frank Müller
      Frank Müller

      Hi Alex,

      thank you very much for your reply.

      That is interesting.

      I'm wondering how I can show / filter timestamps in UTC in a Firoi Elements App without splitting it into 2 fields.

      Is there any Annotation available / planned for it?

      Best regards

      Frank

       

      Author's profile photo Michael Wilk
      Michael Wilk

      We would like to display a timestampe (Type Edm.DateTime) coming from a odata service within our sapui5 app without conversion to the local (user) timezone.

      Is there a way to specify this via local annotations? Like it is possible within a view:

      value="{path: 'detailView>/fromDate', type: 'sap.ui.model.type.DateTime', formatOptions: { pattern: 'dd.MM.YYYY HH:mm', UTC: true }}"

      with the UTC: true parameter?

      Author's profile photo Vladimir Velinov
      Vladimir Velinov

      Could you specify that control do you use? Is it smart field?

      Most of the cases EDM.DateTime is used to display dates due to the lack of EDM.Date type like the one in OData V4. This is done in combination with annotation display-format=Date or constraint displayFormat: "Date". Also you have to use the proper OData type, which is sap.ui.model.odata.type.DateTime

      You have to bear in mind that EDM.DateTime type doesn't carry timezone information. Check the OData V2 date types here.

      So only local and UTC are possible, no arbitrary timezone. About your case you could try (assuming the control is smart field) this snippet, very similar to what you've stated above. Just using proper type

      <smartField:SmartField value="{
         path: 'PathToDateTime',
         type: 'sap.ui.model.odata.type.DateTime',
         formatOptions: {
      	 'UTC': true,
      	 style: 'medium' <!-- or use pattern -->
         }
      }">

      Currently we're working on a solution that would use annotation to instruct the UI to switch between local and UTC for the Smart controls, like Smart field, Smart filterbar and Smart table. This would work with EDM.DateTimeOffset only. I can't give any concrete timeline here, but perhaps we'll deliver it in the next few months.

      Author's profile photo Michael Wilk
      Michael Wilk

      Hi Vladimir,

      thank you for the answer!

      We are using a SmartTable and it works with the "override" method where the field from the odata service (type Edm.DateTime) can be overriden and utc set to true:

      <columns>
          <!--</Column>-->
          <Column id="BEGINNCustom" width="120px" hAlign="End">
              <customData>
                  <core:CustomData id="_IDEGen_customdata1" key="p13nData" value='\{"columnKey": "BEGINN", "columnIndex":"5", "leadingProperty": "BEGINN"}'/>
              </customData>
              <Text id="_IDEGen_text1" text="{i18n>BEGINN}"/>
          </Column>
      </columns>
      <items>
          <!--</ColumnListItem>-->
          <ColumnListItem id="_IDEGen_columnlistitem0x">
              <cells>
                  <Text id="_IDEGen_link0x" text="{path: 'BEGINN', type: 'sap.ui.model.type.DateTime', formatOptions: { pattern: 'dd.MM.YYYY HH:mm', UTC: true }}"></Text>
              </cells>
          </ColumnListItem>
      </items>

      But then the field is automatically display in the table control.

      We would like to set this (UTC: true) on the annotation level for many timestamps without overriding  the fields and changing the default view for the table control.

      We don't want to set a specific timezone we just don't wont the timestamps to be converted into the user's timezone, which is the case and a little bit strange because according to this blog Edm.Datetime fields will not be converted to the user's timezone:

      Real-world sample Use this data type to present a timestamp in its “local” representation and not recalculated to the user’s timezone, e.g. for arrival of a plain on a certain airport (where the user wants to see the local date/time, not recalculated to her current time zone).

      but it behaves different.

      Br,

      Michael

      Author's profile photo Vladimir Velinov
      Vladimir Velinov

      @Michael Wilk please check the reply from Jens.

      cheers,

      Vladimir

      Author's profile photo Jens Pflueger
      Jens Pflueger

      Hello Michael,

       

      there is no annotation for the same but a setting on the SMartTable:

       

      <smarttable:SmartTable ...>
        ...
        <smarttable:customData>
            <core:CustomData key="useUTCDateTime" value="true" />
         </smartTable:customData> 
      </smartTable:SmartTable >

       

      Does this solve your problem?

       

      Best Regards

      Jens

      Author's profile photo Michael Wilk
      Michael Wilk

      Hi Jens,

      this solves my problem! Thank you very much!

      Do you know where I can find all the customData options available?

      Br,

      Michael

      Author's profile photo Jens Pflueger
      Jens Pflueger

      Hello Michael,

      some of the settings are mentioned in the SmartTAble FAQ: https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smarttable.SmartTable%23faq

      Unfortunately not all 🙁 Obviously we need to improve our documentation here.

      I'll take this with me.

      Best Regards

      Jens

       

      Author's profile photo Louay Hashim
      Louay Hashim

      Hello Jens,

      Thank you for the explanation and your solution.
      I have tried the last solution. There were no syntax errors, but unfortunately it has no effect on the displayed date. It still displayed as local time (In my case UTC+1).
      What could be the Problem?

      Data-Type: DateTime
      Control: smartTable
      Sap System: 1.71.28
      Code:

      ....
      <smartTable:customData>
      <core:CustomData id="id_customDate" key="useUTCDateTime" value="true"/>
      </smartTable:customData>
      </smartTable:SmartTable>

      Author's profile photo Jens Pflueger
      Jens Pflueger

      Hello Hashim,

      Do you mean date or datetime? In the description you only mention date but type is DateTime. The setting above covers date and time cases only.

      You may also try the setting

      <core:CustomData key="dateFormatSettings" value='\{"UTC":true,"style":"medium"\}' />

      Without a concrete example and debugging it is hard to say more.

      Best Regards

      Jens