Fluent OMS UI / Admin Console Date Time Format - (include UTC conversion)
Authors:
Randy Chan, Holger Lierse
Changed on:
26 June 2024
Overview
Handy reference guide on how to display date time value on the UI
For Date format and conversion in UI, two functions can be used:
`formateDate`- (if true, then it will leave it as UTC timezone, else, it will convert to the user's browser timezone)
`dateStringFormatter`
Key points
- Examples of how to display date time format in both OMS webapp and Admin Console
For Date format and conversion in UI, two functions can be used:
- formateDate
- dateStringFormatter (if true, then it will leave it as UTC timezone, else, it will convert to the user's browser timezone)
Here is the example output of createdOn based on my GMT+10 timezone:
Created Date: {{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}} | Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}} | Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}} | Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}} | Created On: {{node.createdOn}} | Bad Example: Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}} | Bad Example: Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}} |
16/07/2021, 08:43 | 2021-07-16T08:43:47.279Z | 2021-07-16T08:43:47.279Z | 2021-07-15T22:43:47.279Z | 2021-07-15T22:43:47.279Z | 2021-07-16T08:43:47.279Z | 2021-07-16T08:43:47.279Z |
15/07/2021, 10:24 | 2021-07-15T10:24:54.844Z | 2021-07-15T10:24:54.844Z | 2021-07-15T00:24:54.844Z | 2021-07-15T00:24:54.844Z | 2021-07-15T10:24:54.844Z | 2021-07-15T10:24:54.844Z |
15/07/2021, 10:24 | 2021-07-15T10:24:53.224Z | 2021-07-15T10:24:53.224Z | 2021-07-15T00:24:53.224Z | 2021-07-15T00:24:53.224Z | 2021-07-15T10:24:53.224Z | 2021-07-15T10:24:53.224Z |
1{
2"component": "shared.components.material.DynamicList",
3"params": {
4"graphql": {
5"fragment": "fragment Listing on Order{ id ref retailer{id tradingName} type status retailer{id} workflowRef workflowVersion totalPrice totalTaxPrice createdOn customer{id firstName lastName }} "
6},
7"defaultPageSize": 20,
8"dataSource": "orders",
9"attributes": [
10{
11"label": "i18n:fc.om.orders.index.list.column.orderRef.heading",
12"template": "{{node.ref}}",
13"link_template": "#/orders/{{node.id}}"
14},
15{
16"label": "Created Date: {{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}}",
17"template": "{{formatDate node.createdOn day='numeric' month='numeric' year='numeric' hour='numeric' minute='numeric'}}"
18},
19{
20"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}",
21"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}"
22},
23{
24"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}}",
25"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' false}}"
26},
27{
28"label": "Created Date: {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}",
29"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}"
30},
31{
32"label": "Created Date: {{node.createdOn}}",
33"template": "{{node.createdOn}}"
34},
35{
36"label": "Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}}",
37"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' utc=true}}"
38},
39{
40"label": "Created Date (wrong): {{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}}",
41"template": "{{dateStringFormatter node.createdOn 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' 'true'}}"
42},
43{
44"label": "i18n:fc.om.orders.index.list.column.customer.heading",
45"template": "{{node.customer.firstName}} {{node.customer.lastName}}"
46},
47{
48"label": "i18n:fc.om.orders.index.list.column.status.heading",
49"template": "{{node.status}}"
50},
51{
52"label": "i18n:fc.om.orders.index.list.column.orderType.heading",
53"template": "{{i18n 'fc.om.order.type.'node.type _fallback=node.type}}"
54},
55{
56"label": "i18n:fc.om.orders.index.list.column.orderValue.heading",
57"template": "{{node.totalPrice}}"
58},
59{
60"label": "i18n:fc.om.orders.index.list.column.retailerName.heading",
61"template": "{{node.retailer.tradingName}}"
62}
63]
64}
65}Language: json
Name: Sample Code for date time
Description:
[Warning: empty required content area]local time
The local time calculation is based on the "value" date value NOT the current date that you open the Browser. Here is the example on a date in AEST and another one in AEDT where the screen opened on 1-May:
Here is an example of using the dateString Formatter in query variables. If the third parameter, UTC, is set to TRUE, OMS will convert the date to UTC.
Here is an example with two variables one with current timezone (GMT+10) and the other variable with UTC=TRUE:
` "data": {`` "query": "query ($ref: [String], $fulfilments_first: Int, $last_update: DateTime, $last_updateUTC: DateTime) {\n fulfilmentsLocalTime:fulfilments(first: $fulfilments_first, ref: $ref) {\n edges {\n node {\n id\n ref\n expiryTime createdOn\n}\n}\n}\n\n fulfilmentsTime1:fulfilments(first: $fulfilments_first, ref: $ref, expiryTime: {to: $last_update} ) {\n edges {\n node {\n id\n ref\n expiryTime createdOn\n }\n}}\n\n fulfilmentsTime2:fulfilments(first: $fulfilments_first, ref: $ref, expiryTime: {to: $last_updateUTC} ) {\n edges {\n node {\n id\n ref\n expiryTime createdOn\n }\n }\n\n }\n}",`` "variables": {`` "fulfilments_first": 5,`` "last_update": "{{dateStringFormatter (dateAdd day=0) 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]'}}",`` "last_updateUTC": "{{dateStringFormatter (dateAdd day=0) 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]' true}}"`` }`` },`
