topic Re: Popup template - conditional title formatting JS 4.14 in ArcGIS JavaScript Maps SDK Questions

Popup template - conditional title formatting JS 4.14

lxd — Tue, 24 Dec 2019 03:20:45 GMT

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!

Re: Popup template - conditional title formatting JS 4.14

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:15:22 GMT

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.

Re: Popup template - conditional title formatting JS 4.14

lxd — Thu, 02 Jan 2020 05:18:18 GMT

Hello Robert,

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