Extending JSON responses to include dynamic (Transient) attributes in Oracle JET
What happens when you need to include a column in your table that isn’t returned from your API? Maybe the column will consist of some information processed at runtime by existing data, such as a concatenation (first name and last name), or it may be conditional logic.
Simple concatenations can be included within your view’s table template, however there may be cases where the business logic is too complex for calculating this extra column, or the data may be coming from another service. In these scenarios its better to add an extra attribute to your model — a dynamic attribute. In ADF we used to call these transient attributes.
I came across this use case in a project that called out to a service to perform actions on one or more rows in a table. If this service failed to process the rows for any reason, I wanted to highlight the failed rows visually to the user.
In the example I describe below, the use case is stripped back, I am simply extending my model to include some conditional logic. If the conditional logic holds true, then we highlight the row in red by adding an extra attribute onto the JSON response and using that extra column to toggle the row colour.
Although a simple example, it is a good starting point for more complex scenarios.
Model Data Parse Example
From the cookbook*, extend your model by parsing the response:
viewModel
self.parseDept = function (response) {
if (response['DepartmentId'] == 10 || response['DepartmentId'] == 50) {
response['failed'] = true;
} else {
response['failed'] = false;
}
return response;
};self.Department = oj.Model.extend({
urlRoot: self.serviceURL,
parse: self.parseDept,
idAttribute: 'DepartmentId'
});
view
<oj-table id="table" aria-label="Departments Table"
data='[[datasource]]'
selection-mode='{"row": "multiple", "column": "multiple"}'
columns='[{"headerText": "Department Id",
"field": "DepartmentId",
"id": "column1"},
{"headerText": "Department Name",
"field": "DepartmentName",
"id": "column2"},
{"headerText": "Location Id",
"field": "LocationId",
"id": "column3"},
{"headerText": "Manager Id",
"field": "ManagerId",
"id": "column4"}]'
row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_tmpl", true)]]'>
</oj-table><script type="text/html" id="row_tmpl">
<tr data-bind="css: { highlight: failed == true }">
<td data-bind="text: DepartmentId"></td>
<td data-bind="text: DepartmentName"></td>
<td data-bind="text: LocationId"></td>
<td data-bind="text: ManagerId"></td>
</tr></script>
css
.highlight {
background-color:#ea5b6e;
}Extending your model in Oracle JET gives a lot more flexibility than using transient attributes in ADFBC. You are no longer restricted to groovy code, and can therefore include more advanced business logic.
— DC
The following cookbook examples have been used for this article:
