Hello - in continuing 3.x - 4.x functionality migraiton I'm running into some problems getting the popup to display query return results. We (mstranovsky) have a setup sort of like a near me, where we're returning a an intersect based on the search select-result event. In 3.x it's really straight-forward:
s<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"select-result"</SPAN><SPAN class="punctuation token">,</SPAN> showResults<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">showResults</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
mapMain<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clear</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>source<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Search by Address"</SPAN> <SPAN class="operator token">||</SPAN> evt<SPAN class="punctuation token">.</SPAN>source<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Search by Street"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//s.activeSource.name</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>source<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
qPoint <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
buffer <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geodesicBuffer</SPAN><SPAN class="punctuation token">(</SPAN>qPoint<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">9035</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//console.log(qPoint); //console.log(buffer); </SPAN>
<SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
symbol<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.15</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
symbol<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setOutline</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> graphicPoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>buffer<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
mapMain<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicPoly<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//geometry</SPAN>
<SPAN class="keyword token">var</SPAN> queryTran <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">;</SPAN>
queryTran<SPAN class="punctuation token">.</SPAN>geometry <SPAN class="operator token">=</SPAN> buffer<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> tranQuery <SPAN class="operator token">=</SPAN> lyrMobBnds<SPAN class="punctuation token">.</SPAN><SPAN class="token function">selectFeatures</SPAN><SPAN class="punctuation token">(</SPAN>queryTran<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>SELECTION_NEW<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
myPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>tranQuery<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
myPopup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>qPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//buffer</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>always worked really well, pass the event point into the geometry engine, buffer it, pass that geom to the query, select the feautures, pass and show the popup.
For 4.x, here's what I'm doing:
app<SPAN class="punctuation token">.</SPAN>search<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"select-result"</SPAN><SPAN class="punctuation token">,</SPAN> showResults<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">showResults</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN>clear<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>source<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Search by Address"</SPAN> <SPAN class="operator token">||</SPAN> evt<SPAN class="punctuation token">.</SPAN>source<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">==</SPAN> <SPAN class="string token">"Search by Street"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//s.activeSource.name</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>source<SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
qPoint <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>result<SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN>
buffer <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">geodesicBuffer</SPAN><SPAN class="punctuation token">(</SPAN>qPoint<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">9035</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">//console.log(qPoint); //console.log(buffer); </SPAN>
<SPAN class="keyword token">var</SPAN> symbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.15</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN>
outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as esri/symbols/SimpleLineSymbol</SPAN>
color<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"white"</SPAN><SPAN class="punctuation token">,</SPAN>
width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> graphicPoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>buffer<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicPoly<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//geometry</SPAN>
<SPAN class="keyword token">var</SPAN> queryTran <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">;</SPAN>
queryTran<SPAN class="punctuation token">.</SPAN>geometry <SPAN class="operator token">=</SPAN> buffer<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> tranQuery <SPAN class="operator token">=</SPAN> lyrMobBnds<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN>queryTran<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>mobResult<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//, FeatureLayer.SELECTION_NEW);</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>mobResult<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
app<SPAN class="punctuation token">.</SPAN>activeView<SPAN class="punctuation token">.</SPAN>popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
features<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>mobResult<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
location<SPAN class="punctuation token">:</SPAN> qPoint<SPAN class="comment token">//result.geometry.centroid</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>consol.log are clearly showing a result, but I cannot get the result to open in the poup. I keep getting a type error:
"TypeError: this.selectedFeature.getEffectivePopupTemplate is not a function"
I am not entirely certain I have my query setup correctly, but since the console log is showing the selectedFeature. Any insight is appreciated-
Thanks
David