nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic Popups - Map viewer

WFCAdmin

Hello,

I’m trying to configure a custom pop-up in the new Map Viewer that displays species DNA detection results. I want the pop-up to dynamically filter out species with no data (empty fields) and present only those with results in a clean, readable format, preferably as a table in a text popup.

Any guidance, examples, or workarounds would be very helpful.

Thanks in advance!

Here are some examples

This is what the table looks like without the filtering

I would love this format, but filtered to hide all empty data.

Here are a few clunky alternatives I was able to create.

Find more posts tagged with

Mapping

Accepted answers

All comments

AustinAverill

So, assuming you have a feature service you can access that looks something like the following:

You can access and loop through to create a table that looks like what you provided pretty easy using an arcade element in your popup. The code would look something like:

var fs = FeatureSet(def)//replace with whatever call for your data


//style tags
var th_tag = `border-bottom:1px solid black;border-spacing:15px;padding:8px;text-align:center`
var td_tag = 'padding:8px;text-align:center'
var sp_tag = 'padding:8px,text-align:left'


//initiates the table and defines column header data cells
var table = `<table><tbody><tr><td></td><td style="${th_tag}"><strong>Dna Detected?</strong></td><td style="${th_tag}"><strong># of Wells</strong></td></tr></tbody>`

//loops through featureset (fs) and returns a new row for each data point with the appropriate attirbutes
//you will need to replace f['species'] with the appropriate column name from your dataset, as well as the others
for(var f in fs){
  if(IsEmpty(f['dna']) || IsEmpty(f['wells']) || f['dna'] == " " || f['wells'] == " "){
    continue
  }
  table += `<tr><td style="${sp_tag}"><strong>${f['species']}</strong></td><td style="${td_tag}">${f['dna']}</td><td style="${td_tag}">${f['wells']}</td></tr>`
}

table += '</table>'

return {
  type : 'text',
  text : table
}

The result is a HTML table just like the one you included a screenshot of:

WFCAdmin

Wow! Thank you for your response. If I could get this to work, that would be incredible!!!

The rows in my table look like the following

DNA Detected? # of Wells

Bull Trout	{BULL_DNA_Detected}	{Num_BULL_Wells}
Dolly Varden	{DOVN_DNA_Detected}	{Num_DOVN_Wells}
Brook Trout	{BRKT_DNA_Detected}	{Num_BRKT_Wells}
Steelhead/Rainbow Trout	{MYKISS_DNA_Detected}	{Num_MYKISS_Wells}
Chinook Salmon	{CHIN_DNA_Detected}	{Num_CHIN_Wells}
Coho Salmon	{COHO_DNA_Detected}	{Num_COHO_Wells}
Any Salmon	{SLMD_DNA_Detected}	{Num_SMLD_Wells}
Pacific Lamprey	{PALA_DNA_Detected}	{Num_PALA_Wells}
River / Brook Lamprey	{LAMP_DNA_Detected}	{Num_LAMP_Wells}
Olympic Mudminnow	{OMMW_DNA_Detected}	{Num_OMMW_Wells}
Sculpin	{SCUL_DNA_Detected}	{Num_SCUL_Wells}
Western Pearlshell Mussel	{WEPS_DNA_Detected}	{Num_WEPS_Wells}
Western Ridged Mussel	{WRMS_DNA_Detected}	{Num_WRMS_Wells}
Oregon Floater Mussel	{ANOR_DNA_Detected}	{Num_ANOR_Wells}
California Floater Mussel	{ANCA_DNA_Detected}	{Num_ANCA_Wells}

Do you think this data format would function with the arcade expression that you provided?

Thank you so much for your help.

AustinAverill

Based on what you posted above, it looks like your dataset might look more like this, given that each point you are defining a pop up for has an entry similar to the one below:

This makes the looping a bit different, and adds another step, but still completely possible! The code for this would look more like below.

//create a dictionary to store species common names with associated field nomanclature
//in this example I am using the common name as the key and the field name representation as the value
var common_names = {
  'Bull Trout' : 'BULL',
  'Dolly Varden' : 'DOVN'
}

//style tags
var th_tag = `border-bottom:1px solid black;border-spacing:15px;padding:8px;text-align:center`
var td_tag = 'padding:8px;text-align:center'
var sp_tag = 'padding:8px,text-align:left'

//initiates the table and defines column header data cells
var table = `<table><tbody><tr><td></td><td style="${th_tag}"><strong>Dna Detected?</strong></td><td style="${th_tag}"><strong># of Wells</strong></td></tr></tbody>`

for(var k in common_names){
  //define field names for given species at k
  var dna_field = `${common_names[k]}_DNA_Detected`
  var wells_field = `Num_${common_names[k]}_Wells`

  if(IsEmpty($feature[dna_field]) || IsEmpty($feature[wells_field]) || $feature[dna_field] == ' ' || $feature[wells_field] == ' '){
    //skip if fields empty
    continue
  }else{
    table += `<tr><td style="${sp_tag}"><strong>${k}</strong></td><td style="${td_tag}">${$feature[dna_field]}</td><td style="${td_tag}">${$feature[wells_field]}</td></tr>`
  }
}

return {
  type : 'text',
  text : table
}

Do note that for this to work for every species listed on your features, you would need to finish filling in all the data for the "common_names" dictionary at the beginning of the code. Not that the format is {`common name` : `name_in_field`} and is case sensitive.

WFCAdmin

AustinAverill

You are amazing!

I have made a few updates to accommodate some preferred style changes, but I am running into a problem.

When I add the expression and click on a point the first time, it works perfectly. But if I click on a second point, nothing pops up. If I go back to the first point, there is nothing there now. All other points fail to produce results after the first point. Any ideas on what is going on?

An example of when the expression is added for the first time

Example of what happens when I click on subsequent points.

WFCAdmin

I tried it with your original expression, and it’s doing the same thing. It works if I click off the layer onto another layer with pop-ups, then click back to the eDNA results layer. The pop-up works perfectly on the first click, but won’t work for any other point until I click off the layer and back onto the eDNA layer again. Is this a pop-up refresh issue in ArcGIS Online / Map Viewer? Thank you so much for your help with this!!!

AustinAverill

So, to verify I understand - If you click on Point A after the expression is loaded, the HTML loads correctly. Then if you click on Point B, the HTML does not render. But if you click off the layer then click on Point B again, the HTML renders?

If this is the case, it sounds like some sort of issue with the way Map Viewer is handling it. I would recommend saving the map, clearing any cache, and opening the map again in a new window.

If Point B continues to not render the HTML but Point A does, it would probably suggest there is some error being caused with the data at Point B that additional error handling may be required to resolve. If this is the case, upload a picture of all the fields and values for the point along with a the full script you are executing and I can try to help diagnose what's going wrong.

RhettZufelt

I have had very similar issue before. I had to add Expects($feature, '*') to get it to work.

Take a look at this post and see if it helps.

AustinAverill

Having a little laugh here that the linked post involved all three of us. And here we are again.

WFCAdmin

OMG!!!!!! This is hilarious. I knew that this had been resolved in another thread. Thank you both so so much!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.