topic Re: Attribute Inspector widget 3.23 in ArcGIS JavaScript Maps SDK Questions

Attribute Inspector widget 3.23 using webmap

VenkataSrikanthDasari — Sun, 22 Apr 2018 04:06:15 GMT

Hi,

I am using a webmap from the portal and generating map. And I am using ItemInfo operational layers for the attribute Inspector to get the textboxes, save and delete button . However, I am unable to see any attribute data in the Attribute table tag.

Here I am not using WAB its just a java script application. I am using the same code in the below URL:

ArcGIS API for JavaScript Sandbox

If I am using WebMaps, don't I get the attribute table in the Attribute Inspector widget?

Cheers,

Srikanth Dasari

Re: Attribute Inspector widget 3.23

RobertScheitlin__GISP — Sun, 22 Apr 2018 14:33:46 GMT

Srikanth,

If you are using the same code as the link you provided above then what you see in that link is what you will see in your app. The fact that you are using a web map will not change how the code/app will work. So bottom line is No you will not get an attribute table just because you are using a web map.

Re: Attribute Inspector widget 3.23

VenkataSrikanthDasari — Fri, 10 Dec 2021 20:25:53 GMT

So do I need to customise the code for the attribute Inspector widget??

The only code I am using from the link is related to AttributeInspector... I am using operational layers not creating FeatureLayers...

Here is the code I am using..

Looping through response.ItemInfo.itemData.operationalLayers

checking if it is a FeatureLayer

creating an editable layers array response.ItemInfo.itemData.operationalLayers

var layerInfos = [
    {
        'featureLayer': editableLayers[0],
        'isEditable': true,
        'disableAttributeUpdate': false,
        'fieldInfos': editableLayers[1].popupInfo.fieldInfos
    },
    {
        'featureLayer': editableLayers[1],
        'isEditable': true,
        'disableAttributeUpdate': false,
        'fieldInfos': editableLayers[1].popupInfo.fieldInfos

    }
];
attInspector = new AttributeInspector({
    layerInfos: layerInfos
}, '<div></div>');
attInspector.startup();
var validFeatures=[];
imgEditorElement.on("click",function(){
    angular.element('#editorContainer').css('display','block');
    btnBack.on("click",function(evt){
        angular.element('#templatePickerContainer').css('display','block');
        angular.element('#attributeEditorContainer').css('display','none');
    });
    var templatePicker = new TemplatePicker({
        featureLayers: layers,
        grouping: true,
        rows: "auto",
        columns: 3,
        showTooltip: true
    }, $attrs.templatePickerTargetId);
    templatePicker.startup();
    var _mapClick;
    if (map) {
        _mapClickHandler(true);
    }




    function _mapClickHandler(create) {
        _attrInspIsCurrentlyDisplayed=false;
        if (create === true && _attrInspIsCurrentlyDisplayed === false) {
            map.setInfoWindowOnClick(false);
            if (_mapClick === undefined || _mapClick === null) {
                _mapClick = map.on("click", lang.hitch(this,function(evt){
                        map.infoWindow.hide();
                        angular.element('#templatePickerContainer').css('display','none');
                        angular.element('#attributeEditorContainer').css('display','block');
                       //var layers=map.getLayersVisibleAtScale();
                        var EditlayerInfos=[];
                        var deferreds=[];
                    array.forEach(layers,lang.hitch(this,function(layer){
                        if(!(layer.allowGeometryUpdates && layer.allowGeometryUpdates==true))
                            return;
                        var line = new SimpleLineSymbol();
                        line.setColor(new Color([36, 36, 36, 1]));
                        var fill = new SimpleFillSymbol();
                        fill.setColor(new Color([0, 168, 132, 0.25]));
                        fill.setOutline(line);

                        layer.setSelectionSymbol(fill);
                        //EditlayerInfos.push(layer);
                        var selectQuery = new Query();
                        //selectQuery.geometry = editUtils.pointToExtent(this.map, evt.mapPoint, 20);
                        var pixelWidth = map.extent.getWidth() / map.width;
                        var toleranceInMapCoords = 20 * pixelWidth;
                        selectQuery.geometry=new Extent(evt.mapPoint.x - toleranceInMapCoords,
                            evt.mapPoint.y - toleranceInMapCoords,
                            evt.mapPoint.x + toleranceInMapCoords,
                            evt.mapPoint.y + toleranceInMapCoords,
                            map.spatialReference);

                        var deferred = layer.selectFeatures(selectQuery,
                            FeatureLayer.SELECTION_NEW,
                            lang.hitch(this, function (features) {
                                array.forEach(features, function (feature) {
                                    //map.graphics.add(new graphic(feature.geometry,feature.symbol));
                                    validFeatures.push(feature);
                                });
                            }));
                        deferreds.push(deferred);

                    }));

Re: Attribute Inspector widget 3.23

RobertScheitlin__GISP — Sun, 22 Apr 2018 18:48:18 GMT

Srikanth,

So help me understand you issue. Are you just having trouble getting that sample code to work with layers coming from a web map verses a FeatureLayer?

Re: Attribute Inspector widget 3.23

VenkataSrikanthDasari — Sun, 22 Apr 2018 18:50:05 GMT

Exactly.

Re: Attribute Inspector widget 3.23

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:25:57 GMT

Srikanth,

OK here is a sample for that. The important part is on line 77 below.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Editable FeatureLayer with Attribute Inspector</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #detailPane {
      padding: 6px;
      height: 20px;
      color: #570026;
      font-size: 12pt;
      font-weight: 600;
      overflow: hidden;
    }

    .dj_ie .infowindow .window .top .right .user .content {
      position: relative;
    }

    .dj_ie .simpleInfoWindow .content {
      position: relative;
    }

    .esriAttributeInspector .atiLayerName {
      display: none;
    }
  </style>

  <script src="https://js.arcgis.com/3.24/"></script>
  <script>
    var map, updateFeature;
    var teamsFL;
    require([
      "esri/map",
      "esri/layers/FeatureLayer",
      "esri/dijit/AttributeInspector",

      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/Color",
      "esri/renderers/UniqueValueRenderer",

      "esri/config",
      "esri/arcgis/utils",
      "esri/tasks/query",
      "dojo/dom-construct",
      "dijit/form/Button",

      "dojo/domReady!"
    ], function(
      Map, FeatureLayer, AttributeInspector,
      SimpleLineSymbol, SimpleMarkerSymbol, Color, UniqueValueRenderer,
      esriConfig, arcgisUtils,
      Query, domConstruct, Button
    ) {
      // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
      esriConfig.defaults.io.proxyUrl = "/proxy/proxy.ashx";

      arcgisUtils.createMap("3cca027bf7f447589a8ae9dac253056c", "mapDiv", {
//!!!!!This is the important part!!!!!///
        ignorePopups: true
      }).then(function(response) {
        var map = response.map;
        map.setInfoWindowOnClick(false);

        var selectionSymbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 6,
          new SimpleLineSymbol(
            "solid",
            new Color([255, 0, 0, 0.5]),
            4
          ),
          new Color("#ED3939")
        );

        var defaultSymbol = new SimpleMarkerSymbol(
          SimpleMarkerSymbol.STYLE_CIRCLE, 7,
          null,
          new Color([255, 255, 255])
        );

        teamsFL = map.getLayer(map.graphicsLayerIds[0]);
        //teamsFL.setInfoTemplate(null);
        teamsFL.setSelectionSymbol(selectionSymbol);

        //Symbolize features by W/L record
        var recordRenderer = new UniqueValueRenderer(defaultSymbol, "Rd_64_Result");
        recordRenderer.addValue("W", new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7, null, new Color([93, 240, 79])));
        recordRenderer.addValue("L", new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 7, null, new Color([240, 146, 79])));
        teamsFL.setRenderer(recordRenderer);

        setTimeout(function(){
          var selectQuery = new Query();

          map.on("click", function(evt) {
            selectQuery.geometry = evt.mapPoint;
            selectQuery.distance = 50;
            selectQuery.units = "miles"
            selectQuery.returnGeometry = true;
            teamsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function(features) {
              if (features.length > 0) {
                //store the current feature
                updateFeature = features[0];
                map.infoWindow.setTitle(features[0].getLayer().name);
                map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
              } else {
                map.infoWindow.hide();
              }
            });
          });

          map.infoWindow.on("hide", function() {
            teamsFL.clearSelection();
          });

          var layerInfos = [{
            'featureLayer': teamsFL,
            'showAttachments': false,
            'isEditable': true,
            'fieldInfos': [{
                'fieldName': 'University',
                'isEditable': false,
                'label': 'School:'
              },
              {
                'fieldName': 'WINPER',
                'isEditable': true,
                'tooltip': 'Win percentage',
                'label': 'Win percentage:'
              },
              {
                'fieldName': 'Rd_64_Venue',
                'isEditable': false,
                'label': 'Rd 1 Venue:'
              },
              {
                'fieldName': 'Rd_64_Result',
                'isEditable': true,
                'tooltip': 'First round result (W/L)',
                'label': 'Rd 1 Result:'
              },
              {
                'fieldName': 'Rd_64_Margin',
                'isEditable': true,
                'tooltip': 'First round margin of victory/loss',
                'label': 'Rd 1 Margin:'
              }
            ]
          }];

          //Initialize Attribute Inspector
          var attInspector = new AttributeInspector({
            layerInfos: layerInfos
          }, domConstruct.create("div"));

          //add a save button next to the delete button
          var saveButton = new Button({
            label: "Save",
            "class": "saveButton"
          }, domConstruct.create("div"));
          domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

          saveButton.on("click", function() {
            updateFeature.getLayer().applyEdits(null, [updateFeature], null);
          });

          attInspector.on("attribute-change", function(evt) {
            //store the updates to apply when the save button is clicked
            updateFeature.attributes[evt.fieldName] = evt.fieldValue;
          });

          attInspector.on("next", function(evt) {
            updateFeature = evt.feature;
            console.log("Next " + updateFeature.attributes.OBJECTID);
          });

          attInspector.on("delete", function(evt) {
            evt.feature.getLayer().applyEdits(null, null, [evt.feature]);
            map.infoWindow.hide();
          });

          map.infoWindow.setContent(attInspector.domNode);
          map.infoWindow.resize(350, 240);
        }, 800);
      });
    });
  </script>
</head>

<body class="claro">
  <div id="detailPane">
    Click to display the attribute inspector for all NCAA men's basketball tournament teams within 50 miles of click.
  </div>
  <div id="mapDiv"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Attribute Inspector widget 3.23

VenkataSrikanthDasari — Mon, 23 Apr 2018 14:23:23 GMT

These are the Important things are IgnorePopups and map.getLayer().. that resolved the issue... Happy Monday

Thanks,

Srikanth Dasari