topic Re: Placing the template picker and editor widget in dojo dialog in ArcGIS JavaScript Maps SDK Questions

Placing the template picker and editor widget in dojo dialog

Den-GIS — Wed, 31 Jul 2019 14:53:50 GMT

I'm trying to put template picker widget together with editor in the dojo dialog. Editor widget is not a problem. But template picker does not appear. Does anyone know what I'm doing wrong. To test, I use this Edit rivers and waterbodies template. Thanks in advance!

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>Edit rivers and waterbodies</title>
      <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
      <link rel="stylesheet" href="https://js.arcgis.com/3.29/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; }


       #editorButton{
         position: absolute;
         z-index:99;
         top: 3px;
         left: 170px;
         width: 100px;
         height: 25px;
         }
      </style>
      <script src="https://js.arcgis.com/3.29/"></script>
      <script>
         var map;

         require([
           "esri/map",
           "esri/tasks/GeometryService",
           "esri/layers/ArcGISTiledMapServiceLayer",
           "esri/layers/FeatureLayer",
           "esri/Color",
           "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",
           "dijit/Dialog", "dijit/form/Button", "dojo/on", "dojo/dom",
           "dojo/domReady!"
         ], function(
           Map, GeometryService,
           ArcGISTiledMapServiceLayer, FeatureLayer,
           Color, SimpleMarkerSymbol, SimpleLineSymbol,
           Editor, TemplatePicker,
           esriConfig, jsapiBundle,
           arrayUtils, parser, keys, BorderContainer, ContentPane, Dialog, Button, on, dom
         ) {
           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/javascript/3/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 GeometryService("https://utility.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 responsePoints = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
             mode: FeatureLayer.MODE_ONDEMAND,
             outFields: ['*']
           });

           map.addLayers([responsePoints]);

           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();
           }
         var editorDialog = new Dialog({
                   title: "Editor",
                   content: editorDiv,
                   //style: "width: 280px"
               });
               console.log("editorDialog", editorDialog);

         on(dom.byId('editorButton'), "click", function() {
                   editorDialog.show();
               });
         });
      </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
            <button id="editorButton" type="button"> Editor Button</button>
         </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>

Re: Placing the template picker and editor widget in dojo dialog

RobertScheitlin__GISP — Wed, 31 Jul 2019 15:48:25 GMT

Denis,

It does not make any sense to me for you to try and use a dialog widget to hold the editor and template picker, since a Dialog dijit is Modal it will not allow you to interact with the map while it is open, thus defeating the intended purpose of the editor widget and template widget.

Re: Placing the template picker and editor widget in dojo dialog

Den-GIS — Wed, 31 Jul 2019 16:50:02 GMT

Robert,
many thanks for your response!!!
I do not understand it. See screenshot: dojo dialog in "basic viewer" template (https://github.com/Esri/Viewer). Template picker and edit widget in dojo dialog. Is not it like that. Or I'm wrong?

Re: Placing the template picker and editor widget in dojo dialog

RobertScheitlin__GISP — Wed, 31 Jul 2019 17:01:00 GMT

Denis,

No that is not a Dojo Dijit Dialog. A dialog is Modal meaning that it is the only thing that can receive user interaction. What you picture there does not place an overlay over the rest of the app (to prevent user interaction) like the dialog dijit does.

Re: Placing the template picker and editor widget in dojo dialog

Den-GIS — Wed, 31 Jul 2019 17:21:48 GMT

OK . I did not know it. I tried to integrate for 2 days. pointless! .
in any case, thank's !

Re: Placing the template picker and editor widget in dojo dialog

RobertScheitlin__GISP — Wed, 31 Jul 2019 18:08:21 GMT

You should consider a FloatingPane dijit.

Re: Placing the template picker and editor widget in dojo dialog

Den-GIS — Wed, 31 Jul 2019 19:14:46 GMT

I'll try it. give the feedback.

Re: Placing the template picker and editor widget in dojo dialog

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:29:19 GMT

Denis,

Here is what I was talking about:

<!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>Edit rivers and waterbodies</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/FloatingPane.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/dojox/layout/resources/ResizeHandle.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;
    }

    .templateDiv {
      border: none;
    }

    .dj_ie .infowindow .window .top .right .user .content {
      position: relative;
    }

    .dj_ie .simpleInfoWindow .content {
      position: relative;
    }

    #editorButton {
      position: absolute;
      z-index: 99;
      top: 3px;
      left: 170px;
      width: 100px;
      height: 25px;
    }

    .dojoxDock {
      visibility: hidden;
    }

    #floatingEditor {
      position: absolute;
      top: 100px;
      right: 100px;
      width: 300px;
      height: 100%;
      max-height: 400px;
      visibility: hidden;
      z-index: 9;
    }

    .claro .dojoxFloatingMinimizeIcon {
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADWSURBVChTlVIhDoNAENyWalRtFQY0qh8AHKIkoO8DlRXoin4Cj0AgOd9UIflA+xA6Q7jkQhFlkuGWYYZd7tiN4yhEXdcnLBcwBkNqQA92YJPn+YfCFID5jPoGphRX0IIPhF5OEAR8870oitR1XfE8b3IYaK2lLEs/y7LjMAxPB4WCfqW5qiqxQzRTU0pR8yG9D7hwZomiiMtkMDBm8wyIGTAf+BNamIlwPxd/gx24dQlv7JkJ08nq0jPAfU5ssz3GItRxpAZs18ysqc0hnkWz+eA2/hoiXyTHZtKhdrvuAAAAAElFTkSuQmCC);
      padding-right: 10px;
    }
  </style>
  <script src="https://js.arcgis.com/3.29/"></script>
  <script>
    var map;

    require([
      "esri/map",
      "esri/tasks/GeometryService",
      "esri/layers/ArcGISTiledMapServiceLayer",
      "esri/layers/FeatureLayer",
      "esri/Color",
      "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",
      "dojox/layout/FloatingPane", "dijit/form/Button", "dojo/on", "dojo/dom",
      "dijit/registry","dojo/domReady!"
    ], function (
      Map, GeometryService,
      ArcGISTiledMapServiceLayer, FeatureLayer,
      Color, SimpleMarkerSymbol, SimpleLineSymbol,
      Editor, TemplatePicker,
      esriConfig, jsapiBundle,
      arrayUtils, parser, keys, BorderContainer, ContentPane, FloatingPane, Button, on, dom,
      registry
    ) {
      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/javascript/3/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 GeometryService(
        "https://utility.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 responsePoints = new FeatureLayer(
        "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          outFields: ['*']
        });

      map.addLayers([responsePoints]);

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

      on(dom.byId('editorButton'), "click", function () {
        registry.byId("floatingEditor").show();
      });
    });
  </script>
</head>

<body class="claro">
  <div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
    style="height:100%;height:100%;">
    <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
      Edit Hydrography
      <button id="editorButton" type="button"> Editor Button</button>
    </div>
    
    <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
  </div>
  <div id="floatingEditor" dojoType="dojox/layout/FloatingPane" title="Editor" dockTo="dock" 
        style="visibility:hidden;" closable="false" resizable="true" dockable="true">
        <div id="editorDiv"></div>
        <div id="templateDiv"></div>
    </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Placing the template picker and editor widget in dojo dialog

Den-GIS — Wed, 31 Jul 2019 21:00:23 GMT

great, you are fast!
That's what I was looking for
many many thanks