How to use Templatepicker, layerinfos, editor, and AttributeInspector

HectorChapa

I want to use templatepicker, layerinfos, editor, and attributeInspector all together. I am trying but my map breaks.
Could anyone show me an example of all this objects at work together. Simple example would be fine but including these objects.

Thanks.

HectorChapa

I found this code on the esri page is somewhat of what I am looking for. But the code is writting in legacy I want to use AMD style.

Can help me change this code into AMD style.


Thanks,

 dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("esri.toolbars.edit");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.editing.TemplatePicker");
      dojo.require("esri.dijit.AttributeInspector");

      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: [-83.243, 42.584],
          zoom: 15
        });

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

        var pointLayer = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
          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
            }]

            var attInspector = new esri.dijit.AttributeInspector({
              layerInfos: layerInfos
            }, dojo.create("div"));
        
          
            query.objectIds = [evt.graphic.attributes.objectid];
            layer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, function(features) {
              map.infoWindow.setTitle("");
              map.infoWindow.setContent(attInspector.domNode);
              map.infoWindow.resize(310, 165);
              map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
            });
          });
        });
      
        var templatePicker = new esri.dijit.editing.TemplatePicker({
          featureLayers: layers,
          rows: 'auto',
          columns: 'auto',
          grouping: true
        }, "templatePickerDiv");

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

          dojo.connect(attInspector, "onDelete", function(feature) {
            feature.getLayer().applyEdits(null, null, [feature]);
            map.infoWindow.hide();
          });
        });
      }

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

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