You could create a feature collection based feature layer and use that with the AttributeInspector widget. Here's an example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" /> <!--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>Validate Attributes</title> <!-- include dojo theme --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> <style type="text/css"> .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content {position: relative;} </style> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; } #leftPane{ overflow:hidden; border:none; color:#5C832F; } #map{ border: solid medium #382513; padding:0; } .esriAttributeInspector{ atiLayerName:'Building Details' } .templatePicker{ border:none !important; } .templatePicker .grid .groupLabel{ display:none; } </style> <!-- specify dojo configuration to parse dijits at load time --> <script type="text/javascript"> dojoConfig = { parseOnLoad:true }; </script> <!-- reference ArcGIS JavaScript API --> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script> <script type="text/javascript"> //require selection dijit dojo.require("esri.map"); dojo.require("esri.dijit.editing.Editor-all"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.form.ValidationTextBox"); var map; function init() { var initialExtent = new esri.geometry.Extent({"xmin":-13062820,"ymin":4063755,"xmax":-13048794,"ymax":4071609,"spatialReference":{"wkid":102100}}); map = new esri.Map("map", { extent:initialExtent, slider: false, nav: true }); dojo.connect(map, "onLoad", function() { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); dojo.connect(map, "onLayersAddResult", initEditor); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); var featureCollection = {}; featureCollection.layerDefinition = {"id":0,"name":"Notes","type":"Feature Layer","displayField":"name","description":"","copyrightText":"","relationships":[],"geometryType":"esriGeometryPoint","minScale":0,"maxScale":0,"extent":{"xmin":-165.874652126,"ymin":-49.9999999999999,"xmax":176.176078869,"ymax":76.745946916,"spatialReference":{"wkid":4326}},"drawingInfo":{"renderer":{"type":"simple","symbol":{"type":"esriPMS","url":"images/flickr.png","contentType":"image/png","color":null,"width":28,"height":28,"angle":0,"xoffset":0,"yoffset":0},"label":"","description":""},"transparency":0,"labelingInfo":null},"hasAttachments":true,"htmlPopupType":"esriServerHTMLPopupTypeAsHTMLText","objectIdField":"objectid","globalIdField":"globalid","typeIdField":"","fields":[{"name":"objectid","type":"esriFieldTypeOID","alias":"Objectid","editable":false,"domain":null},{"name":"note","type":"esriFieldTypeString","alias":"Note","editable":true,"length":255,"domain":null},{"name":"link","type":"esriFieldTypeString","alias":"Link","editable":true,"length":2048,"domain":null},{"name":"name","type":"esriFieldTypeString","alias":"Name","editable":true,"length":50,"domain":null},{"name":"email","type":"esriFieldTypeString","alias":"Email","editable":true,"length":50,"domain":null},{"name":"phone","type":"esriFieldTypeString","alias":"Phone","editable":true,"length":50,"domain":null},{"name":"globalid","type":"esriFieldTypeGlobalID","alias":"globalid","editable":false,"length":38,"domain":null},{"name":"notedate","type":"esriFieldTypeDate","alias":"Notedate","editable":false,"length":36,"domain":null}],"types":[],"templates":[{"name":"Notes","description":"","drawingTool":"esriFeatureEditToolPoint","prototype":{"attributes":{"notedate":null,"note":null,"link":null,"name":null,"email":null,"phone":null}}}],"capabilities":"Query,Editing"} var fields = dojo.map(featureCollection.layerDefinition.fields, function(field) { return field.name; }); var featureLayer = new esri.layers.FeatureLayer(featureCollection, { outFields: fields }); map.addLayers([featureLayer]); } function initEditor(results) { //only one layer var featureLayer = results[0].layer; var templatePicker = new esri.dijit.editing.TemplatePicker({ featureLayers: [featureLayer], rows: 'auto', groupingEnabled:false, columns: 1 },'editorDiv'); templatePicker.startup(); var layerInfos = [{ 'featureLayer':featureLayer, 'showAttachments':false, 'showDeleteButton':false, 'fieldInfos':[ {'fieldName':'name','label':'Name'}, {'fieldName':'email','label':'Email'}, {'fieldName':'phone','label':'Phone'}, {'fieldName':'note','label':'Details', 'stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA}, {'fieldName':'notedate','label':'Date'} ] }]; //define the editor settings var settings = { map: map, templatePicker:templatePicker, layerInfos:layerInfos }; var params = {settings: settings}; //Create the editor widget var editorWidget = new esri.dijit.editing.Editor(params); editorWidget.startup(); //resize the info window (attribute inspector) map.infoWindow.resize(295,245); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div> <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;" data-dojo-props="region:'left'"> <div id="editorDiv"></div> <div></div> </div> </div> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" /> <!--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>Validate Attributes</title> <!-- include dojo theme --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css"> <style type="text/css"> .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content {position: relative;} </style> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; } #leftPane{ overflow:hidden; border:none; color:#5C832F; } #map{ border: solid medium #382513; padding:0; } .esriAttributeInspector{ atiLayerName:'Building Details' } .templatePicker{ border:none !important; } .templatePicker .grid .groupLabel{ display:none; } </style> <!-- specify dojo configuration to parse dijits at load time --> <script type="text/javascript"> dojoConfig = { parseOnLoad:true }; </script> <!-- reference ArcGIS JavaScript API --> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script> <script type="text/javascript"> //require selection dijit dojo.require("esri.map"); dojo.require("esri.dijit.editing.Editor-all"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.form.ValidationTextBox"); var map; function init() { var initialExtent = new esri.geometry.Extent({"xmin":-13062820,"ymin":4063755,"xmax":-13048794,"ymax":4071609,"spatialReference":{"wkid":102100}}); map = new esri.Map("map", { extent:initialExtent, slider: false, nav: true }); dojo.connect(map, "onLoad", function() { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); dojo.connect(map, "onLayersAddResult", initEditor); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); var featureCollection = {}; featureCollection.layerDefinition = {"id":0,"name":"Notes","type":"Feature Layer","displayField":"name","description":"","copyrightText":"","relationships":[],"geometryType":"esriGeometryPoint","minScale":0,"maxScale":0,"extent":{"xmin":-165.874652126,"ymin":-49.9999999999999,"xmax":176.176078869,"ymax":76.745946916,"spatialReference":{"wkid":4326}},"drawingInfo":{"renderer":{"type":"simple","symbol":{"type":"esriPMS","url":"images/flickr.png","contentType":"image/png","color":null,"width":28,"height":28,"angle":0,"xoffset":0,"yoffset":0},"label":"","description":""},"transparency":0,"labelingInfo":null},"hasAttachments":true,"htmlPopupType":"esriServerHTMLPopupTypeAsHTMLText","objectIdField":"objectid","globalIdField":"globalid","typeIdField":"","fields":[{"name":"objectid","type":"esriFieldTypeOID","alias":"Objectid","editable":false,"domain":null},{"name":"note","type":"esriFieldTypeString","alias":"Note","editable":true,"length":255,"domain":null},{"name":"link","type":"esriFieldTypeString","alias":"Link","editable":true,"length":2048,"domain":null},{"name":"name","type":"esriFieldTypeString","alias":"Name","editable":true,"length":50,"domain":null},{"name":"email","type":"esriFieldTypeString","alias":"Email","editable":true,"length":50,"domain":null},{"name":"phone","type":"esriFieldTypeString","alias":"Phone","editable":true,"length":50,"domain":null},{"name":"globalid","type":"esriFieldTypeGlobalID","alias":"globalid","editable":false,"length":38,"domain":null},{"name":"notedate","type":"esriFieldTypeDate","alias":"Notedate","editable":false,"length":36,"domain":null}],"types":[],"templates":[{"name":"Notes","description":"","drawingTool":"esriFeatureEditToolPoint","prototype":{"attributes":{"notedate":null,"note":null,"link":null,"name":null,"email":null,"phone":null}}}],"capabilities":"Query,Editing"} var fields = dojo.map(featureCollection.layerDefinition.fields, function(field) { return field.name; }); var featureLayer = new esri.layers.FeatureLayer(featureCollection, { outFields: fields }); map.addLayers([featureLayer]); } function initEditor(results) { //only one layer var featureLayer = results[0].layer; var templatePicker = new esri.dijit.editing.TemplatePicker({ featureLayers: [featureLayer], rows: 'auto', groupingEnabled:false, columns: 1 },'editorDiv'); templatePicker.startup(); var layerInfos = [{ 'featureLayer':featureLayer, 'showAttachments':false, 'showDeleteButton':false, 'fieldInfos':[ {'fieldName':'name','label':'Name'}, {'fieldName':'email','label':'Email'}, {'fieldName':'phone','label':'Phone'}, {'fieldName':'note','label':'Details', 'stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA}, {'fieldName':'notedate','label':'Date'} ] }]; //define the editor settings var settings = { map: map, templatePicker:templatePicker, layerInfos:layerInfos }; var params = {settings: settings}; //Create the editor widget var editorWidget = new esri.dijit.editing.Editor(params); editorWidget.startup(); //resize the info window (attribute inspector) map.infoWindow.resize(295,245); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div> <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;" data-dojo-props="region:'left'"> <div id="editorDiv"></div> <div></div> </div> </div> </body> </html>
Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.