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

4263
11
01-24-2019 01:42 PM
JulieScott-Ashe4
New Contributor III

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.

0 Kudos
11 Replies
LanceCole
MVP Regular Contributor

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.

0 Kudos
JulieScott-Ashe4
New Contributor III

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.

0 Kudos
LanceCole
MVP Regular Contributor

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

0 Kudos
JulieScott-Ashe4
New Contributor III

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:

TypeGoalObjectiveNote
ConservancyLorem 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.
ParkHomero 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!

0 Kudos
LanceCole
MVP Regular Contributor

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.

0 Kudos
JulieScott-Ashe4
New Contributor III

Currently we are have two expressions - one finds a keyword and creates a link specific to the keyword. The other expression acts as placeholder text for the link appearing only if the keyword was found. This means two expression for one keyword. It gets quite unwieldy as we have a several keywords and if we also have to hold the un-hyperlinked text in an expression then it's just too much.

Any solutions welcome!

0 Kudos
LanceCole
MVP Regular Contributor

How many key words do you have or anticipate?

Can you add an additional text attribute to the feature class the pop-up is generated from?

0 Kudos
LanceCole
MVP Regular Contributor

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

keykeyURL
"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.

# build small key dictionary
keys = {}
keys['Development Activities'] = 'http://development.com'
keys['Parks Art'] = 'http://parks_art.org'
keys['Lorem ipsum'] = 'http://Lorem_ipsum.net'
keys['Eam at officiis'] = 'https://eam.org/officiis'
keys['suscipit'] = 'https://eam.org/suscipit'
keys['Test'] = 'http://test.org/test'

# function to interate through keys and replace ALL in a string
# note keys are case sensitve

def replaceKeys(str):
    print str
    for key in keys:
        if key in str:
            href = '<a href="%s">%s</a>' %(keys[key], key)
            str = str.replace(key, href)
    return '<p>%s</p>' %(str)

def main():
    # First Example
    str = 'Development Activities are prohibited as per the Parks Art.'
    print replaceKeys(str)

    # Second Example
    str = 'Lorem ipsum dolor sit amet, eam et quas atqui delicata. Eam at officiis reformidans. Mei ne quando suscipit definitionem, per et tota summo minimum.'
    print replaceKeys(str)

    # Case sensitive Example
    str = 'Test to see if this case sensitive.  This is just a test.'
    print replaceKeys(str)
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The above outputs:

Development Activities are prohibited as per the Parks Art.

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.

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
New Contributor III

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!

0 Kudos