Hyperlink in expressie van pop-up in AGOL

AdamBakiera

Hallo,

We hebben een scenario waarin we een van de resultaten in de pop-up als hyperlink willen weergeven, maar alleen als er een bepaald domein in die laag wordt aangetroffen. Als je de onderstaande schermafbeelding bekijkt, zie je 'Glasvezelservice beschikbaar'. Voor deze laag is een expressie ingesteld om verschillende berichten weer te geven, afhankelijk van het domein. We willen hier een hyperlink, maar alleen als glasvezel beschikbaar is. We willen niet dat het bericht een hyperlink is als het iets anders is dan 'Glasvezelservice beschikbaar'. Ik heb geprobeerd HTML-code in te voegen om een URL te maken in het Arcade-expressievenster, maar ik kreeg de melding 'ongeldig token'. Dat doet me vermoeden dat HTML en Arcade niet samengaan (corrigeer me als ik het mis heb). Een ander probleem is dat het HTML-venster (voor de aangepaste attribuutweergave) al is ingesteld om het pictogram  naast het bericht weer te geven. Is er een manier om mijn expressie aan te passen zodat er een hyperlink wordt gegenereerd als 'Glasvezelservice beschikbaar' wordt weergegeven, maar niet als er een ander bericht verschijnt?

XanderBakker

Hi Adam Bakiera ,

I know that this question is a bit old, but I wanted to share how you could solve this.

There are many ways to create a nice pop-up and show or hide content according to values in the attribute table.

This is a simplified result of what I did including just two services, but the same can be used to include all the services:

 

  

To obtain this result, you will need 3 expressions per service and create the html for the pop-up like this:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{expression/expr0}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN> {expression/expr1} <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://www.gvec.net/internet-plans/sign-up/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="selector token">display:</SPAN><SPAN class="punctuation token">{</SPAN>expression/expr2<SPAN class="punctuation token">}</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> (<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>sign-up<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>)<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN> <SPAN class="punctuation token">/></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>br</SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{expression/expr3}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN> {expression/expr4} <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>a</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://www.gvec.net/internet-plans/sign-up/<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="selector token">display:</SPAN><SPAN class="punctuation token">{</SPAN>expression/expr5<SPAN class="punctuation token">}</SPAN></SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> (<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>sign-up<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>b</SPAN><SPAN class="punctuation token">></SPAN></SPAN>)<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>a</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The first expression per service is to choose the image to use. I used the original image and a grey scale version to indicate the availability of the service. The expression looks like this and will be used to indicate the source of the image (I used some pasted image in a draft document on GeoNet):

<SPAN class="keyword token">var</SPAN> base_url <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://community.esri.com/servlet/JiveServlet/showImage/"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> imgs_fiber <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"102-13494-2-448650/pastedImage_1.png"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"102-13494-1-448633/pastedImage_1.png"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"fiber_acti"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> base_url <SPAN class="operator token">+</SPAN> imgs_fiber<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><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>
    <SPAN class="keyword token">return</SPAN> base_url <SPAN class="operator token">+</SPAN> imgs_fiber<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="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The second expression is used to define the text in a very simple way:

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"fiber_acti"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="string token">"Fiber Service Available"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="string token">"Fiber Service Not Available"</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>

The last expression is to configure the style display of the anchor (link) whith one of two values "none" (hide) or "inline" (show):

<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"fiber_acti"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="string token">"inline"</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="string token">"none"</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>

And this should be repeated for each service to ontain the effect.