Formatters

Formatters allow you to style data from your backend system in way that is more intuitive to your users.

The date formatter allows you to format a field as a date.

Properties

PropertyDescription
nameSet this to “date” to use this formatter.
formatThe visual format of the date. Check out strftime for valid options.

Examples

DatePickerInput

At the top level of the DatePickerInput properties, you can use the following:

"inputFormatters": [
  {
    "name": "date",
    "parameters": {
      "format": "M/D/Y"
    }
  }
]

The result will look like this:

DataTable

Within a DataTable, you can format a column as a date by using the following:

{
  "formatter": {
    "name": "date",
    "format": "M/D/Y"
  },
  "component": {
    "name": "DatePickerInput",
    "inputFormatters": [
      {
        "name": "date",
        "parameters": {
          "format": "M/D/Y"
        }
      }
    ]
  },
  "name": "EDATU",
  "label": "Delivery Date"
}

The result will look like this:

The linkTemplate formatter allows you to add a navigation link to another page with references to data on your current page.

Properties

PropertyDescription
nameSet this to “linkTemplate” to use this formatter.
pathnameThe URL of the destination. Clear will automatically prepend this path with https://yoursubdomain.clearui.com/clearui/.
target (Optional)A value of “target”: “_blank” allows you to open the link in another tab or window.

Examples

Input

To navigate to another page from an input, you can use the following:

"formatter": {
  "pathname": "customers/customer/?CUSTOMER={0}",
  "name": "linkTemplate"
}

The result will look like this:

DataTable

Within a DataTable, you can add a hyperlink to a column by using the following:

{
  "formatter": {
    "pathname": "products/material/?MATERIAL={MATNR}",
    "name": "linkTemplate"
  },
  "required": true,
  "name": "MATNR",
  "label": "Material"
}

The result will look like this:

The number formatter allows you to format a field to look like currency, percentages, times, or numbers with decimal places.

Properties

PropertyDescription
nameSet this to “number” to use this formatter.
formatThe visual format of the number. Check out numbro.js for valid options.

Examples

Input

To format an input as currency, you can use the following:

"formatter": {
  "name": "number",
  "format": "$0,0.00"
}

The result will look like this:

DataTable

Within a DataTable, you can format a column as currency by using the following:

{
  "formatter": {
    "name": "number",
    "format": "$0,0.00"
  },
  "name": "KBETR",
  "label": "Unit Price"
}

The result will look like this:

The time formatter allows you to format a field as time.

Properties

PropertyDescription
nameSet this to “time” to use this formatter.
formatThe visual format of the date. Check out strftime for valid options.

Examples

TimePickerInput

At the top level of the TimePickerInput properties, you can use the following:

"formatter": {
  "name": "time",
  "format": "HH:MM:SS"
}

The result will look like this:

DataTable

Within a DataTable, you can format a column as time by using the following:

{
  "formatter": {
    "name": "time",
    "format": "HH:MM:SS"
  },
  "required": true,
  "name": "ERTIM",
  "label": "Creation Time"
}

The result will look like this: