How to manage multiple features in PopupTemplate

[StanLambert]

I am using PopupTemplate to display feature attributes to the user when a graphic is clicked. In order to have maximum control over the format of the content I am using the "function" method of creating the content. This method is shown in the "PopupTemplate with promise" sample code. I ended up implementing it almost exactly the same as this sample, minus the StatisticDefinition components which I did not need.

So basically, the function I created for the PopupTemplate content makes its own call to the REST service, transforms the feature attributes returned from the REST service into HTML, and returns that content to the PopupTemplate. This works great as long as there are no overlapping features. 

If more than one feature is returned from the REST service call, then the PopupTemplate shows the navigation buttons as it should, for example, "1 of 2", and allows the user to navigate forward and backward between the features. However, I cannot find any documentation regarding how to supply the content to the PopupTemplate so that it actually switches between the attributes of the different features as the user navigates. The sample that I worked from shows how to create a single content string to supply the content of the PopupTemplate.  This works fine for a single feature, but I don't see any way to supply the PopupTemplate with content for multiple features if the user clicks a graphic with overlapping features.

Obviously the PopupTemplate "knows" that there are multiple features to display because it creates the navigation buttons automatically. How can I format the content from multiple features so that the PopupTemplate switches between the content for each feature as the user navigates through the features?

I'm using the ArcGIS 4.7 JavaScript library.

[RobertScheitlin__GISP]

Stan,

   Are you setting the popups features property?

view.popup.features

[StanLambert]

Robert,

I'm using PopupTemplate.  I don't see a "features" property for that class although I do see that "features" is a property of Popup.  I'm confused about the relationship between these two classes to be honest.

[RobertScheitlin__GISP]

Stan,

   I would have to see your code and how you are doing things. A popupTemplate is a the way you define how the popup widget will show for the data in that particular feature. If you are not manually setting the contents of the popup then a pagination of the feature should be handled for you automatically.

[nrhill123]

Robert,

Could you elaborate further on this topic? I am using popupTemplate in a React.js application and I seem to be running into a similar issue as Stan was in this scenario. I've attached my application below if you would like to give it a go. I have multiple features for each point and I cannot paginate beyond the first feature, and I cannot figure out the reason why.

Thanks.

[StanLambert]

I figured it out.  I must not have been passing the geometry correctly to the Query component.  Here's how it works:

I have a function that executes a QueryTask and returns a Promise. This function is assigned to the "content" property of the PopupTemplate and is supplied with the target that the user clicked on. (This is illustrated in the example here ). Using the graphic property of the target, I get the geometry and use that to configure the Query that is executed by the QueryTask.  The url of the QueryTask is assigned target.graphic.sourceLayer.url.  

If the user clicks on a graphic that contains multiple features, the geometry of the first feature is passed to my function. My function executes the QueryTask and the results are formatted in the Promise and returned back to PopupTemplate.  Here's the part I didn't originally understand: When the navigation button on the PopupTemplate is clicked to advance to the next feature, THAT feature's geometry is passed to my function and the process is repeated for the second feature, and so on.

Here's the relevant part of the code. It runs at application startup and creates a global function that creates the content for any graphic that is clicked on any layer. (My application has well over 100 layers).

require([
    "esri/tasks/QueryTask", "esri/tasks/support/Query"
], function (QueryTask, Query) {

   window.createPopupContent = function (target) {
       var url = target.graphic.sourceLayer.url + '? 
           f=json&geometryType=esriGeometryEnvelope&inSR=102100&outSR=102100&where=1=1';
                
      var queryTask = new QueryTask({
         url: url
      });

      var query = new Query({
        geometry: target.graphic.geometry,
        outFields: ['*']
      });‍‍‍‍‍‍‍‍‍

    return queryTask.execute(query).then(function (result) {
        // format the content and return it to PopupTemplate:
        return myApp.getService('PopupContentService').formatContentForPopup(result);
})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I also noticed that once the content for a feature has been created, PopupTemplate caches it and does not make any more calls to my function.

It would be nice to have a sample in the documentation illustrating the use of the PopupTemplate with multiple features. The samples that are there are quite good and definitely helped me to get to where I am now, but I struggled a bit with multiple features in the PopupTemplate.