Entity Field - Custom Get, Set, and Display Value Formatting
Format the values of the cells in Table or Grid. Append or prepend custom HTML to fields on the Details UI.
Display Formatting Options and Custom Get and Set
Display formatting for an Entity Field on the Entity Search and Details UIs can be achieved by providing a JavaScript object in an Entity Field's UI Properties > Custom UI Properties property.
Custom get and set logic for a Field's value on the Entity Details UI can also be specified.
Example: See the Progress field in the XLib.Samples.Todo > Task Entity.
See the following table for the properties of the JavaScript object.
Key | Function | Applied To | Description |
valueFormatter | function(fieldVal, fieldName, row) | Search UI - Column | Returns a formatted value, such as a custom HTML. Can be used to add interactive HTML components.
|
get | function(fieldVal, fieldName, data, component) | Details UI - Input Field | Custom getter for the value of a Field's input of the Details UI
|
set | function(fieldVal, fieldName, data, component) | Details UI - Input Field | Custom setter for the value of a Field's input of the Details UI
|
append | function(fieldVal, fieldName, data, component) | Details UI - Input Field | Append custom HTML to the input field
|
prepend | function(fieldVal, fieldName, data, component) | Details UI - Input Field | Prepend custom HTML to the input field
|
Sample Value:
{
get: function(fieldVal, fieldName, data, component) {
if (!fieldVal) {
fieldVal = 'Enabled';
component.dataModel[fieldName] = fieldVal;
}
return fieldVal;
},
set: function(fieldVal, fieldName, data, component) {
component.dataModel[fieldName] = fieldVal;
},
valueFormatter: function(fieldVal, fieldName, row) {
var columnIcon = "";
if (fieldVal == 'Enabled') {
columnIcon = "<i aria-hidden='true' class='material-icons q-icon'>check</i>";
} else {
columnIcon = "<i aria-hidden='true' class='material-icons q-icon'>block</i>";
}
return columnIcon + fieldVal;
},
prepend: function(fieldVal, fieldName, data, component) {
//return HTML to prepend to field/column cell
},
append: function(fieldVal, fieldName, data, component) {
//return HTML to append to field/column cell
}
}