Format date and decimal

All components allow you to format dates and digits with as much precision as you need. For example, the decimal, 0.31415, is stored and then the developer can format the decimal like 0, 0.3, or 0.31415 to show to users. For dates, you can change the order of or only showcases the day, month, or year. Through date and decimal formats, you can display data catered to the users needs.

Copy link to this section

To format dates and decimal

1. Declare a dependency to uiDemo.

   • To have access to the the data and component Types we use in this page.

2. Create a UI component that displays a list.

   Type

   Copy code to clipboard

   {
   "type" : "UiSdlConnected<UiSdlCollectionList>",
   "component" : {
       "title": "List"
       }
   }

3. Enter the dataSpec field to your UI component.

   • The UiSdlCollectionList component extends UiSdlCollectionListDataSpec which allows custom formatting through the dataSpec field.

4. JSON configuration:

{
  "type" : "UiSdlConnected<UiSdlCollectionList>",
  "component" : {
    "title": "List with Date Format",
    "dataSpec" : {
      "dataType" : "SDLDemoInventory",
      "primaryValueField": {
        "fieldName" : "date",
        "format": {
          "type" : "UiSdlDateTimeParamKindFormat",
          "spec" : {
            "year" : "numeric",
            "month" : "numeric",
            "day" : "numeric",
            "hour" : "numeric",
            "minute" : "numeric",
            "second" : "numeric",
            "timeZoneName" : "long"
          }
        }
      }
    }
  }
}