Dynamic Popups - Map viewer
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.
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:
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.
