Web AppBuilder Attribute Table

[CenterlineMapping]

Hello Esri Developers,

In Web AppBuilder, we are developing a custom widget that will create data tables displaying raster pixel values for a given x,y.  Rather than create a separate html page to display the data tables, or display data tables in the widget (which is rather skinny for displaying tables), is it possible and easily supported to write the data tables to the Attribute Table widget.  Has anyone utilized the Attribute Table widget for this purpose rather than displaying map feature layers? 

The process goes as follows:

User turns on multiple raster layers in the map.

User opens the custom data tables widget.

User add latitude, longitude coordinates and clicks submit.

Widget displays data tables for each raster.

lat/long     jan     feb     mar     apr     may     jun...

layer 1     5.2     5.6     5.9     6.0     6.2     6.6

layer 2     5.5     5.7     5.9     6.6     6.4     6.9

We would like to write this type table to the Attribute Table widget and utilize the real estate of the horizontal widget.

Thanks for your help.

[RobertScheitlin__GISP]

Centerline Mapping,

    Tables are definitely supported in the Attribute Table Widget. You would have to make a FeatureLayer from your data (use this sample Feature collection | ArcGIS API for JavaScript ).

And use this function like this to open the AttributeTable widget using your FeatureLayer:

_openResultInAttributeTable: function (currentLayer) {
        var aLayer = {
          layerObject: currentLayer,
          title: currentLayer.name,
          id: currentLayer.id,
          getLayerObject: function () {
            var def = new Deferred();
            if (this.layerObject) {
              def.resolve(this.layerObject);
            } else {
              def.reject("layerObject is null");
            }
            return def;
          }
        };
        if (!Object.create) {
          Object.create = function (proto, props) {
            if (typeof props !== "undefined") {
              throw "The multiple-argument version of Object.create is not provided by this browser and cannot be shimmed.";
            }
            function ctor() {}
            ctor.prototype = proto;
            return new ctor();
          };
        }
        this.publishData({
          'target': 'AttributeTable',
          'layer': Object.create(aLayer)
        });
      },

[CenterlineMapping]

Robert,

Thanks for your suggestion!  We are running an identify task on an Image Service, and with the returned JSON data we are creating tables with 14 columns and up to 25 rows.  We would like to display these tables in a horizontal <div> rather than the vertical widget panel.  It seems that the attribute table requires feature collections and the popup window requires on map click events.  I'm looking into a solution that allows us to display these tables in a popup window, without a map click event on a specific feature layer, or the attribute table without a feature collection.  I will look into making a popup window with the data tables when the user clicks submit to get the json data and display the tables in the popup or attribute table.  Thanks again for your feedback!

[LefterisKoumis]

Robert,

Can you open multiple tabs to display multiple tables from multiple layers? If you call the provided function multiple times, will it create an additional tab?

Thanks.

[RobertScheitlin__GISP]

Lefteris,

   Yes it should.

[LefterisKoumis]

Your reply to the original post, you suggested to create feature layer through a feature collection. What about creating a feature layer out of a features selection on a query at a feature layer? I tried it and it gives me an attribute table that is blank with no error messages. The function you posted above it expects a layer id and name to be passed on. So,  I assigned an id and name to the featurelayer, however, the console.log, placed in the function , it returns undefined for the featurelayer.name but not for the id. Why?

Thanks.

var featureLayer = new FeatureLayer("https://map.dfg.ca.gov/arcgis/rest/services/Project_PAD/PAD/MapServer/0",{

  mode: FeatureLayer.MODE_SELECTION,

id: "myid",

name: "myname",

  outFields:["*"]}

  ); 

  myfeatureLayer.on("selection-complete", lang.hitch(this, function(){

  this.selectInBuffer(myfeatureLayer.getSelectedFeatures());

   }));

          var myquery = new Query(); 

          myquery.geometry = resultEvent; 

          myquery.returnGeometry = true; 

          myquery.outFields = ["*"]; 

          myquery.outSpatialReference = this.map.spatialReference; 

          myquery.spatialRelationship = Query.SPATIAL_REL_INTERSECTS; 

          //featureLayer.queryFeatures(myquery, this.selectInBuffer); 

  var deferred = myfeatureLayer.selectFeatures(myquery, FeatureLayer.SELECTION_NEW);

  deferred.then(this._openResultInAttributeTable(myfeatureLayer));

        })); 

_openResultInAttributeTable: function (currentLayer) { 

  if (currentLayer != null){

  console.log (currentLayer.name);

  }

        var aLayer = { 

---------------------

[RobertScheitlin__GISP]

Lefteris,

  There is a bit more to it then feeding in a regular FeatureLayer. You would still need to use the function I provided in the earlier post.