nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Format a text field in a pop-up to display multiple hyperlinks based on specific text

JulieScott-Ashe4

I have an attribute that is a text field. I'd like to display this attribute in a pop-up with different portions of the text hyperlinked to different urls. For example: "Development Activities are prohibited as per the Parks Art."

Development Activities would link to one url while Parks Act would link to another.

We've managed to find text strings and create a unique hyperlink but we're struggling with how to embed that back into the full attribute text.

Thanks for any ideas.

Trouver plus de publications taguées avec

Accepted answers

All comments

LanceCole

With the limited info you have given it sounds like you have done the hard part of identifying the strings and creating the urls. You just need to wrap those into a HTML string for the pop-up dialog in ArcGIS Online. This can be completed in the custom attribute display. We have done this using text separated with a comma and split the string using attribute expressions in the pop-up configuration to generate the HTML dynamically.

For your example, you can wrap the info in HTML:

<p><a href="url_link_for_development_ activities_from_expression_or_data">Development Activities</a> are prohibited as per the <a href="url_link_for_parks_art"> Parks Art</a>.</p>

will display: Development Activities are prohibited as per the Parks Art.

Use the button in the Custom Attribute Display to show your dialog in HTML. A list of supported HTML is available at Supported HTML—ArcGIS Online Help | ArcGIS and a blog is also available at Using URL parameters in pop-ups with a simple singe line example.

JulieScott-Ashe4

Hi Lance - Thanks for your reply. I see where and how your solution would work. However, I need to pull all the text from the attribute field (it can't be hard coded) because the text will change depending on the feature selected. So the hyperlinked text and the text between the hyperlinks all has to be pulled from the attribute table.

Does that make sense?

If you have any thoughts they'd be most welcome.

LanceCole

Julie,

You can build dynamic expressions or use the actual feature attributes in your pop-up, These can be used to assemble the HTML when the pop-up opens dynamically. As I did not have an example of the field(s) you are working with I simply included a generic URL in my examples.

Please take a look at Combining Arcade and HTML for a real life pop-up display or Insert HTML with Arcade. Take to Google or GeoNet for the many other options for adding expressions to your pop-ups. If you can provide a sample of the attributes you have to work with and the format the final hyperlink needs to be in, I may be able to help.

Here is also a great reference for Arcade

Lance

JulieScott-Ashe4

Thanks for the links - we've used the link you sent to help us set up some pop-ups for a different project with images/hyperlinks. Works great.

Let me see if I can clarify what we're trying to do.

We have a protected area feature class that has several fields that contain several sentences. For each of those fields we'd like particular portions of the text to show up as hyperlinks. The type of protected area will determine what text and what hyperlinks should display in the pop-up.

Here's an example of how the field would display in a pop-up:

Goal: Lorem ipsum dolor sit amet, eam et quas atqui delicata. Eam at officiis reformidans. Mei ne quando suscipit definitionem, per et tota summo minimum.

Here's a mockup of the data:

Type	Goal	Objective	Note
Conservancy	Lorem ipsum dolor sit amet, eam et quas atqui delicata. Eam at officiis reformidans. Mei ne quando suscipit definitionem, per et tota summo minimum.	abhorreant ut qui, tritani mentitum accommodare cum et, eam in discere graecis.	Ius inani harum euismod cu. In ius facilisis deterruisset. Mea vero vidit et. Mel aliquid pericula forensibus ut. Duo solet vocibus cu.
Park	Homero doming no eum. Timeam deserunt intellegebat nam cu. Eam sint mazim admodum ea, prima fierent sed id.	Qui eripuit nostrum indoctum in. Facer mazim ad est, has omittam accusata in.	Dictas ullamcorper ea duo, sea ne saepe ubique democritum. Ei tollit dicant vis, veniam possit molestiae eam ex, ex his virtute democritum.

Thanks for your help!

LanceCole

non, non Latine

How are you identifying the keywords and where are you storing their related URLs?

Do you have key list such as:

Lorem ipsum - "http://lorem_ipsum.org"

Eam at officiis - "http://eamofficiis.com"

etc.

If there is only a small number of items, you could create an other attribute field in data table and store a HTML string in addition to the plan text. Reference the HTML string in your pop-up.

LanceCole

Julie,

As it sounds like you potentially could have hundreds or thousands of keys to check for in the string. I would not recommend doing this dynamically in the Popup. The main reason is Arcade does not currently include the ability to reference external tables or data and is only limited to the current data contained in the feature class or generated expressions. Second it could be very slow.

I would recommend adding an additional text field to your feature class and pre-generating the display HTML and storing it in the feature class. This can easily be generated using python from a script tool from the text string that is stored in the feature class. You will also need a key index to hold the strings to be replaced and their equal HTML url. This could be stored in a small dictionary in the code for a limited number of keys or a data table for unlimited number of keys.

The table will contain two fields: 1) key text string to look for and 2) the URL

key	keyURL
"Development Activities"	"http://development.com"
"Parks Art"	"http://parks_art.org"
"Lorem ipsum"	"http://lorem_ipsum.net"
"Eam at officiis"	"https://eam.org/officiis"

The second part needed is the script to take a string, wrap it as HTML and replace the keys found with the keyHTML and save it to the feature class attribute. I prefer Python to do this and you would be iterating thought the list of keys, checking for a match and replacing if found. This process would not scale well for a very large number of key values and would need to be modified. Since this would be preprocessed, the user would not be encumbered with the processing time. Below is a sample Python script using a dictionary for the key values.

<SPAN class="comment token"># build small key dictionary</SPAN>
keys <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN>
keys<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Development Activities'</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="string token">'http://development.com'</SPAN>
keys<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Parks Art'</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="string token">'http://parks_art.org'</SPAN>
keys<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Lorem ipsum'</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="string token">'http://Lorem_ipsum.net'</SPAN>
keys<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Eam at officiis'</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="string token">'https://eam.org/officiis'</SPAN>
keys<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'suscipit'</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="string token">'https://eam.org/suscipit'</SPAN>
keys<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'Test'</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="string token">'http://test.org/test'</SPAN>

<SPAN class="comment token"># function to interate through keys and replace ALL in a string</SPAN>
<SPAN class="comment token"># note keys are case sensitve</SPAN>

<SPAN class="keyword token">def</SPAN> <SPAN class="token function">replaceKeys</SPAN><SPAN class="punctuation token">(</SPAN>str<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">:</SPAN>
    <SPAN class="keyword token">print</SPAN> str
    <SPAN class="keyword token">for</SPAN> key <SPAN class="keyword token">in</SPAN> keys<SPAN class="punctuation token">:</SPAN>
        <SPAN class="keyword token">if</SPAN> key <SPAN class="keyword token">in</SPAN> str<SPAN class="punctuation token">:</SPAN>
            href <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<a href="%s">%s</a>'</SPAN> <SPAN class="operator token">%</SPAN><SPAN class="punctuation token">(</SPAN>keys<SPAN class="punctuation token">[</SPAN>key<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> key<SPAN class="punctuation token">)</SPAN>
            str <SPAN class="operator token">=</SPAN> str<SPAN class="punctuation token">.</SPAN>replace<SPAN class="punctuation token">(</SPAN>key<SPAN class="punctuation token">,</SPAN> href<SPAN class="punctuation token">)</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="string token">'<p>%s</p>'</SPAN> <SPAN class="operator token">%</SPAN><SPAN class="punctuation token">(</SPAN>str<SPAN class="punctuation token">)</SPAN>

<SPAN class="keyword token">def</SPAN> <SPAN class="token function">main</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">:</SPAN>
    <SPAN class="comment token"># First Example</SPAN>
    str <SPAN class="operator token">=</SPAN> <SPAN class="string token">'Development Activities are prohibited as per the Parks Art.'</SPAN>
    <SPAN class="keyword token">print</SPAN> replaceKeys<SPAN class="punctuation token">(</SPAN>str<SPAN class="punctuation token">)</SPAN>

    <SPAN class="comment token"># Second Example</SPAN>
    str <SPAN class="operator token">=</SPAN> <SPAN class="string token">'Lorem ipsum dolor sit amet, eam et quas atqui delicata. Eam at officiis reformidans. Mei ne quando suscipit definitionem, per et tota summo minimum.'</SPAN>
    <SPAN class="keyword token">print</SPAN> replaceKeys<SPAN class="punctuation token">(</SPAN>str<SPAN class="punctuation token">)</SPAN>

    <SPAN class="comment token"># Case sensitive Example</SPAN>
    str <SPAN class="operator token">=</SPAN> <SPAN class="string token">'Test to see if this case sensitive.  This is just a test.'</SPAN>
    <SPAN class="keyword token">print</SPAN> replaceKeys<SPAN class="punctuation token">(</SPAN>str<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The above outputs:

Development Activities are prohibited as per the Parks Art.

Lorem ipsum dolor sit amet, eam et quas atqui delicata. Eam at officiis reformidans. Mei ne quando suscipit definitionem, per et tota summo minimum.

Test to see if this case sensitive. This is just a test.

Test to see if this case sensitive. This is just a test. (Note, only the capitalized "Test" was replaced)

Rather than printing you would be writing these to your feature class HTML Attribute as you iterate through the data using a cursor. You can also change line 16 to str = str.replace(key, href, 1). This will then only replace the first occurrence of the key found for each string

In AGOL you can use the pre-generated keyHTML field in the pop-up configuration adding each for Goal, Objective and Note as well as additional static text. and noted in the previous references. Sorry for the clunky example but without seeing your actual data or how you are implementing this I had to get a little creative.

JulieScott-Ashe4

Thanks for your detailed response. Sorry for the radio silence - I work part time. I'll dig in to what you've sent and see if I can get this working for our needs. Really appreciate your time!

KateCarlson

Julie-

I know this was a long time ago, curious if you ever find a way to accomplish this? I am now finding a need to do the same with an attribute field of descriptions that could be empowered with linked text.

Thanks-

Kate

KateCarlson

I always seem to do this, find a solution after asking! I am going to try this route, adding the HTML code directly to the attribute field. Example from my dataset:

<div>Residents gathered to protest George Floyd’s murder and call for change on May 26 on the street where he died, in the 3700 block of Chicago Avenue South in Minneapolis.
<a href="https://mappingpoliceviolence.org/" rel="nofollow ugc" target="_blank">Blacks are 3 times more likely to be killed by police.</a></div>

Open to other suggestions, but this works for now!

Kate

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.