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: