Popup template - conditional title formatting JS 4.14

2071
2
Jump to solution
12-23-2019 07:20 PM
lxd
by
New Contributor III

I'd like to change color of the popup title depending on the value in the field. There are four possible values.

Here is my code related to this popup:

// setting up popup template

let template = {
title: title(),
content: [
{
type : "fields",
fieldInfos: [
{
fieldName: "CurrentWarning",
label:"Current Warning",
},
{
fieldName: "Location",
label:"Location",
},
{
fieldName: "MediaMessage",
label:"Media Message",
},
{
fieldName: "ResponseDate",
label:"Response Date",
},
{
fieldName: "VehiclesOnScene",
label:"Vehicles on Scene",
},
{
fieldName: "VehiclesOnRoute",
label:"Vehicles on Route",
},
{
fieldName: "LastUpdate",
label:"Last Update",
}
]
}]
};

Then feature layer gets the popupTemplate setup:

var featureLayer = new FeatureLayer({
url:
"http://services1.arcgis.com/....../arcgis/rest/services/......./0",
popupTemplate: template
});
map.add(featureLayer);

And last part, definition for title() function:

function title() {
if ( {CurrentWarning} == "Emergency Warning"){
return "<font color='#FF0000'>{CurrentWarning} - {Location}"
} else if ({CurrentWarning} == "Advice"){
return "<font color='#FFFF00'>{CurrentWarning} - {Location}"
} else if ({CurrentWarning} == "Watch and Act"){
return "<font color='#ff6600'>{CurrentWarning} - {Location}"
} else {
console.log({CurrentWarning} )
return "<font color= '#008000'>{CurrentWarning} - {Location}"
 }
}

What happens is that {CurrentWarning} in the title function is not defined

I tried passing the value through the function:

......

title: title("{CurrentWarning}"),

.......

function title(warning) {

.......

}

That did not work.

And I also tried to use quotes around CurrentWarning, same outcome.

How do I get the different color for the title depending on the value of this field?

Thanks!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Lidia,

  A couple of things with your code.

let template = {
title: title(),
content: [
{

Do not include the right and left parentheses behind title as this cause immediate execution of the code.

Next the title function needs to look like this:

function title(feature) {
  if ( feature.graphic.attributes.CurrentWarning == "Emergency Warning"){
    return "<font color='#FF0000'>{CurrentWarning} - {Location}"
  } else if (feature.graphic.attributes.CurrentWarning == "Advice"){
    return "<font color='#FFFF00'>{CurrentWarning} - {Location}"
  } else if (feature.graphic.attributes.CurrentWarning == "Watch and Act"){
    return "<font color='#ff6600'>{CurrentWarning} - {Location}"
  } else {
    console.log(feature.graphic.attributes.CurrentWarning)
    return "<font color= '#008000'>{CurrentWarning} - {Location}"
  }
}

You have to use feature.graphic.attributes.xyz for immediate evaluation of an attribute versus using the curly braces for latter substitution based on the features attributes.

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Emeritus

Lidia,

  A couple of things with your code.

let template = {
title: title(),
content: [
{

Do not include the right and left parentheses behind title as this cause immediate execution of the code.

Next the title function needs to look like this:

function title(feature) {
  if ( feature.graphic.attributes.CurrentWarning == "Emergency Warning"){
    return "<font color='#FF0000'>{CurrentWarning} - {Location}"
  } else if (feature.graphic.attributes.CurrentWarning == "Advice"){
    return "<font color='#FFFF00'>{CurrentWarning} - {Location}"
  } else if (feature.graphic.attributes.CurrentWarning == "Watch and Act"){
    return "<font color='#ff6600'>{CurrentWarning} - {Location}"
  } else {
    console.log(feature.graphic.attributes.CurrentWarning)
    return "<font color= '#008000'>{CurrentWarning} - {Location}"
  }
}

You have to use feature.graphic.attributes.xyz for immediate evaluation of an attribute versus using the curly braces for latter substitution based on the features attributes.

lxd
by
New Contributor III

Hello Robert,

Thank you so much for your help. I have updated my code as per your instructions and it works now.

0 Kudos