Attribute Inspector widget 3.23 using webmap

1142
6
Jump to solution
04-21-2018 09:06 PM
VenkataSrikanth_Dasari
Occasional Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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>

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
VenkataSrikanth_Dasari
Occasional Contributor

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

                    }));
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

0 Kudos
VenkataSrikanth_Dasari
Occasional Contributor

Exactly.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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>
VenkataSrikanth_Dasari
Occasional Contributor

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

Thanks, 

Srikanth Dasari

0 Kudos