How to force attribute popup of a graphic to show?

Question

I am trying to create an application that will center on a polyline and then show that polyline graphic's attributes. An example of what I am trying to do is attached below. Currently, it centers on a polyline when I click a button, but I can't figure out how to force that polyline graphic's attribute popup to show. Can anyone point me towards documentation on how to control a graphic's attribute popup? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Add a Legend to LayerList - 4.10</title> <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/themes/dark/main.css"> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 80%; width: 100%; overflow: hidden; } </style> <script src="https://js.arcgis.com/4.10/"></script> <script> var view = null; var polylineGraphic = null; function goToPolyline(){ if (view){ view.when(function(){ view.goTo({ target: polylineGraphic, animate: true }); }); }else{ console.log("No view..."); } } require([ "esri/Map", "esri/views/MapView", "esri/Graphic" ], function( Map, MapView, Graphic ) { var map = new Map({ basemap: "dark-gray" }); view = new MapView({ center: [-60, 35], container: "viewDiv", map: map, zoom: 5 }); // First create a line geometry (this is the Keystone pipeline) var polyline = { type: "polyline", // autocasts as new Polyline() paths: [ [-111.30, 52.68], [-98, 49.5], [-93.94, 29.89] ] }; // Create a symbol for drawing the line var lineSymbol = { type: "simple-line", // autocasts as SimpleLineSymbol() color: [150, 150, 255], width: 4 }; // Create an object for storing attributes related to the line var lineAtt = { Name: "Keystone Pipeline", Owner: "TransCanada", Length: "3,456 km" }; polylineGraphic = new Graphic({ geometry: polyline, symbol: lineSymbol, attributes: lineAtt, popupTemplate: { // autocasts as new PopupTemplate() title: "{Name}", content: [{ type: "fields", fieldInfos: [{ fieldName: "Name" }, { fieldName: "Owner" }, { fieldName: "Length" }] }] } }); view.graphics.add(polylineGraphic); }); </script> </head> <body> <div id="viewDiv"></div> <input type="button" value="Go To" onclick="goToPolyline();"> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · Accepted Answer

Vincent, Here is some code to make that happen: function goToPolyline(){ if (view){ view.when(function(){ view.goTo({ target: polylineGraphic, animate: true }).then(function(){ view.popup.open({features :[polylineGraphic]}); }); }); }else{ console.log("No view..."); } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍