Using Arcade or HTML to hide/display hyperlink in popup

736
6
Jump to solution
03-25-2021 06:41 AM
Labels (1)
JoshBillings
Occasional Contributor

Hey all,

I am trying to get a hyperlink to show only if the feature is "Reservable." (This layer deals with Picnic Shelters and Playgrounds).

I've created an expression that creates a hyperlink if it is reservable, but I don't want the hyperlink text to show up at all if it is not able to be reserved. See pictures for a little bit more context.

Is this possible?

Thanks!

JoshuaBillings_0-1616679143833.png 

JoshuaBillings_1-1616679169057.png

 

 

0 Kudos
1 Solution

Accepted Solutions
JohannesLindner
MVP Regular Contributor

Create another expression:

// expression/display_reservation_link
// returns 'none' if the feature is not reservable, else returns 'block'

var reservable = $feature.Reservable  // or however you determine if the feature is reservable
return IIF(reservable, 'block', 'none')

 

Go into your popup, switch to HTML source. Find your link and put it into a div:

<div style="display:{expression/display_reservation_link};">
<a href="{expression/reservation_link}">Click here to Learn How to Reserve!</a>
</div>

Have a great day!
Johannes

View solution in original post

6 Replies
JohannesLindner
MVP Regular Contributor

Create another expression:

// expression/display_reservation_link
// returns 'none' if the feature is not reservable, else returns 'block'

var reservable = $feature.Reservable  // or however you determine if the feature is reservable
return IIF(reservable, 'block', 'none')

 

Go into your popup, switch to HTML source. Find your link and put it into a div:

<div style="display:{expression/display_reservation_link};">
<a href="{expression/reservation_link}">Click here to Learn How to Reserve!</a>
</div>

Have a great day!
Johannes
JoshBillings
Occasional Contributor

Perfect! Thank you @JohannesLindner !

0 Kudos
AmyRoust
Occasional Contributor III

Am I correct that this only works in Classic Map Viewer and not the new one?

0 Kudos
JohannesLindner
MVP Regular Contributor

I haven't worked with the new MapViewer, yet.

When I tested right now, it did seem to delete unwanted components in the style attributes of HTML tags, and  I couldn't get a plain "display: none;" to work.

I got it to work with "display: {expression/expr1};", though. I'd have to test more to get an idea of what is and isn't allowed.

In the meantime, something like this works (switches between showing a google search link or plain text depending on whether the discharge is maintained by a public authority/company or a private citizen):

JohannesLindner_0-1646637834090.pngJohannesLindner_1-1646637848643.png

 

// show_maintainer
// returns "none" if the maintainer field is empty or set to "privat", else "inline"
if(Includes([null, "privat"], $feature.Unterhaltungsträger)) {
    return "none"
}
return "inline"
// show_private
// same as show_maintainer, only the other way around
if(Includes([null, "privat"], $feature.Unterhaltungsträger)) { 
    return "inline" 
}
return "none"

 

HTML source of the popup's text element:

<figure class="table">
    <table>
        <tbody>
            <tr>
                <td style="width:50%;">
                    Maintained by
                </td>
                <td>
                    <div style="display:{expression/show_maintainer};">
                        <a href="www.google.de/search?q={Unterhaltungsträger}" target="_blank">{Unterhaltungsträger}</a>
                    </div>
                    <div style="display:{expression/show_private};">
                        private or unknown
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    Discharge Rate
                </td>
                <td>
                    {expression/expr4}
                </td>
            </tr>
        </tbody>
    </table>
</figure>

 

 


Have a great day!
Johannes
0 Kudos
AmyRoust
Occasional Contributor III

This is interesting - I can get it to work with expressions if I nest them inside a table like your example. But using span or div tags on their own, as described in this tech support article and this community post does not work in the new Viewer. Thanks for testing, @JohannesLindner !

0 Kudos
AmyRoust
Occasional Contributor III

Update: I chatted with tech support about this. Map Viewer has a special "Arcade" content option for pop-ups that you have to use to embed the html code that uses Arcade. 

The first part of the workflow is the same - you go to Manage expressions and set up the IIF statement so that it checks to see if your field is empty. Then, you go back to the main config window and choose Arcade from the Add Content menu:

AmyRoust_0-1646757220551.png

In the dialogue box that opens, you have to put the HTML code in the text parameter like this:

AmyRoust_1-1646757241160.png

Unfortunately, this new method means that you'll have a blank line in your pop up if there is no data for that particular feature. Here's my example where I'm suppressing empty phone numbers (the Arcade content is in between two text contents:

AmyRoust_2-1646757528967.png

On the bright side, it appears that the original methodology from Conditional Field display with Arcade in Pop Ups (revisited) still works. It requires knowing how to create a table using HTML, but at least it works!

0 Kudos