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

Arcade pop-up expression quesiton

JGVadnais1

Hello,

I'm new to Arcade but do have some coding knowledge. I'm creating a web map for a teacher whose students are collecting data outside using Survey123. The survey is set up to collect data on 3 different categories, Autotrophs, Heterotrophs, and Ambiotic Conditions. Once a category is selected, the accompanying group of questions displays. Each category aligns with a different group of questions.

Once the data is collected, a map will be generated. When a student clicks on the symbol/point that represents an autotroph, I'd like for only the group of autotroph questions to display in the pop-up. Same with the heterotroph and abiotic condition points.

Where would I go to learn how to code this specific display? Thank you.

Encontre mais publicações marcadas com

Accepted answers

JohannesLindner

Template literals in Arcade enclose the value you want to insert into the string with `${value}`. Not to be confused with the leading dollar sign on global variables like $feature, $datastore, $map, etc.

function heterotrophs() {
  return `${$feature['where_is_it_located_does_this_l']}
${$feature['does_this_location_look_like_it']}
${$feature['note_the_physical_description_s']}
${$feature['note_its_behavior_mode_of_locom']}
${$feature['what_do_you_think_it_might_eat']}`
}

If the $ is placed correctly, will the output display the actual answers?

Yes, it should display the actual field values for the feature you clicked on. If you also want to display the question/field name, you could take my answer or put the questions into the functions of Ken's answer like so:

function heterotrophs() {
  return `Where is it located: ${$feature['where_is_it_located_does_this_l']}
Does this location look like it: ${$feature['does_this_location_look_like_it']}
Note the physical description: ${$feature['note_the_physical_description_s']}
Note its behavior mode: ${$feature['note_its_behavior_mode_of_locom']}
What do you think it might eat: ${$feature['what_do_you_think_it_might_eat']}`
}

All comments

kenbuja

Thanks for catching my errors!

JGVadnais1

Thank you for the assistance and clarification of the dollar signs. Truly helpful!

JohannesLindner

function heterotrophs() {
  return `${$feature['where_is_it_located_does_this_l']}
${$feature['does_this_location_look_like_it']}
${$feature['note_the_physical_description_s']}
${$feature['note_its_behavior_mode_of_locom']}
${$feature['what_do_you_think_it_might_eat']}`
}

If the $ is placed correctly, will the output display the actual answers?

function heterotrophs() {
  return `Where is it located: ${$feature['where_is_it_located_does_this_l']}
Does this location look like it: ${$feature['does_this_location_look_like_it']}
Note the physical description: ${$feature['note_the_physical_description_s']}
Note its behavior mode: ${$feature['note_its_behavior_mode_of_locom']}
What do you think it might eat: ${$feature['what_do_you_think_it_might_eat']}`
}

JGVadnais1

Here's the code. I added the (), still unsure of where exactly to place $,

function  autotrophs () {
return `
{$feature[$feature.color]}
{$feature['$feature.leaf_size']}
{$feature['$feature.architecture']}
{$feature['$feature.texture']}
{$feature['$feature._number']}
{$feature['$feature.branching_pattern']}
{$feature['$feature.production']}
{$feature['$feature.do_the_leaves_smell_when_you_br']}
{$feature['$feature.do_the_leaves_produce_latex_liq']}
{$feature['$feature.do_you_see_any_evidence_of_dama']}`
}

function heterotrophs() {
  return `{$feature['$feature.where_is_it_located_does_this_l']}
{$feature['$feature.does_this_location_look_like_it']}
{$feature['$feature.note_the_physical_description_s']}
{$feature['$feature.note_its_behavior_mode_of_locom']}
{$feature['$feature.what_do_you_think_it_might_eat']}`
}

function abiotic() {
  return `{$feature['$feature.describe_the_air_temperature_wi']}
{$feature['$feature.select_the_choice_that_bests_de']}
{$feature['$feature.how_strong_is_the_wind']}
{$feature['$feature.sun_strength_cloud_cover_']}
{$feature['$feature.do_you_smell_anything']}
{$feature['$feature.what_do_you_hear_']}
{$feature['$feature.what_do_you_hear_other']}`
}

When($feature.category == 'Autotroph', autotrophs(),
     $feature.category == 'Heterotroph', heterotrophs(),
     $feature.category == 'Abiotic Conditions', abiotic(),
     'Invalid');

Here's the output.

If the $ is placed correctly, will the output display the actual answers?

I really appreciate your support. Thank you. Jenn V

JohannesLindner

Another way to do this, showing both field aliases / names and the values (edit lines 3,4,5,8):

// define the fields that should be displayed
var display_fields = {
  "Autotroph": ["Field1", "Field2", "Field3"],
  "Heterotroph": ["Field4", "Field5", "Field6", "Field7"],
  "Abiotic": ["Field8", "Field9"],
}
// get the requested fields based on your condition
var requested_fields = display_fields[$feature.Condition]


// Calling fields by variable instead of string literal can be icky,
// so we should tell Arcade that we expect all fields to be loaded
Expects($feature, "*")

// create a dictionary of {field_name: field_alias}
var fields = Schema($feature).fields
var aliases = {}
for(var f in fields) {
  aliases[fields[f].name] = fields[f].alias
}

// define an empty array that stores the output lines
var popup_lines = []

// loop over the requested field names
for(var f in requested_fields) {
  // get the name, alias, and value of the field
  var name = requested_fields [f]
  var alias = aliases[name]
  var value = $feature[name]
  // append to the lines
  Push(popup_lines, `${alias}: ${value}`)
}
// concatenate and return
return Concatenate(popup_lines, TextFormatting.NewLine)

JohannesLindner

That's a really clean solution, but you need the $ signs in front of the curly braces in the string literals, and you need the parantheses behind the function names in the When call.

JGVadnais1

Wow! Thank you so much. I'm going to start working on this straight away.

kenbuja

You could do something like this. It uses Functions in the When to create the different output for each type. Those functions also use template literals to put the answer to each question on its own line.

function autotrophs() {
  return `{$feature['autotrophQuestion1']}
{$feature['autotrophQuestion2']}`
}

function heterotrophs() {
  return `{$feature['heterotrophQuestion1']}
{$feature['heterotrophQuestion2']}
{$feature['heterotrophQuestion3']}`
}

function ambiotic() {
  return `{$feature['ambioticQuestion1']}
{$feature['ambioticQuestion2']}
{$feature['ambioticQuestion3']}
{$feature['ambioticQuestion4']}`
}

When($feature.Condition == 'Autotrophs', autotrophs,
     $feature.Condition == 'Heterotrophs', heterotrophs,
     $feature.Condition == 'Ambiotic', ambiotic,
     'Invalid');

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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