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

Question

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?

PaulFels · Answer

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

emreaktas1_0-1716278371731.png

khutchins · Answer

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

JS Bin - Collaborative JavaScript Debugging

ipeebles · Answer

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

MatthewSmart451_4-1716276740052.png

MatthewSmart451_5-1716276780430.png

MatthewSmart451_7-1716276946660.png