Create a Template helper to display the createdOn date in a specific time zone
How-to Guide
Extend
Author:
Randy Chan
Changed on:
23 Apr 2025
Key Points
- This article provides an example on how to create a simple template helper which can be used in the mystique manifest.
- With this template helper, the user is able to see the order in "local" created date/time. For example, the order was placed at Adelaide and the customer service representative in Sydney would like to see the order date time in Adelaide time zone.
- Here are the steps to implement the template helper by using Component SDK:
- Create a new function in component SDK
- Import and register the template in index.tsx
- Add the template to the mystique manifest in the setting
Steps
Create a new function in component SDK
Open the Component SDK, create a file TemplateUtils.ts in src/utils folder:
1export const formatDatetoTimeZone = (value: string, timeZone: string) => {
2 return new Date(value).toLocaleString('en-AU', {timeZone: timeZone});
3};
4Language: tsx
Name: TemplateUtils.ts
Description:
The template helper formatDateToTimeZone accepts 2 parameters: 1. the date value and the timeZone string. It will use the Date function and convert the date to the nominated timezone.
Import and register the template in index.tsx
Add the following code to the
`index.tsx`1import { formatDatetoTimeZone } from './utils/TemplateUtils';
2
3TemplateRegistry.register(['formatDatetoTimeZone'], formatDatetoTimeZone);Language: tsx
Name: index.tsx
Description:
[Warning: empty required content area]Add the template to the mystique manifest in the setting
go to the setting: fc.mystique.manifest.oms.fragment.ordermanagement and add few columns in the order list section:
1{
2 "label": "CreatedOn date in NEW YORK time zone",
3 "template": "{{formatDatetoTimeZone node.createdOn \"America/New_York\"}}"
4},
5{
6 "label": "CreatedOn date in Adelaide time zone",
7 "template": "{{formatDatetoTimeZone node.createdOn \"Australia/Adelaide\"}}"
8},
9{
10 "label": "CreatedOn date in Perth time zone",
11 "template": "{{formatDatetoTimeZone node.createdOn \"Australia/Perth\"}}"
12},Language: json
Name: order fc.list
Description:
This is to demonstrate
`formatDatetoTimeZone`Test the template helper
Go to the OMS web app, and refresh the order list page. The tested columns are now displayed:
