how to have an Infotemplate/popup with move/next button to navigate to all the attributes?

[ChitraKrishnan]

Hi,

I am trying to have a move next/previous button in infotemplate/popup to navigate to the different attributes of a single feature.  I have attached sample code. 

 Any help would be greatly appreciated. 

-Chitra

 _createBlockLayerMoveNext: function (defExpression, renderer) {                                  

            this.blocklyr = new GraphicsLayer({ id: 'blocklyr' });
            var grps = [];
            var url = "https://services8.arcgis.com/HPJsu0I9OjNDnQ7I/arcgis/rest/services/tl_2020_42_tabblock20/FeatureServer/0";            

            var blockGroupsLyr = new FeatureLayer(url, {
                outFields: ['*']
            });

            var queryParams = new query();
            queryParams.outFields = ['*'];
            queryParams.geometry = this.map.extent;
            queryParams.spatialRel = "intersects";

            blockGroupsLyr.queryFeatures(queryParams)

                .then((results) => {

                    results.features.map(function (feature) {                     

                        var ply = new Polygon({
                            rings: feature.geometry.rings,
                            spatialReference: feature.geometry.spatialReference
                        });

                        var pictureMarkerSymbol = new PictureMarkerSymbol('app/widgets/DataLayers/images/Assisting-Prostitution.png', 25, 25);

                        var infoTemplate = new InfoTemplate();
                        infoTemplate.setTitle("<b>Block-" + feature.attributes.BLOCKCE20 + "<br/>");
                        infoTemplate.setContent("<b>" + feature.attributes.BLOCKCE20 + "</b><br/>");

                        for (i = 0; i < feature.attributes.length; i++) {

                            //loop through the attributes and add to infotemplate like a next/previous button                        
                        }
                       
                        var newppin = new Point(ply.getCentroid().x, ply.getCentroid().y,
                            new SpatialReference({ wkid: 3857 })
                        );
                        grps.push(new Graphic(newppin, pictureMarkerSymbol).setInfoTemplate(infoTemplate));
                    });

                    this.blocklyr.clear();
                    array.forEach(grps, lang.hitch(this, function (g) {
                        this.blocklyr.add(g);
                    }));
                    
                    this.map.addLayer(this.blocklyr);
                })   
                .then(response => {
                    this._shelter.hide();
                })
                .otherwise((error) => {
                    console.log(error.error);
                });
            
        },