Hiperlink em uma expressão de pop-up no AGOL

AdamBakiera

Olá,

Temos uma situação em que queremos que um dos resultados do pop-up apareça como um hiperlink, mas somente se corresponder a um determinado domínio nessa camada. Se você observar a captura de tela abaixo, verá "Serviço de fibra disponível". Essa camada tem uma expressão configurada para exibir mensagens diferentes, dependendo do domínio. Queremos um hiperlink aqui, mas somente se houver disponibilidade de fibra. Não queremos que a mensagem seja um hiperlink se for diferente de "Serviço de fibra disponível". Tentei inserir código HTML para criar um URL na janela da expressão Arcade, mas recebi a mensagem "token inválido". Isso me leva a pensar que HTML e Arcade não combinam (me corrija se eu estiver errado). Outro fator que complica a situação é que a janela HTML (para a exibição de atributos personalizados) já está configurada para exibir o ícone  ao lado da mensagem. Existe uma maneira de modificar minha expressão para gerar um hiperlink se "Serviço de fibra disponível", mas não gerar um hiperlink se qualquer outra mensagem for exibida?

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.