Hipervínculo dentro de una expresión de una ventana emergente en AGOL

AdamBakiera

Hola:

Tenemos un caso en el que queremos que uno de los resultados de la ventana emergente aparezca como hipervínculo, pero solo si corresponde a un dominio específico de esa capa. Si observas la captura de pantalla de abajo, verás «Servicio de fibra disponible». Esta capa tiene una expresión configurada para mostrar distintos mensajes según el dominio. Queremos que aquí haya un hipervínculo, pero solo si hay servicio de fibra disponible. No queremos que el mensaje sea un hipervínculo si es distinto de «Servicio de fibra disponible». Intenté insertar código HTML para crear una URL en la ventana de Arcade de la expresión, pero recibí un mensaje de «token no válido». Esto me hace pensar que HTML y Arcade no son compatibles (corríjanme si me equivoco). Otra cosa que lo complica es que la ventana HTML (para la visualización de atributos personalizados) ya está configurada para mostrar el icono  junto al mensaje. ¿Hay alguna forma de modificar mi expresión para que genere un hipervínculo si «Hay servicio de fibra disponible», pero que no lo genere si aparece cualquier otro mensaje?

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.