Hypertextový odkaz ve výrazu vyskakovacího okna v AGOL

AdamBakiera

Dobrý den,

Máme scénář, kdy chceme, aby se jeden z výsledků ve vyskakovacím okně zobrazil jako hypertextový odkaz, ale pouze v případě, že v dané vrstvě odpovídá určité doméně. Pokud se podíváte na níže uvedený snímek obrazovky, všimnete si položky „Fiber Service Available“. Tato vrstva má nastavený výraz, který zobrazuje různé zprávy v závislosti na doméně. Chceme zde hypertextový odkaz, ale pouze v případě, že je dostupné optické připojení. Nechceme, aby zpráva byla hypertextovým odkazem, pokud se liší od „Fiber Service Available“. Pokusil jsem se do okna Arcade pro výrazy vložit HTML kód, který by vytvořil URL, ale zobrazila se mi zpráva „neplatný token“. Z toho usuzuji, že HTML a Arcade nejdou dohromady (opravte mě, pokud se mýlím). Situaci navíc komplikuje to, že okno HTML (pro zobrazení vlastního atributu) je už nastavené tak, aby se vedle zprávy zobrazovala ikona . Existuje způsob, jak upravit výraz tak, aby vytvořil hypertextový odkaz, pokud je dostupná služba „Fiber Service“, ale aby hypertextový odkaz nevytvořil, pokud se zobrazí jakákoli jiná zpráva?

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.