topic Re: Show more attributes as a clickable link using Arcade Element in ArcGIS Online Questions

Show more attributes as a clickable text (react) using Arcade Element

Ed_ — Thu, 07 Sep 2023 18:35:17 GMT

I am trying to setup a popup such that I would like it to show more addresses (if greater than 2) as a clickable, like a clickable text (view more addresses). Below code is an attempt which opens up a new blank browser window in Experience Builder. Since the map is embedded in an Experience Builder app.

Purpose:

The popup should initially show only two addresses followed by a clickable text. If the user clicks on that text only then more addresses will show.

Desired output:

Current code:

/ Create a variable that is the FeatureSet of intersecting feature attributes var Address = FeatureSetByName($map, "ADDRESS") var intersectLayer = Intersects(Address, $feature) // This variable will be used to track the number of addresses shown var addressCount = 0; var showAllAddresses = true; var popup = '<h3>Property Summary</h3>'; for (var f in intersectLayer){ if (addressCount < 2) { popup += `<b>Address:</b> ${f.FullAddress} <br><br>`; addressCount++; } else { //popup += '<em>More addresses...</em>'; popup += '<em><a href="javascript&colon;toggleAddresses()">View more addresses...</a></em>'; break; // Exit the loop after showing two addresses } } // Function to toggle the display of all addresses function toggleAddresses() { showAllAddresses = true; // Rebuild the popup content with all addresses popup = '<h3>Property Summary</h3>'; for (var f in intersectLayer){ popup += `<b>Address:</b> ${f.FullAddress} <br><br>`; } }

Re: Show more attributes as a clickable link using Arcade Element

Ed_ — Sat, 02 Sep 2023 00:23:14 GMT

@KenBuja when you have the time, can you please have a look at it? Thank you 🙂

Re: Show more attributes as a clickable link using Arcade Element

Ed_ — Tue, 05 Sep 2023 19:35:02 GMT

Hi @KenBuja any ideas on this one? Thank you 🙂

Re: Show more attributes as a clickable link using Arcade Element

KenBuja — Tue, 05 Sep 2023 20:08:10 GMT

No, I can't figure this one out

Re: Show more attributes as a clickable link using Arcade Element

Ed_ — Tue, 05 Sep 2023 20:22:52 GMT

No worries @KenBuja if you come across something, please do let me know, thank you 🙂

Re: Show more attributes as a clickable link using Arcade Element

Ed_ — Wed, 06 Sep 2023 14:23:19 GMT

@KenBuja is it instead possible to create a collapsible list of addresses in the popup? Like if the addresses are more than two then the third, fourth addresses and so on will be initially hidden and if a user clicks on a text or something only then the entire list of addresses will show.

Re: Show more attributes as a clickable link using Arcade Element

Ed_ — Thu, 07 Sep 2023 03:16:10 GMT

Hi @KenBuja can this question's answer help in some way to the code in my question? Like to somehow use the PopupTemplate.title or something similar?

Re: Show more attributes as a clickable link using Arcade Element

KenBuja — Thu, 07 Sep 2023 13:24:28 GMT

That's showing the results of multiple features at the same location. That's built into the popup, as shown in this discussion.

Re: Show more attributes as a clickable link using Arcade Element

Ed_ — Thu, 07 Sep 2023 13:44:14 GMT

Good morning @KenBuja hope all is well, oh I see I guess I thought it would work in my case as well because of this, `property so you can show additional information by adding it to the title:` mentioned in that post's answer. Oh well I will keep on searching.

I don't know if it's possible to use `react language` and JS Script in Arcade Elements because I think this question might require these two.

Re: Show more attributes as a clickable link using Arcade Element

Ed_ — Mon, 11 Sep 2023 19:44:59 GMT

Hi @KenBuja happy Monday, hope all is well so, I did some searching and found an HTML snippet shown below, do you think this can help in what I am trying to achieve? Thank you so much time and help 🙂

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Popup Example</title> <style> /* CSS styles for the popup */ #popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; } </style> </head> <body> <h1>Addresses</h1> <button id="showPopup">Show Popup</button>  <div id="popup"> <h2>Selected Addresses</h2> <p>Address 1: 123 Main St, City1</p> <p>Address 2: 456 Elm St, City2</p> <a href="#" id="showAllAddresses">Show All Addresses</a> </div>  <div id="restOfAddresses" style="display: none;"> <h2>Rest of the Addresses</h2> <p>Address 3: 789 Oak St, City3</p> <p>Address 4: 101 Pine St, City4</p>  </div> <script> // JavaScript to toggle the popup and link sections document.getElementById("showPopup").addEventListener("click", function() { document.getElementById("popup").style.display = "block"; document.getElementById("restOfAddresses").style.display = "none"; }); document.getElementById("showAllAddresses").addEventListener("click", function() { document.getElementById("popup").style.display = "none"; document.getElementById("restOfAddresses").style.display = "block"; }); </script> </body> </html>

Original source code:

Re: Show more attributes as a clickable link using Arcade Element

KenBuja — Mon, 11 Sep 2023 20:44:50 GMT

As far as I know, you don't have that control over popups in a webmap in ArcGIS Online. You'd have to create your own site using Javascript do to something like that.

Re: Show more attributes as a clickable text (react) using Arcade Element

Ed_ — Mon, 11 Sep 2023 23:52:10 GMT

Sounds good Ken, good to know, it would be great if ESRI adds JS and react capabilities in map viewer (and other apps) itself rather than creating an entire site using ArcGIS SDK for JS for minor changes. Like they can simply add a toggle to modify code option in the app itself.