Hello,
is it possible to customize the Attribute Table in Web AppBuilder App based on attribute of features? What I need is change color of the row if some attribute has error state.
Thanks a lot
Regards
Zdenek
Solved! Go to Solution.
Zdenek,
In the _featureTable.js file find the queryExecute function and make this addition:
....
this.changeToolbarStatus();
aspect.around(this.grid, "renderRow", function(original) {
return function(object) {
var row = original.apply(this, arguments);
if(object.Desc_ === 'Arson'){ //object is the row data object so change the field name to your own
html.addClass(row, 'redRow');
}
return row;
};
});
this.emit('data-loaded');
},
and add this css rule to your [install dir]\\server\apps\[app#]\widgets\AttributeTable\css\style.css
.redRow {
background-color: red !important;
}
Zdenek,
In the _featureTable.js file find the queryExecute function and make this addition:
....
this.changeToolbarStatus();
aspect.around(this.grid, "renderRow", function(original) {
return function(object) {
var row = original.apply(this, arguments);
if(object.Desc_ === 'Arson'){ //object is the row data object so change the field name to your own
html.addClass(row, 'redRow');
}
return row;
};
});
this.emit('data-loaded');
},
and add this css rule to your [install dir]\\server\apps\[app#]\widgets\AttributeTable\css\style.css
.redRow {
background-color: red !important;
}
Robert,
thank you for your reply. I did additions you advised but nothing changed.
My feature class is made from feature collection in the code. Could it be a problem?
I have a field "Severity" and if it has value of "1" I need red row so I changed your code to
if(object.Severity === '1')
Zdenek,
Is the 1 a string field or a number? If it is a number then you need to remove the '1' quotes from your code.
Robert,
the field is a string type.
Zednek,
I don't think it has anything to do with the feature collection. As you can see in my screen shot I have it working.
Do your web console say you have any errors?
Do you have one of those severity features in your maps view?
Robert,
It works! but..... It works only when I push Refresh in the Attribute Table.
When I open Attribute Table from Layer List widget or from arrow in the bottom of the screen the row is white and when a push Refresh it turns red.
Do you have any idea how to make it red for first open?
Sure just add a this.grid.refresh(); after the code I provided.
That's it.
Thank you a lot!
Zedenek,
The refresh option was not a good workflow as the table is being refreshed twice each time. Here is a better implementation (line 26 - 34):
createTable: function(columns, store, recordCounts, autoWidthMode) {
if (this.grid) {
this.grid.set("store", store);
this.grid.set('columns', columns);
this.grid.refresh();
} else {
var json = {};
json.columns = columns;
json.store = store;
json.keepScrollPosition = true;
json.pagingDelay = 1000;//like search delay
json.allowTextSelection = true;
json.deselectOnRefresh = false;
if (!this.layer.objectIdField) {
json.minRowsPerPage = this.layer.maxRecordCount || 1000;
json.maxRowsPerPage = this.layer.maxRecordCount || 1000;
json.selectionMode = 'none';
}
var demands = [OnDemandGrid, Selection, ColumnHider, ColumnResizer, ColumnReorder];
this.grid = new(declare(demands))(json, html.create("div"));
html.place(this.grid.domNode, this.domNode);
this.grid.startup();
aspect.around(this.grid, "renderRow", function(original) {
return function(object) {
var row = original.apply(this, arguments);
if(object.Desc_ === 'Arson'){
html.addClass(row, 'redRow');
}
return row;
};
});
....