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
| Property | Description |
|---|---|
| name | Set this to “date” to use this formatter. |
| format | The 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
| Property | Description |
|---|---|
| name | Set this to “linkTemplate” to use this formatter. |
| pathname | The 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
| Property | Description |
|---|---|
| name | Set this to “number” to use this formatter. |
| format | The 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
| Property | Description |
|---|---|
| name | Set this to “time” to use this formatter. |
| format | The 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:
