topic Re: Customization of Attribute Table in Web AppBuilder Custom Widgets Questions

Customization of Attribute Table

ZdeněkSoldán — Sat, 17 Feb 2018 18:03:05 GMT

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

Re: Customization of Attribute Table

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:02:38 GMT

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

Re: Customization of Attribute Table

ZdeněkSoldán — Tue, 20 Feb 2018 18:37:45 GMT

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')

Re: Customization of Attribute Table

RobertScheitlin__GISP — Tue, 20 Feb 2018 18:41:51 GMT

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.

Re: Customization of Attribute Table

ZdeněkSoldán — Tue, 20 Feb 2018 18:44:22 GMT

Robert,

the field is a string type.

Re: Customization of Attribute Table

RobertScheitlin__GISP — Tue, 20 Feb 2018 18:50:46 GMT

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?

Re: Customization of Attribute Table

ZdeněkSoldán — Tue, 20 Feb 2018 19:15:42 GMT

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?

Re: Customization of Attribute Table

RobertScheitlin__GISP — Tue, 20 Feb 2018 19:26:22 GMT

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

Re: Customization of Attribute Table

ZdeněkSoldán — Tue, 20 Feb 2018 19:30:25 GMT

That's it.

Thank you a lot!

Re: Customization of Attribute Table

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:02:41 GMT

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

Re: Customization of Attribute Table

ZdeněkSoldán — Wed, 28 Feb 2018 20:46:56 GMT

Robert,

thank you again. I have one more problem with automatic refreshing of the AttTable.

I have a next widget which ask for data every minute. When the AttTable is opened I would like to automatic refresh it everytime when the request is called.

I tried an approach with communication between widgets but unsuccessfully.

Was it a good approach?

Re: Customization of Attribute Table

RobertScheitlin__GISP — Wed, 28 Feb 2018 20:55:02 GMT

just get a reference to the AT widget and call refresh inside the code/widget that is doing the data update every minute.

Re: Customization of Attribute Table

ShailendraVerma1 — Tue, 17 Sep 2019 12:08:20 GMT

Thank you so much! It has matched with my result. That I want to do.

And can also render column also. Please let me know.

Re: Customization of Attribute Table

RobertScheitlin__GISP — Tue, 17 Sep 2019 12:48:25 GMT

The location is "[install dir]\server\apps\[app#]\widgets\AttributeTable\table\_FeatureTable.js" and the createTable function.

Re: Customization of Attribute Table

ShailendraVerma1 — Wed, 18 Sep 2019 04:02:34 GMT

Thanks, It's worked. Can we render the particular cell instead of row. Please guide me if you know how to do it.

Re: Customization of Attribute Table

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:02:44 GMT

To do an individual cell then this code would apply.

        aspect.around(this.grid, "renderRow", function(original) {
          return function(object) {
            var row = original.apply(this, arguments);
            if(object.Desc_ === 'Arson'){
              var cells = query('.field-Desc_', row);
              html.addClass(cells[cells.length -1], 'redRow');
            }
            return row;
          };
        });‍‍‍‍‍‍‍‍‍‍

Re: Customization of Attribute Table

ShailendraVerma1 — Wed, 18 Sep 2019 15:19:21 GMT

Many Many Thanks @Robert!

Re: Customization of Attribute Table

ShailendraVerma1 — Wed, 18 Sep 2019 15:58:52 GMT

Getting error in below line code:

var cells = query('.field-Desc_', row);

Re: Customization of Attribute Table

RobertScheitlin__GISP — Wed, 18 Sep 2019 16:08:44 GMT

so you understand that you have to modify that line to match the field you are searching for right?

var cells = query('.field-YOURFIELDNAME', row);

Re: Customization of Attribute Table

ShailendraVerma1 — Fri, 20 Sep 2019 13:21:27 GMT

It's worked well!

I have another question, can we update cell value also. Please suggest.