topic Re: JavaScript API Help in ArcGIS JavaScript Maps SDK Questions

JavaScript API Help

ChrisHolmes — Fri, 19 Sep 2014 16:13:25 GMT

Hello everyone,

Kind of learning on the go here. My initial goal here is to allow a person to put a point on a map fill in the form, then close the form. I do not want them to be able to click other points to see the data that is associated with those points.

I've used the following sample to work from:

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=ed_multipleAttrInspector

I will post my code at the bottom of this, but will put my questions here:

Info Window Questions:

1. Why doesn't an 'X' show up in the top right to close the window?

2. For the citizen comment field is there a way to make that textbox multiline?

3. The label "CITIZEN_COMMENT", is there a way to change it to be "COMMENT". Or can that only be done by changing the field name in the source schema?

4. Once I'm completed the data entry on the form, I don't know how to close it. Clicking elsewhere on the map doesn't help. I find that what I need to do is to click back in the template picker (left pane) to make a new point then when the form opens up, just click the delete button (which is not the way it should have to be done).

Info Window Note: Initially when the form would open for data entry it would increase in vertical size when you moused over the form and make it quite difficult to click in the fields. I eventually found out that by changing the size of the Info Window, the problem disappeared.

This is the change that seems to work: map.infoWindow.resize(400,400); //(325, 185);

Template Picker Questions:

1.The name displayed for the icon "TRPLCWH.Comments". Is there a way to change it to something else, for example "Add Comment"?

2. After I added the text "Click the pin below then click location on the map to add your comment" the vertical scroll bar appeared. Why would it have shown up and is there a way to remove it?

Thanks for reading. Appreciate the help!

Chris

Here is my code:

<!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>Multiple Attribute Inspectors</title>

      #header {
        padding-top:4px;
        padding-right:15px;
        background-color:#570026;
        color:#CCC59E;
        font-size:16pt;
        text-align:right;
        font-weight:700;
        height:55px;
        margin:2px;
      }

      #subheader {
        font-size:small;
        color:#E8D9AC;
        text-align:right;
        padding-right:1px; /*20px;*/
      }

      #leftPane {
        margin:5px; /*added this, seems to align #leftPane & #map a bit nicer*/
        width:200px; /*300px;*/
        color:#3C1700;
        background-color:#FFF;
      }

      #map {
        margin:5px;
        padding:0px;
      }
      .templatePicker {
        border: none !important;
        height: 98% !important;
      }
      .templatePicker .grid .groupLabel{ /* This css will remove the template picker title*/
        display:none;                      /* "TRPLCWH.Comments"*/
      }
      .templatePicker .itemLabel{ /*makes text orange*/
        color:blue;
      }
      .roundedCorners{
        border:solid 3px #705B35;
        border-radius:6px;
      }
      .shadow {
        -webkit-box-shadow: 0 8px 6px -6px #999;
        -moz-box-shadow: 0 8px 6px -6px #999;
        box-shadow: 0 8px 6px -6px #999;
      }

      .esriAttributeInspector {
        height:100px;
      }

      .esriAttributeInspector .atiLayerName {
        display:none;
      }
      .saveButton {
        padding-left:45px;
        margin:0px;width:16px; height:16px;
      }
    </style>

var map;

      function init() {
        //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
        //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
        //for details on setting up a proxy page.
        esri.config.defaults.io.proxyUrl = "/proxy";

        esri.config.defaults.io.alwaysUseProxy = false;

        map = new esri.Map("map", {
          basemap: "streets",
          center: [-114.2, 51.06], //-83.243, 42.584],
          zoom: 12
        });

dojo.connect(map, "onLayersAddResult", initEditing);

        var pointLayer = new esri.layers.FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/Citizen_Comments/FeatureServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        //var lineLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
        // mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        // outFields: ["*"]
        //});
        //var polygonLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
        // mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
        // outFields: ["*"]
        //});

map.addLayers([pointLayer]); //,lineLayer,polygonLayer]);
}

      function initEditing(results) {
        var map = this;
        var layers = dojo.map(results, function(result) {
          return result.layer;
        });

        //display read-only info window when user clicks on feature
        /*
        var query = new esri.tasks.Query();

        dojo.forEach(layers, function(layer) {
          dojo.connect(layer, "onClick", function(evt) {
            if (map.infoWindow.isShowing) {
              map.infoWindow.hide();
            }

            var layerInfos = [{
              'featureLayer': layer,
              'isEditable': false,
              'showDeleteButton':false
            }]

templatePicker.startup();

var drawToolbar = new esri.toolbars.Draw(map);

var selectedTemplate;

dojo.connect(templatePicker, "onSelectionChange", function() {
selectedTemplate = templatePicker.getSelected();

          if (selectedTemplate) {
            switch (selectedTemplate.featureLayer.geometryType) {
            case "esriGeometryPoint":
              drawToolbar.activate(esri.toolbars.Draw.POINT);
              break;
            /*
            case "esriGeometryPolyline":
              selectedTemplate.template.drawingTool === 'esriFeatureEditToolFreehand' ? drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE) : drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
              break;
            case "esriGeometryPolygon":
              selectedTemplate.template.drawingTool === 'esriFeatureEditToolFreehand' ? drawToolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON) : drawToolbar.activate(esri.toolbars.Draw.POLYGON);
              break;
            */
            }
          }
        });

        dojo.connect(drawToolbar, "onDrawEnd", function(geometry) {
          //display the editable info window for newly created features

          if (map.infoWindow.isShowing) {
            map.infoWindow.hide();
          }

drawToolbar.deactivate();

          var fieldAttributes = layerFieldToAttributes(selectedTemplate.featureLayer.fields);
          var newAttributes = dojo.mixin(fieldAttributes, selectedTemplate.template.prototype.attributes);
          var newGraphic = new esri.Graphic(geometry, null, newAttributes);

          var layerInfos = [{
            'featureLayer': selectedTemplate.featureLayer,
            'isEditable': true
          }];

          var attInspector = new esri.dijit.AttributeInspector({
            layerInfos: layerInfos
          }, dojo.create("div"));

          selectedTemplate.featureLayer.applyEdits([newGraphic], null, null, function() {
            var screenPoint = map.toScreen(getInfoWindowPositionPoint(newGraphic));

            map.infoWindow.setContent(attInspector.domNode);
            map.infoWindow.resize(400,400); //(325, 185);
            map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));

templatePicker.clearSelection();
});

          dojo.connect(attInspector, "onAttributeChange", function(feature, fieldName, newFieldValue) {
            feature.attributes[fieldName] = newFieldValue;
            feature.getLayer().applyEdits(null, [feature], null);
          });

          //delete a point
          dojo.connect(attInspector, "onDelete", function(feature) {
            feature.getLayer().applyEdits(null, null, [feature]);
            map.infoWindow.hide();
          });
        });
      }
      //removing this code makes it so that the info window does not open
      function getInfoWindowPositionPoint(feature) {
        var point;
        switch (feature.getLayer().geometryType) {
        case "esriGeometryPoint":
          point = feature.geometry;
          break;
        /*
        case "esriGeometryPolyline":
          var pathLength = feature.geometry.paths[0].length;
          point = feature.geometry.getPoint(0, Math.ceil(pathLength / 2));
          break;
        case "esriGeometryPolygon":
          point = feature.geometry.getExtent().getCenter();
          break;
        */
        }
        return point;
      }

      //required for info window
      function layerFieldToAttributes(fields) {
        var attributes = {};
        dojo.forEach(fields, function(field) {
          attributes[field.name] = null;
        });
        return attributes;
      }

      //show map on load
      dojo.ready(init);
    </script>
</head>

<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
     style="width:100%; height:100%;">
      <div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        Planning Comments
        <div id="subheader">
        West Springs
        </div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
        <div>Click the pin below then click location on map to add your comment.</div>
        <div id="templatePickerDiv"></div>
      </div>
      <div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
      </div>
    </div>
</body>

</html>

Re: JavaScript API Help

ChrisHolmes — Mon, 22 Sep 2014 18:58:51 GMT

Anybody? Help appreciated! Cheers

Re: JavaScript API Help

JakeSkinner — Mon, 22 Sep 2014 20:07:05 GMT

Hi Chris,

I can answer a couple of them.

InfoWindow Questions:

2 & 3. You can do this using the fieldInfos option. Ex:

var layerInfos = [{
    'featureLayer': selectedTemplate.featureLayer,
    'isEditable': true,
    'showAttachments': true,
    fieldInfos: [
      { fieldName: "NAME", label: "NAME:", isEditable: true },
      { fieldName: "EMAIL", label: "EMAIL:", isEditable: true },
      { fieldName: "PHONE", label: "PHONE:", isEditable: true },
      { fieldName: "CITIZEN_COMMENT", label: "COMMENT:", isEditable: true, 'stringFieldOption': 'textarea' }                  
    ]
}];

TemplatePicker Questions:

1. You can adjust this by creating an editor template in ArcMap. To do this, open the MXD that contains the feature class. Start an edit session and open the 'Create Features' window. Right-click on the layer in this window > Properties > edit the Name property. Stop your edit session and Save the MXD. You will then have to re-publish the service.

Re: JavaScript API Help

JakeSkinner — Mon, 22 Sep 2014 21:14:29 GMT

I believe I may have figured out the rest. You can add a Save button next to the Delete button that will close the form. Also, to get rid of the scroll bar, you can adjust the height of the template picker in the CSS. Also, I upgraded the code from Legacy to the new AMD. Below is an example:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior
    of the samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Multiple Attribute Inspectors</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html,body {
        height:100%;
        width:100%;
        background-color:#FFF;
        font-family:Kimberley, sans-serif;
        margin:0;
        padding:0;
      }

      #header {
        padding-top:4px;
        padding-right:15px;
        background-color:#570026;
        color:#CCC59E;
        font-size:16pt;
        text-align:right;
        font-weight:700;
        height:55px;
        margin:2px;
      }

      #subheader {
        font-size:small;
        color:#E8D9AC;
        text-align:right;
        padding-right:1px; /*20px;*/
      }

      #leftPane {
        margin:5px; /*added this, seems to align #leftPane & #map a bit nicer*/
        width:200px; /*300px;*/
        color:#3C1700;
        background-color:#FFF;
      }

      #map {
        margin:5px;
        padding:0px;
      }
      .templatePicker {
        border: none !important;
        height: 93% !important;
      }
      .templatePicker .grid .groupLabel{ /* This css will remove the template picker title*/
        display:none;                      /* "TRPLCWH.Comments"*/
      }
      .templatePicker .itemLabel{ /*makes text orange*/
        color:blue;
      }
      .roundedCorners{
        border:solid 3px #705B35;
        border-radius:6px;
      }
      .shadow {
        -webkit-box-shadow: 0 8px 6px -6px #999;
        -moz-box-shadow: 0 8px 6px -6px #999;
        box-shadow: 0 8px 6px -6px #999;
      }

      .esriAttributeInspector {
        height:100px;
      }

      .esriAttributeInspector .atiLayerName {
        display:none;
      }
      
      .saveButton {
        padding-left:45px;
         margin:0px;width:16px; height:16px;
       }
    </style>

    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      require([
          "esri/map", "esri/layers/FeatureLayer", "esri/dijit/AttributeInspector", "esri/graphic", "esri/config",
          "dojo/dom", "dojo/on", "dojo/_base/array", "esri/toolbars/draw", "dojo/dom-construct",
          "dojo/parser", "esri/toolbars/draw", "esri/dijit/editing/TemplatePicker", "esri/dijit/AttributeInspector",
          "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
          "dojo/domReady!"
        ], function(
          Map, FeatureLayer, AttributeInspector, Graphic, esriConfig,
          dom, on, array, Draw, domConstruct,
          parser, draw, TemplatePicker, AttributeInpsector, 
          Button
        ) {
        
          parser.parse();
          
          esriConfig.defaults.io.proxyUrl = "/proxy";
  
          var map, updateFeature;
          
          map = new esri.Map("map", {
            basemap: "streets",
            center: [-114.2, 51.06], 
            zoom: 12
          });
  
          on(map, "layers-add-result", initEditing);
  
          var pointLayer = new FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/Citizen_Comments/FeatureServer/0", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            outFields: ["*"]
          });
  
          map.addLayers([pointLayer]);
        
  
          function initEditing(results) {          
            var layers = [results.layers[0].layer];
            
            var templatePicker = new TemplatePicker({
              featureLayers: layers,
              rows: 'auto',
              columns: 'auto',
              grouping: true
            }, "templatePickerDiv");
    
            templatePicker.startup();
    
            var drawToolbar = new Draw(map);
    
            var selectedTemplate;
    
            on(templatePicker, "selection-change", function() {
              selectedTemplate = templatePicker.getSelected();
    
              if (selectedTemplate) {
                switch (selectedTemplate.featureLayer.geometryType) {
                case "esriGeometryPoint":
                  drawToolbar.activate(esri.toolbars.Draw.POINT);
                  break;
                }
              }
            });
  
            on(drawToolbar, "draw-end", function(geometry) {
              updateFeature = geometry;
              console.log(updateFeature);
         
              if (map.infoWindow.isShowing) {
                map.infoWindow.hide();
              }
    
              drawToolbar.deactivate();
    
              var fieldAttributes = layerFieldToAttributes(selectedTemplate.featureLayer.fields);
              var newAttributes = dojo.mixin(fieldAttributes, selectedTemplate.template.prototype.attributes);
              var newGraphic = new Graphic(geometry, null, newAttributes);             
    
              var layerInfos = [{
                'featureLayer': selectedTemplate.featureLayer,
                'isEditable': true,
                'showAttachments': true,  
                fieldInfos: [  
                  { fieldName: "NAME", label: "NAME:", isEditable: true },  
                  { fieldName: "EMAIL", label: "EMAIL:", isEditable: true },  
                  { fieldName: "PHONE", label: "PHONE:", isEditable: true },  
                  { fieldName: "CITIZEN_COMMENT", label: "COMMENT:", isEditable: true, 'stringFieldOption': 'textarea' }                    
                ]  
              }];
    
              var attInspector = new AttributeInspector({
                layerInfos: layerInfos
              }, domConstruct.create("div"));
              
              var saveButton = new Button({ label: "Save", "class": "saveButton"});
                domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
                
                saveButton.on("click", function(){
                map.infoWindow.hide();         
              });
   
              selectedTemplate.featureLayer.applyEdits([newGraphic], null, null, function() {
                var screenPoint = map.toScreen(getInfoWindowPositionPoint(newGraphic));
               
                map.infoWindow.setContent(attInspector.domNode);
                map.infoWindow.resize(400,400); //(325, 185);
                map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
    
                templatePicker.clearSelection();
              });
    
              on(attInspector, "attribute-change", function(evt) {
                  evt.feature.attributes[evt.fieldName] = evt.fieldValue;
                evt.feature.getLayer().applyEdits(null, [evt.feature], null);
              });
             
              //delete a point
              on(attInspector, "delete", function(evt) {
                evt.feature.getLayer().applyEdits(null, null, [evt.feature]);
                map.infoWindow.hide();
              });
            });
          }
        //removing this code makes it so that the info window does not open
        function getInfoWindowPositionPoint(feature) {
          var point;
          switch (feature.getLayer().geometryType) {
          case "esriGeometryPoint":
            point = feature.geometry;
            break;
          }
          return point;
        }
       
        //required for info window
        function layerFieldToAttributes(fields) {
          var attributes = {};
          dojo.forEach(fields, function(field) {
            attributes[field.name] = null;
          });
          return attributes;
        }
     });
    </script>
  </head>

  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
     style="width:100%; height:100%;">
      <div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        Planning Comments
        <div id="subheader">
        West Springs
        </div>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
        <div>Click the pin below then click location on map to add your comment.</div>
        <div id="templatePickerDiv"></div>
      </div>
      <div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
      </div>
    </div>
  </body>

</html>

Re: JavaScript API Help

ChrisHolmes — Mon, 22 Sep 2014 21:24:34 GMT

Thanks Jake, much appreciated!

Re: JavaScript API Help

ChrisHolmes — Mon, 22 Sep 2014 21:34:46 GMT

Thanks Jake. I will be able to implement and test tomorrow at work. I did notice that it was written using legacy and not AMD, but figured I'd address that after these issues, so thanks for your help there. This has definitely been quite the learning curve.

Chris

Re: JavaScript API Help

KellyHutchins — Tue, 23 Sep 2014 15:58:10 GMT

Looks like you have working code for this but wanted to point out the GeoForm template as an option if you haven't already seen it. The template provides an easy way to create an application that allows users to enter data via a form and place a point on a map. Its also responsive and should work well on devices like tablets and phones.

http://www.arcgis.com/home/item.html?id=931653256fd24301a84fc77955914a82

Re: JavaScript API Help

ChrisHolmes — Tue, 23 Sep 2014 17:54:36 GMT

Thanks for the info Kelly, I’ll check it out.

Chris

Re: JavaScript API Help

ChrisHolmes — Tue, 23 Sep 2014 18:00:28 GMT

For some reason I seem to be having an issue with my feature service. The point data is not loading and the following displays in the Template Picker: "Feature creation is disabled for all layers". Any ideas? It was working fine on Friday, and this morning is the first time I've gotten back to it.

Thanks,

Chris

Re: JavaScript API Help

JakeSkinner — Tue, 23 Sep 2014 19:35:15 GMT

It doesn't look like ArcGIS Server is running. When trying to access the REST services directory, a 404 error is returned:

http://gismap2.calgary.ca/arcgis/rest/services/

Re: JavaScript API Help

ChrisHolmes — Tue, 23 Sep 2014 20:05:25 GMT

Thanks again Jake. I just heard that the server may be down, it is a test server.

Re: JavaScript API Help

RobertKirkwood — Thu, 23 Jun 2016 13:42:15 GMT

Is there any way to make it so they could not save the data without entering something for each field? As it stands now, a person can drop a point and leave the fields blank even though it says its required.