Template Picker - Feature Layers are Re-Ordering on Refresh how to Fix?

[IanPeebles]

Hello everyone.  I have added a template picker to an application that contains 3 feature layers.  When the application loads, the template picker appears as it should (in order):

However, if I refresh the browser, the ordering can change:

When refreshing again:

And a final refresh:

As you can see, the order of which the template picker is populated changes each time.  There are no errors in console mode.  The layers appear in the following order at the rest endpoint

Feature services are hosted on arcgisonline.

My template picker code is as follows:

         // Template Picker
         var templatePicker = new TemplatePicker({
             featureLayers: layers,
             rows: "auto",
             columns: 3,
             grouping: false
         }, "templatePickerDiv");
         templatePicker.startup();

          // Template Picker Widget - Selection Only Add Point
          var selectedTemplate;
              templatePicker.on("selection-change", function() {
              if( templatePicker.getSelected() ) {
                 selectedTemplate = templatePicker.getSelected();
                 console.log("Name", selectedTemplate);
                 drawToolbar.activate(Draw.POINT);
            }
          });

Is there a way to get around this issue?  How can I keep the layer ordering locked in going 1,2,3.  I cannot have users bouncing all over the place to add a graphic to a map.

Has anyone else experienced this issue?

[KellyHutchins]

The template picker order depends on the order of the layers in the array that is used as the input for the featureLayers constructor option.  So in the snippet below if the first layer in the array is the layer with id 0, the second has 1 and the third is 2 then they'll always display in the order you want. 

 var widget = new TemplatePicker({
  featureLayers: layers,
  rows: "auto",
  columns: 9,
  showTooltip: true,
  style: "height: 100%; width: 900px;"
}, "templatePickerDiv");
 ‍‍‍‍‍‍‍‍

How are you adding the layers to the layers array?  In my test (similar to your app) I have layers 0, 1, 2 so I can do something like this to add the layer to the layers array. Here I'm using the layer id as the position in the array where I want to add the layer. Its not elegant but it works for this scenario. 

 layers[evt.layer.layerId] = evt.layer;‍

[IanPeebles]

Kelly,

Here is how the layers are added to the application:

The ordering of the add by feature layer ID goes: 0,1,2.

As far as my template picker code goes, here is more of it:

I tried using (inserted at line 137, then commented out lines 133 to 135):

layers[evt.layer.layerId] = evt.layer;

instead of (lines 133 to 135):

layers = arrayUtils.map(evt.layers, function(result) {
  return result.layer;
});

But that does not work.  I refreshed again and again and the layers still re-order.  That is how I do it.  I also tried with the ESRI sample and it has the same behavior.  Here is the sample I am referring to:  https://developers.arcgis.com/javascript/3/samples/ed_feature_creation/

Keep refreshing this sample and you will see the same behavior.

Any ideas?

Ian

[KellyHutchins]

Here's a link to my sample - can you reproduce with this? 

JS Bin - Collaborative JavaScript Debugging 

[IanPeebles]

Kelly, thank you much for your response.  Do you think this works really well if you add the layers to the map?  Your sample, just has the template picker itself.

I ended up going a different route.  Instead of using the template picker, I created buttons and wired my draws/edits to them.  Also working with the .css for the template picker is a headache.  The widget itself tends to do some weird things at times.

I now allow for a user to click on the button, perform a draw of points, then they can hit a submit button to post their graphic to the feature layer.  So, you can make as many draws as you want until you are satisfied with the position of the final graphic, then you can apply edits to the feature layer.  Here is what I did:

And how it looks within the app:

Sample shows a graphic that has been applied (to ESRI layer), the other is in draw mode (pushpin).

[KellyHutchins]

Same sample works for me if I modify it to add the layers to a map. 

JS Bin - Collaborative JavaScript Debugging 

[PaulFels]

I had the same issue with order of the layers in the TemplatePicker. After every refresh, the layers are ordered differently. The order of the layers in 'evt' (in the line 'function initEditor(evt)') is not always the same. So when mapping these layers:

   var layers = array.map(evt.layers, function (result) {
         return result.layer;
   });

you could add a sort(), in your case based on layerId:

   var layers = array.map(evt.layers, function (result) {
      return result.layer;
   }).sort(function (obj1, obj2) {
      return obj1.layerId - obj2.layerId;

   });

In my case the layerIds (no relations with the order in which they are added to the map) where not applicable, so I had to add a property (displayOrder) to the layers (after line 120 above, just after constructing the layers):

   trafficStudy1.displayOrder = 0;
   trafficStudy2.displayOrder = 1;
   trafficStudy3.displayOrder = 2;

Then I could use this property to sort the layers:

   var layers = array.map(evt.layers, function (result) {
      return result.layer;
   }).sort(function (obj1, obj2) {
      return obj1.displayOrder - obj2.displayOrder;
   });