topic Re: Getting layer data to display in Attribute Table in Web AppBuilder Custom Widgets Questions

Getting layer data to display in Attribute Table

JohnHovanec — Sun, 12 Dec 2021 17:01:28 GMT

I'm building a custom widget and am trying to add a layer to the Attributes Table. I believe my layer is successfully being added to the Attributes Table as I can see the column headers change for the layer when added. My issue is that I'm not seeing any data from my layer show-up in the Attributes Table.

Where does the Attribute Table pull the data from for a layer?

Below is a sample of how I am creating the FeatureLayer that will be added to the table:

 const polyline = new Polyline(polylineJson);
 var routeInfoTemplate = new InfoTemplate('Route Name:' + route.attributes.Name);
 var routeAttributes = {
   RouteName: route.attributes.Name,
   OrderCount: route.attributes.OrderCount,
 };

 const polylineGraphic = new context.esriJS.Graphic({
   'geometry': polyline,
   'symbol': { "color": colorArr, "width": 1, "type": "esriSLS", "style": "esriSLSSolid" },
   'attributes': routeAttributes,
   'infoTemplate': routeInfoTemplate
 });

var layerDefinition = {
  "name": "SHA Test " + route.attributes.Name,
  "geometryType": "esriGeometryPolyline",
  "fields": [{
  "name": "Name",
  "alias": "RouteName",
  "type": "esriFieldTypeString"
 }, {
  "name": "OrderCount",
  "alias": "Order Count",
  "type": "esriFieldTypeString"
 }]
 }

 // Define the featureCollection
 var featureCollection = {
   layerDefinition: layerDefinition,
   featureSet: routes.attributes   // routes are returned from the Rest Api
 }

 // Define the featureLayer
 var featureLayer = new FeatureLayer(featureCollection, {
 id: 'Routing Solution ' + route.attributes.Name,
 showLabels: true
 });

featureLayer.add(polylineGraphic);
map.addLayer(featureLayer);

I'm very new to Esri APIs, so if I'm missing something obvious please feel free to point it out. I feel like this is probably very simple, but I appreciate any help in advance.

Thanks,

John

Re: Getting layer data to display in Attribute Table

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:50:15 GMT

John,

These are the lines that give me pause:

 // Define the featureCollection
 var featureCollection = {
   layerDefinition: layerDefinition,
   featureSet: routes.attributes   // routes are returned from the Rest Api
 }‍‍‍‍‍

is the routes object an array of graphics? You mention in the code comment that routes are returned from the Rest Api. If routes is the featureset returned from a QueryTask then you should be passing just route and not route.attributes to the featureSet property.

Re: Getting layer data to display in Attribute Table

JohnHovanec — Sun, 12 Dec 2021 10:50:17 GMT

Robert,

The route object is returned from the Vehicle Routing Solution service as feature set. When I try to send in the full route object I get errors about features being undefined. That led me to try a style similar to what is in Feature collection | ArcGIS API for JavaScript 3.27. That got me past the feature error but to a new error of 'Converting circular structure to JSON.'

My featureLayer creation currently looks like this:

var featureCollection = { 
  layerDefinition: layerDefinition, 
  featureSet: { 
    features: config.fetchedRoute.value.features, 
    geometryType: config.fetchedRoute.value.geometryType   
  } 
}
var featureLayer = new context.esriJS.FeatureLayer(featureCollection, { id: 'Routing Solution ' + route.attributes.Name, showLabels: true });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Any other thoughts or suggestions?

Thanks,

John

Re: Getting layer data to display in Attribute Table

RobertScheitlin__GISP — Wed, 20 Mar 2019 18:52:02 GMT

John,

What 'Converting circular structure to JSON.' means is that you are setting a property (of something) to the object itself thus creating a circular reference. I don't see the issue in the code you have posted here so it is hard to say.

Re: Getting layer data to display in Attribute Table

JohnHovanec — Sun, 12 Dec 2021 10:50:20 GMT

In case anyone else has a similar problem, this is how I got it to work:

When creating the graphic, set all of the attributes as well:

const polyline = new context.esriJS.Polyline(polylineJson);
          var routeInfoTemplate = new context.esriJS.InfoTemplate('Route Name:' + route.attributes.Name);
          var routeAttributes = {
            ObjectID: route.attributes.ObjectID,
            Name: route.attributes.Name,
            ViolatedConstraints: route.attributes.ViolatedConstraints,
            OrderCount: route.attributes.OrderCount,
            TotalCost: route.attributes.TotalCost
          };‍‍‍‍‍‍‍‍‍

Then create a layer definition and use that to create a featureCollection in order to create a featureLayer. Add the layer to the map:

var layerDefinition = {
            name: "Route " + route.attributes.Name,
            geometryType: route.geometryType,
            fields: routeFields.fields   //Stored externally, they set the column headers
          }

          var featureCollection = {
            layerDefinition: layerDefinition,
            featureSet: null   // Ok for this to be null since attributes were set above
          }

          var featureLayer = new FeatureLayer(featureCollection, {
            id: 'Routing Solution ' + route.attributes.Name,
            showLabels: true
          });

          featureLayer.add(polylineGraphic);
          map.addLayer(featureLayer);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the Web AppBuilder application the layer info will be available to the Attribute Table widget. Also, when testing check in the Attribute Table widget if the Filter By Map Extent button is selected, as that can prevent values from a layer from displaying in the table.