Community
Select to view content in your preferred language

Another button to the attribute inspector?

2253
6
Jump to solution
10-18-2013 07:21 AM
ionarawilson1
by
Deactivated User
‎10-18-2013 07:21 AM
Is it possible to add another button to the attribute inspector (There is a delete button already) with the editor widget sample?

Thanks

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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>Edit rivers and waterbodies</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css" />     <style>       html,body{height:100%;width:100%;margin:0;overflow:hidden;}       #map{         padding:0;       }       #header{         font-size: 1.1em;         font-family: sans-serif;         padding-left: 1em;         padding-top:4px;         color:#660000;       }       .templatePicker {         border: none;       }        .dj_ie .infowindow .window .top .right .user .content { position: relative; }       .dj_ie .simpleInfoWindow .content {position: relative;}     </style>          <script src="http://js.arcgis.com/3.7/"></script>     <script>       var map;              require([         "esri/map",          "esri/toolbars/edit",          "esri/layers/ArcGISTiledMapServiceLayer",         "esri/layers/FeatureLayer",          "esri/symbols/SimpleMarkerSymbol",         "esri/symbols/SimpleLineSymbol",          "esri/dijit/editing/Editor",         "esri/dijit/editing/TemplatePicker",          "esri/config",         "dojo/i18n!esri/nls/jsapi",          "dojo/_base/array", "dojo/parser", "dojo/keys",          "dijit/layout/BorderContainer", "dijit/layout/ContentPane",          "dojo/domReady!"       ], function(         Map, Edit,          ArcGISTiledMapServiceLayer, FeatureLayer,         SimpleMarkerSymbol, SimpleLineSymbol,          Editor, TemplatePicker,         esriConfig, jsapiBundle,         arrayUtils, parser, keys       ) {         parser.parse();                 // snapping is enabled for this sample - change the tooltip to reflect this         jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";                 // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html         esriConfig.defaults.io.proxyUrl = "/proxy";              //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.          esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");                  map = new Map("map", {            basemap: "satellite",           center: [-96.541, 38.351],           zoom: 14,           slider: false          });          map.on("layers-add-result", initEditor);                 //add boundaries and place names          var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");         map.addLayer(labels);          var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{           mode: FeatureLayer.MODE_ONDEMAND,            outFields: ['*']         });          var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{           mode: FeatureLayer.MODE_ONDEMAND,            outFields: ['*']         });          map.addLayers([waterbodies,rivers]);          function initEditor(evt) {           var templateLayers = arrayUtils.map(evt.layers, function(result){             return result.layer;           });           var templatePicker = new TemplatePicker({             featureLayers: templateLayers,             grouping: true,             rows: "auto",             columns: 3           }, "templateDiv");           templatePicker.startup();            var layers = arrayUtils.map(evt.layers, function(result) {             return { featureLayer: result.layer };           });           var settings = {             map: map,             templatePicker: templatePicker,             layerInfos: layers,             toolbarVisible: true,             createOptions: {               polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],               polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,                 Editor.CREATE_TOOL_CIRCLE,                 Editor.CREATE_TOOL_TRIANGLE,                 Editor.CREATE_TOOL_RECTANGLE               ]             },             toolbarOptions: {               reshapeVisible: true             }           };            var params = {settings: settings};               var myEditor = new Editor(params,'editorDiv');           //define snapping options           var symbol = new SimpleMarkerSymbol(             SimpleMarkerSymbol.STYLE_CROSS,              15,              new SimpleLineSymbol(               SimpleLineSymbol.STYLE_SOLID,                new Color([255, 0, 0, 0.5]),                5             ),              null           );           map.enableSnapping({             snapPointSymbol: symbol,             tolerance: 20,             snapKey: keys.ALT           });                myEditor.startup();         }       });     </script>   </head>   <body class="claro">     <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">       <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">         Edit Hydrography       </div>       <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">         <div id="templateDiv"></div>         <div id="editorDiv"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>     </div>   </body> </html> 
0 Kudos
1 Solution

Accepted Solutions
JasonZou
by
Frequent Contributor
‎10-18-2013 10:27 AM
Here is the revised code.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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>Edit rivers and waterbodies</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css" />     <style>       html,body{height:100%;width:100%;margin:0;overflow:hidden;}       #map{         padding:0;       }       #header{         font-size: 1.1em;         font-family: sans-serif;         padding-left: 1em;         padding-top:4px;         color:#660000;       }       .templatePicker {         border: none;       }        .dj_ie .infowindow .window .top .right .user .content { position: relative; }       .dj_ie .simpleInfoWindow .content {position: relative;}              .esriAttributeInspector .atiMyButton {   float: left;   margin: 0px;    }            </style>          <script src="http://js.arcgis.com/3.7/"></script>     <script>       var map;              require([         "esri/map",          "esri/toolbars/edit",          "esri/layers/ArcGISTiledMapServiceLayer",         "esri/layers/FeatureLayer",          "esri/symbols/SimpleMarkerSymbol",         "esri/symbols/SimpleLineSymbol",          "esri/dijit/editing/Editor",         "esri/dijit/editing/TemplatePicker",          "esri/config",         "dojo/i18n!esri/nls/jsapi",          "dojo/_base/array", "dojo/parser", "dojo/keys", "dojo/_base/Color", "dojo/dom-construct", "dojo/dom-class", "dijit/form/Button",         "dijit/layout/BorderContainer", "dijit/layout/ContentPane",          "dojo/domReady!"       ], function(         Map, Edit,          ArcGISTiledMapServiceLayer, FeatureLayer,         SimpleMarkerSymbol, SimpleLineSymbol,          Editor, TemplatePicker,         esriConfig, jsapiBundle,         arrayUtils, parser, keys, Color, domConstruct, domClass, Button       ) {         parser.parse();                 // snapping is enabled for this sample - change the tooltip to reflect this         jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";                 // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html         esriConfig.defaults.io.proxyUrl = "/proxy";              //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.          esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");                  map = new Map("map", {            basemap: "satellite",           center: [-96.541, 38.351],           zoom: 14,           slider: false          });          map.on("layers-add-result", initEditor);                 //add boundaries and place names          var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");         map.addLayer(labels);          var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{           mode: FeatureLayer.MODE_ONDEMAND,            outFields: ['*']         });          var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{           mode: FeatureLayer.MODE_ONDEMAND,            outFields: ['*']         });          map.addLayers([waterbodies,rivers]);          function initEditor(evt) {           var templateLayers = arrayUtils.map(evt.layers, function(result){             return result.layer;           });           var templatePicker = new TemplatePicker({             featureLayers: templateLayers,             grouping: true,             rows: "auto",             columns: 3           }, "templateDiv");           templatePicker.startup();            var layers = arrayUtils.map(evt.layers, function(result) {             return { featureLayer: result.layer };           });           var settings = {             map: map,             templatePicker: templatePicker,             layerInfos: layers,             toolbarVisible: true,             createOptions: {               polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],               polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,                 Editor.CREATE_TOOL_CIRCLE,                 Editor.CREATE_TOOL_TRIANGLE,                 Editor.CREATE_TOOL_RECTANGLE               ]             },             toolbarOptions: {               reshapeVisible: true             }           };            var params = {settings: settings};               var myEditor = new Editor(params,'editorDiv');           //define snapping options           var symbol = new SimpleMarkerSymbol(             SimpleMarkerSymbol.STYLE_CROSS,              15,              new SimpleLineSymbol(               SimpleLineSymbol.STYLE_SOLID,                new Color([255, 0, 0, 0.5]),                5             ),              null           );           map.enableSnapping({             snapPointSymbol: symbol,             tolerance: 20,             snapKey: keys.ALT           });             var newButton = new Button({label: "My Button"}, domConstruct.create("div", null, myEditor.attributeInspector.editButtons, "first"));        domClass.add(newButton.domNode, "atiMyButton");           myEditor.startup();         }       });     </script>   </head>   <body class="claro">     <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">       <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">         Edit Hydrography       </div>       <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">         <div id="templateDiv"></div>         <div id="editorDiv"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>     </div>   </body> </html>

View solution in original post

0 Kudos
6 Replies
JasonZou
by
Frequent Contributor
‎10-18-2013 10:27 AM
Here is the revised code.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <!--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>Edit rivers and waterbodies</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css" />     <style>       html,body{height:100%;width:100%;margin:0;overflow:hidden;}       #map{         padding:0;       }       #header{         font-size: 1.1em;         font-family: sans-serif;         padding-left: 1em;         padding-top:4px;         color:#660000;       }       .templatePicker {         border: none;       }        .dj_ie .infowindow .window .top .right .user .content { position: relative; }       .dj_ie .simpleInfoWindow .content {position: relative;}              .esriAttributeInspector .atiMyButton {   float: left;   margin: 0px;    }            </style>          <script src="http://js.arcgis.com/3.7/"></script>     <script>       var map;              require([         "esri/map",          "esri/toolbars/edit",          "esri/layers/ArcGISTiledMapServiceLayer",         "esri/layers/FeatureLayer",          "esri/symbols/SimpleMarkerSymbol",         "esri/symbols/SimpleLineSymbol",          "esri/dijit/editing/Editor",         "esri/dijit/editing/TemplatePicker",          "esri/config",         "dojo/i18n!esri/nls/jsapi",          "dojo/_base/array", "dojo/parser", "dojo/keys", "dojo/_base/Color", "dojo/dom-construct", "dojo/dom-class", "dijit/form/Button",         "dijit/layout/BorderContainer", "dijit/layout/ContentPane",          "dojo/domReady!"       ], function(         Map, Edit,          ArcGISTiledMapServiceLayer, FeatureLayer,         SimpleMarkerSymbol, SimpleLineSymbol,          Editor, TemplatePicker,         esriConfig, jsapiBundle,         arrayUtils, parser, keys, Color, domConstruct, domClass, Button       ) {         parser.parse();                 // snapping is enabled for this sample - change the tooltip to reflect this         jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";                 // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html         esriConfig.defaults.io.proxyUrl = "/proxy";              //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.          esriConfig.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");                  map = new Map("map", {            basemap: "satellite",           center: [-96.541, 38.351],           zoom: 14,           slider: false          });          map.on("layers-add-result", initEditor);                 //add boundaries and place names          var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");         map.addLayer(labels);          var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{           mode: FeatureLayer.MODE_ONDEMAND,            outFields: ['*']         });          var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{           mode: FeatureLayer.MODE_ONDEMAND,            outFields: ['*']         });          map.addLayers([waterbodies,rivers]);          function initEditor(evt) {           var templateLayers = arrayUtils.map(evt.layers, function(result){             return result.layer;           });           var templatePicker = new TemplatePicker({             featureLayers: templateLayers,             grouping: true,             rows: "auto",             columns: 3           }, "templateDiv");           templatePicker.startup();            var layers = arrayUtils.map(evt.layers, function(result) {             return { featureLayer: result.layer };           });           var settings = {             map: map,             templatePicker: templatePicker,             layerInfos: layers,             toolbarVisible: true,             createOptions: {               polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],               polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,                 Editor.CREATE_TOOL_CIRCLE,                 Editor.CREATE_TOOL_TRIANGLE,                 Editor.CREATE_TOOL_RECTANGLE               ]             },             toolbarOptions: {               reshapeVisible: true             }           };            var params = {settings: settings};               var myEditor = new Editor(params,'editorDiv');           //define snapping options           var symbol = new SimpleMarkerSymbol(             SimpleMarkerSymbol.STYLE_CROSS,              15,              new SimpleLineSymbol(               SimpleLineSymbol.STYLE_SOLID,                new Color([255, 0, 0, 0.5]),                5             ),              null           );           map.enableSnapping({             snapPointSymbol: symbol,             tolerance: 20,             snapKey: keys.ALT           });             var newButton = new Button({label: "My Button"}, domConstruct.create("div", null, myEditor.attributeInspector.editButtons, "first"));        domClass.add(newButton.domNode, "atiMyButton");           myEditor.startup();         }       });     </script>   </head>   <body class="claro">     <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">       <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">         Edit Hydrography       </div>       <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">         <div id="templateDiv"></div>         <div id="editorDiv"></div>       </div>       <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>     </div>   </body> </html>
0 Kudos
ionarawilson1
by
Deactivated User
‎10-18-2013 01:26 PM
Thank you so much Jason! This is awesome. Can you please tell me what I am doing wrong? When I try to add it to my code my app does not show anything. Thanks

 require([
        "esri/map", "esri/toolbars/navigation", "dojo/_base/connect", "esri/dijit/BasemapGallery", "esri/arcgis/utils",

       "dijit/form/ValidationTextBox",  "esri/toolbars/edit", 
  
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/layers/FeatureLayer",
  "esri/tasks/query", "esri/tasks/QueryTask",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor", 
 
        "esri/dijit/editing/TemplatePicker",
        "esri/config",
        "dojo/i18n!esri/nls/jsapi", 


        "dojo/_base/array", "dojo/parser", "dojo/keys", "dojo/_base/Color", "dojo/dom-construct", "dojo/dom-class",
  "dijit/form/Button",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
  "dijit/layout/AccordionContainer",
  
        "dojo/dom", "dojo/on",

        "dojo/domReady!",
 
      ], function(
        Map, Navigation, connect, BasemapGallery, arcgisUtils, ValidationTextBox, Edit, 
        ArcGISTiledMapServiceLayer, FeatureLayer,
  Query, QueryTask,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker, 
        esriConfig, jsapiBundle,
        arrayUtils, parser, keys,  Color, domConstruct, domClass, Button
  
  borderContainer, contentPane, titlePane, AccordionContainer,
        dom, on
      ) {
        parser.parse();      
0 Kudos
ionarawilson1
by
Deactivated User
‎10-18-2013 01:31 PM
Duh! I forgot to add a comma after Button! By the way, do you how we can increase the width or the height of the attribute inspector? Thank you so much!!!
0 Kudos
JasonZou
by
Frequent Contributor
‎10-18-2013 02:32 PM
ionara, you just posted this thread for changing the width and height yesterday. It does not work any more?
0 Kudos
ionarawilson1
by
Deactivated User
‎10-21-2013 07:59 AM
Hi Jason,

It does work, but I was curious if there is another way to do this, perhaps using CSS.
0 Kudos
JasonZou
by
Frequent Contributor
‎10-21-2013 08:23 AM
Calling resize() might be the easiest way. Controlling the popup size via css is not easy and may not be a good idea since different feature layer may have different set of attributes which will require the popup able to adjust its size dynamically.
0 Kudos