Adding links to Map Popup(infoWindow)

FranklinAlexander

I want to add a couple of links the the bottom of a popup for a result feature. I was able to do this for the popup that shows when clicking on one of the results in the Query widget results table. This is unfortunately a lot harder to do for the popup that shows when the feature is clicked on the map (the results are a point layer). I cannot find where in the application that the actual 'onClick' event occurs. The links must be added AFTER the point on the map is clicked, so adding them to the template is not as option. This is because the links are dependent on the field value for the clicked feature. 

For the Query widget popup, I added two functions in the utils.js file:

addViewLinkToInfoWindow<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> attSect <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.attachmentsSection'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> attList <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.attachmentsSection ul'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> titleDiv <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.attachmentsSection div'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>attSect<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hidden'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            titleDiv<SPAN class="punctuation token">.</SPAN>parentNode<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeChild</SPAN><SPAN class="punctuation token">(</SPAN>titleDiv<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> viewurl <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://fwc-spdev5.fwc.state.fl.us/FRRP/Sites/Details/3020"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> viewTransect <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<li class="viewSite"><strong><a href="'</SPAN> <SPAN class="operator token">+</SPAN> viewurl <SPAN class="operator token">+</SPAN> <SPAN class="string token">'" target="_blank">View Site Details</a></strong></li>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>viewTransect<SPAN class="punctuation token">,</SPAN> attList<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="comment token">//console.log("attribute list ", attList);</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>

addTransectLinksToInfoWindow<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">var</SPAN> attSect <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.attachmentsSection'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> attList <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.attachmentsSection ul'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> titleDiv <SPAN class="operator token">=</SPAN> <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.attachmentsSection div'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
            html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeClass</SPAN><SPAN class="punctuation token">(</SPAN>attSect<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'hidden'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            titleDiv<SPAN class="punctuation token">.</SPAN>parentNode<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeChild</SPAN><SPAN class="punctuation token">(</SPAN>titleDiv<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> addurl <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://fwc-spdev5.fwc.state.fl.us/FRRP/Transects/Add/3020"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> viewurl <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://fwc-spdev5.fwc.state.fl.us/FRRP/Sites/Details/3020"</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> addTransect <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<li class="addTransect"><strong><a href="'</SPAN> <SPAN class="operator token">+</SPAN> addurl <SPAN class="operator token">+</SPAN> <SPAN class="string token">'" target="_blank">Add or Edit Transect</a></strong></li>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="keyword token">var</SPAN> editTransect <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toDom</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<li class="viewSite"><strong><a href="'</SPAN> <SPAN class="operator token">+</SPAN> viewurl <SPAN class="operator token">+</SPAN> <SPAN class="string token">'" target="_blank">View Site Details</a></strong></li>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>addTransect<SPAN class="punctuation token">,</SPAN> attList<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>editTransect<SPAN class="punctuation token">,</SPAN> attList<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="comment token">//console.log("attribute list ", attList);</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>

And then I called them in the SingleQueryResult.js file in the _onResultsTableClicked (event)

<SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>transectNum <SPAN class="operator token">===</SPAN> <SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
     queryUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addViewLinkToInfoWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
     <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>centerPoint<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
      queryUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addTransectLinksToInfoWindow</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">show</SPAN><SPAN class="punctuation token">(</SPAN>centerPoint<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>

If anyone knows where I can add this code so that I can add the same links to the popup resulting from a feature click, can you please let me know. Popups(infoWindows) can be confusing! lol

Thank you! 

RobertScheitlin__GISP

Franklin,

   What you are looking for is a FeatureAction.

Create a feature action in your widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers