Show more attributes as a clickable text (react) using Arcade Element
1718
11
09-01-2023 05:18 PM
by
Ed_
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: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>`;
}
}
by
Ed_
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:
