InfoWindow is not displaying multiple graphics attributes

Question

In my arcgis javascript map I have to identify on map when user clicks on Map. In map there is no layers added except basemap layer. I have 10 map layers upon which in doing IdentifyTask and when result is return I add those graphics to map. in return graphis I also add infoTemplate.

When user click on any graphics it show the attributes only for the selected graphic but doesn't have any default paginiation faclitiy so I can also see the over lapped graphics result.

identifyFeatures:function(evt){
        var rslts=[];
        _.each(this.identifablelayers,function(layer){
            var fT=new IdentifyTask(layer.get('url'));              
            var params = new IdentifyParameters();
            params.tolerance = this.mapv.setting.idetifyTolerance;
            params.layerIds = [0];
            params.layerOption = "top";
            params.returnGeometry = true;
            params.width = this.mapv.map.width;
            params.height = this.mapv.map.height;
            params.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
            params.geometry = evt.mapPoint;
            params.mapExtent = this.mapv.map.extent;
            var result=fT.execute(params);              
            rslts.push(result);
        },this);
        all(rslts).then(this.identifyFeaturesCallBack,this.handleQABfClBErr,this.handleIdentifyProgress);  
},
identifyFeaturesCallBack:function(response){            
        var features=[];            
        _.each(response,function(lyresponse,i){
            var lyr=this.identifablelayers[i];
            _.each(lyresponse, function(ftr) {
                var graphic=ftr.feature;

                if(lyr.get('template')!=undefined && lyr.get('template')!=null){                                
                    var template=new InfoTemplate(lyr.get('name'), lyr.get('template'));                        
                    graphic.setInfoTemplate(template);
                }else{
                    var template=new InfoTemplate(lyr.get('name'), "${*}");                         
                    graphic.setInfoTemplate(template);
                }
                var smb= this.mapv.smbl.roadSearchSymbol;
                if( lyr.get('layercolor')!=undefined && lyr.get('layercolor')!=null){
                    if(graphic.geometry.type=='polyline'){
                        smb= new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,this.mapv.convertHexToColor(lyr.get('layercolor'),100), this.mapv.setting.lineWidth);
                        if(lyr.get('name').toUpperCase()=='BRIDGES' || lyr.get('name').toUpperCase().indexOf('BRIDGE')>=0){
                            smb= new SimpleLineSymbol(SimpleLineSymbol.STYLE_SHORTDASH,this.mapv.convertHexToColor(lyr.get('layercolor'),100), parseInt(this.mapv.setting.lineWidth) + parseInt(this.mapv.setting.extraBridgeWidth));
                        }
                    }else if(graphic.geometry.type=='polygon'){
                        smb= this.mapv.smbl.plmPolygonDefaultSymbol;                            
                        var symbolPolygonDefaultLn=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, this.mapv.convertHexToColor(lyr.get('layercolor'),100), this.mapv.setting.polygonWidth); 
                        smb = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, symbolPolygonDefaultLn, null);                             
                    }else if(graphic.geometry.type=='point'){
                        smb=this.mapv.smbl.plmPointHighLightSymbol;
                        smb=new SimpleMarkerSymbol(
                         SimpleMarkerSymbol.STYLE_SQUARE, this.mapv.setting.pointWidth,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, this.mapv.convertHexToColor(lyr.get('layercolor'),100), 4),
                        this.mapv.convertHexToColor(lyr.get('layercolor'),100));
                    }
                }
                graphic.setSymbol(smb);
                this.mapv.map.graphics.add(graphic);
                this.resultCache.push(graphic);     
                features.push(graphic);

            }.bind(this));

        }.bind(this));

        this.activeInactive(null,true);
        this.removeHandlers(false,'click');
    },

I tried by adding features to infowindow too but it doesn't work. It only works when I add all these 10 layers to map and then try doing Idenity on map. by this I get default < > at Infowindow header by default. highlight graphic also move by default even graphics are overlapping.

Answer 1

There is a function called setFeatures on the map.infoWindow which you can use for the popup to allow paging through the results, an example of setting it is

var deferred = identifyTask
            .execute(identifyParams)
            .addCallback(function (response) {
    // response is an array of identify result objects
    // Let's return an array of features.
    return arrayUtils.map(response, function (result) {
        var feature = result.feature;    
        feature.attributes.layerName = result.layerName;
        var taxParcelTemplate = new InfoTemplate("",
        "${Postal Address} <br/> Owner of record: ${First Owner Name}");
        feature.setInfoTemplate(taxParcelTemplate);
        return feature;
    });
});

// InfoWindow expects an array of features from each deferred
// object that you pass. If the response from the task execution
// above is not an array of features, then you need to add a callback
// like the one above to post-process the response and return an
// array of features.
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(event.mapPoint);

The API reference is at https://developers.arcgis.com/javascript/3/jsapi/popup-amd.html#setfeatures