custom template picker to have only specific items

irishadar · ‎12-31-2013

Hi all,
i'm using the TemplatePicker widget in the editor and want to have only one item and not the 4 i have in the layer .
has any one have an idea .

i have tried the "ITEMS" instead of the layer with no luck.
i also tried to use jquery selector to hide the other - no luck there either.

$('#ThePicker td[idx!="2"]').css("display", "none");

if anyone has suggestion ,i'll be happy to hear.

thanks
iris

GaneshSolai_Sambandam · ‎01-02-2014

Hi Bird,

Use the code, which I have created and this should be useful as a starting point and if you feel that this thread has been answered your query, then please post answered for this thread.

[HTML]<html lang="en">
   <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>Editable Points of Interest and Evacuation Map for Sheep Fire</title>

     
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/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;
         width:250px;
         border:none;
       }
       #map{
         padding:0;
       }
       #header{
         font-weight:600;
         font-size:14pt;
         color:#666666;
         padding-left:20px;
       }
     </style>

     
     <script type="text/javascript">
         djConfig = {
             parseOnLoad: true
         };
     </script>

     
     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></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");

         var map;
         var resizeTimer;
         var firePerimeter;
         var evacuationPerimeter;
         var pointsOfInterest;
         var fLayer, edLayer;
         var templatePicker, myEditor;
         var editLayers;
         var editorWidget;

         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 = "/arcgisserver/apis/javascript/proxy/proxy.ashx";

             //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
             esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");

             var initialExtent = new esri.geometry.Extent({ "xmin": -117.66, "ymin": 34.19, "xmax": -117.41, "ymax": 34.37, "spatialReference": { "wkid": 4326 } });
             map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: false, nav: true });

             dojo.connect(map, "onLoad", function () {
                 dojo.connect(dijit.byId('map'), 'resize', function () {
                     resizeMap();
                 });
             });

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

              pointsOfInterest = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0", {
                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                 outFields: ['*']
             });

              evacuationPerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/1", {
                  mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                  outFields: ['*']
              });

             firePerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/2", {
                 mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well
                 outFields: ['*']
             });

           // map.addLayers([pointsOfInterest, evacuationPerimeter]);
         }

         function fireEd() {

             //alert("fireEd");
             //map.removeAllLayers();
             if (fLayer) {
                 map.removeLayer(fLayer);
             }
             //dojo.connect(map, "onLayersAddResult", initEditor);
             var myLyrList = document.getElementById("myList");
             edLayer = myLyrList.options[myList.selectedIndex].text;
             //alert(myLyrList.options[myList.selectedIndex].value);
             switch (myLyrList.options[myList.selectedIndex].value) {
                 case "0":
                     fLayer = pointsOfInterest;
                     break;
                 case "1":
                     fLayer = evacuationPerimeter;
                     break;
                 case "2":
                     fLayer = firePerimeter;
                     break;
             }


             map.addLayers([fLayer]);

         }

         function initEditor(results) {

             editLayers = dojo.map(results, function (result) {
                 return {
                     'featureLayer': result.layer
                 };
             });
             createEditor();
         }
         //Functions to create and destroy the editor. We do this each time the edit button is clicked.
         function createEditor() {

             if (editorWidget) {
                 editorWidget.destroy();
                 editorWidget = null;
                // return;
             }
             if (editLayers.length > 0) {
                 //create template picker
                 var templateLayers = dojo.map(editLayers, function (layer) {
                     return layer.featureLayer;
                 });

                 var eDiv = dojo.create("div", {
                     id: "templDiv"
                 });
                 dojo.byId('leftPane').appendChild(eDiv);
                 var editLayerInfo = editLayers;
                 var templatePicker = new esri.dijit.editing.TemplatePicker({
                     featureLayers: templateLayers,
                     rows: 'auto',
                     columns: 'auto',
                   // style: 'height:98%;width:98%;'
                 }, 'templDiv');
                 templatePicker.startup();

                 var settings = {
                     map: map,
                     templatePicker: templatePicker,
                     layerInfos: editLayerInfo,
                     toolbarVisible: true
                 };
                 var params = {
                     settings: settings
                 };
                 var eDiv1 = dojo.create("div", {
                     id: "editDiv"
                 });
                 dojo.byId('leftPane').appendChild(eDiv1);
                 editorWidget = new esri.dijit.editing.Editor(params, "editDiv");
                 editorWidget.startup();
             }

         }

         function destroyEditor() {
             if (editorWidget) {
                 editorWidget.destroy();
                 editorWidget = null;
             }

         }




         //Handle resize of browser
         function resizeMap() {
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout(function () {
                 map.resize();
                 map.reposition();
             }, 500);
         }
         dojo.addOnLoad(init);
     </script>
   </head>
   <body class="claro">
     <div dojotype="dijit.layout.BorderContainer" design="headline" style="width:100%;height:100%;">
       <div dojotype="dijit.layout.ContentPane" id="header" region="top">Editable Fire Map</div>
       <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>
       <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left">

            <select id="myList" onchange="fireEd()">
     <option value="">Choose layer to edit</option>
           <option value="0">Points of Interest</option>
                 <option value="1">Evacuation Perimeter</option>
                <option value="2">Fire Perimeter</option>
        </select><br><br>

            <input type="button" onclick="createEditor();" value="Create Editor" disabled/>
        <input type="button" onclick="destroyEditor();" value="Destroy Editor"disabled/>

         <div id="templateDiv"></div>
         <div id="editorDiv"></div>
       </div>
     </div>
   </body>
</html>[/HTML]

JakeSkinner · ‎01-02-2014

Hi all,
i'm using the TemplatePicker widget in the editor and want to have only one item and not the 4 i have in the layer .
has any one have an idea .

i have tried the "ITEMS" instead of the layer with no luck.
i also tried to use jquery selector to hide the other - no luck there either.

$('#ThePicker td[idx!="2"]').css("display", "none");

if anyone has suggestion ,i'll be happy to hear.

thanks
iris

Hi Iris,

You can query out the layer by ID. Ex:

var layersWildfire = [results.layers[1].layer]

function initEditor(results) {
      var layerInfosWildfire = array.map(results.layers, function(result) {
        return {
          featureLayer : result.layer
        };
      });

      var layersWildfire = [results.layers[1].layer]   

      var tpCustom = new TemplatePicker({
          featureLayers: layersWildfire,
          columns: 2
      }, "divLeft")     
      tpCustom.startup();            


      var editorSettings = {
          map: map,
          geometryService: new GeometryService("http://server/arcgis/rest/services/Utilities/Geometry/GeometryServer"),
          layerInfos: layerInfosWildfire,
          templatePicker: tpCustom,
      }

      var editorParams = {
          settings: editorSettings
      }

      widgetEditor = new Editor(editorParams, "divTop")
      widgetEditor.startup();
    };

irishadar · ‎01-06-2014

Thanks for the replay,
I didn't explain my self well; I need to reduce the number of items in the template picker.
That means that if I have 10 sub types in my layer I want the template layer to only display one or two of them.
I've mange to do so on a standalone page but , once I use it in my app , I always get one item per layer says: "loading�?�" in the label and it has no symbol or template.
I think maybe the template picker is not ready, how can I tell if it is ready?
Attached is the working script.
and two print screen .

thanks
iris