Customization of Attribute Table

4975
34
Jump to solution
02-17-2018 10:03 AM
ZdeněkSoldán
Occasional Contributor

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

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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;
}

View solution in original post

34 Replies
RobertScheitlin__GISP
MVP Emeritus

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;
}
ZdeněkSoldán
Occasional Contributor

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')
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
ZdeněkSoldán
Occasional Contributor

Robert,

the field is a string type.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

ZdeněkSoldán
Occasional Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sure just add a this.grid.refresh(); after the code I provided.

ZdeněkSoldán
Occasional Contributor

That's it.

Thank you a lot!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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;
          };
        });
....