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

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

 

 

 

 

 

Ed_

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.