Select to view content in your preferred language

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

1463
11
09-01-2023 05:18 PM
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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:

SaadullahBaloch_0-1693677757896.png

 

 

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>`;
  }
}

 

 

 

 

 

Question | Analyze | Visualize
0 Kudos
11 Replies
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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

Question | Analyze | Visualize
0 Kudos
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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

Question | Analyze | Visualize
0 Kudos
KenBuja
MVP Esteemed Contributor

No, I can't figure this one out

Ed_
by MVP Regular Contributor
MVP Regular Contributor

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

Question | Analyze | Visualize
0 Kudos
Ed_
by MVP Regular Contributor
MVP Regular Contributor

@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. 

Question | Analyze | Visualize
0 Kudos
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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?

Question | Analyze | Visualize
0 Kudos
KenBuja
MVP Esteemed Contributor

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

Ed_
by MVP Regular Contributor
MVP Regular Contributor

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. 

Question | Analyze | Visualize
0 Kudos
Ed_
by MVP Regular Contributor
MVP Regular Contributor

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>
   
    <!-- Popup div -->
    <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>

    <!-- Link section for the rest of the addresses -->
    <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>
        <!-- Add more addresses as needed -->
    </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:

HTML Popup1.pngHTML Popup.png

 

Question | Analyze | Visualize
0 Kudos