topic Re: Custom format popup - attribute is integer, want to display string in ArcGIS JavaScript Maps SDK Questions

Custom format popup - attribute is integer, want to display string

MKF62 — Fri, 10 Dec 2021 22:49:43 GMT

I have a field called "OfficialQH" that holds either a 0 or a 1. I want to display those values as "No", or "Yes", respectively. I'm a javascript novice and I have a feeling I'm missing something silly, but this is what I've got. I have been following along with these examples:

PopupTemplate - use functions to set content | ArcGIS API for JavaScript 4.6

Format info window content | ArcGIS API for JavaScript 3.23

I'm not sure I'm using "value" in my switch statement correctly. I understand that the key is the field name, the value is what is associated with the key in that record, and the data allows you to access other attributes of that record (I think?). So when {OfficialQH:status} gets hit because a feature was clicked, I expect it to call the status function, pass in key = OfficialQH, value = 1 (or 0 depending on the feature clicked), data = other available attributes of record. Then in the switch statement, it reads the value and assigns the result variable a "Yes" or "No" string, then returns the result to hopefully display in the popup. Is my logic flawed? Am I missing a pesky parentheses or bracket? Is there another way I should be using value/key/data?

        var popup = {
          title: "{StateID}, Point {Point}, Patch {PatchNum}",
          content: "<ul><li>Canopy Deciduous: {CnpyDecid}%</li>" +
                  "<li>Canopy Coniferous: {CnpyConif}%</li>" +
                  "<li>Bare Ground: {BareGround}%</li>" +
                  "<li>Habitat Status: {OfficialQH:status}</li></ul>"
        };
        var featureLayer = new FeatureLayer({
          url: "https://xxx/MapServer/0",
          outFields: ["*"],
          popupTemplate: popup
        });

        map.add(featureLayer);
        featureLayer.refreshInterval = 3;
        
        status = function (value, key, data) {
            var result = "";

            switch (value) {
              case 1:
                result = "Yes";
                break;

              case 0:
                result = "No";
                break;
            };

            return result;
          };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Custom format popup - attribute is integer, want to display string

MunachisoOgbuchiekwe — Mon, 05 Mar 2018 22:11:22 GMT

Hello Molly,

Assuming I understand your problem correctly, I think you would want to use "key" as the switch expression since you want to check if the "key" is equal to 1. Also, it is kind of hard to see how you are getting the data from the feature service with the code provided. In order to get data from your Feature Service, you would need to do a query of some kind and I am not sure if you are doing that.

What you would want to do is the following:

When a feature is clicked, do a query against the feature layer.
Grab the OfficialQH field from the query response and use that for the switch expression.
Then check if that field has a 0 or 1 and populate the value result.

Re: Custom format popup - attribute is integer, want to display string

MKF62 — Tue, 06 Mar 2018 14:56:23 GMT

Hi Munachiso, could you please look at this example (I have copied it directly from the first link in my original post if you want to see it formatted for easier reading)? This is the entire script and I do not see anywhere that they are performing a query. They are simply calling the function in the popupTemplate using the attribute field of interest and somehow the value, key, and data parameters are magically gotten.

var populationChange;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/Layer",
"dojo/dom",
"dojo/number",
"dojo/on",
"dojo/domReady!"
],
function(
Map, MapView, Layer,
dom, number, on
) {
var map = new Map({
basemap: "dark-gray"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [-87, 34]
});
Layer.fromPortalItem({
portalItem: { // autocasts as new PortalItem()
id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
}
})
.then(function(layer) {
// add the layer to the map
map.add(layer);
// create a new popupTemplate for the layer
// format the numeric field values using out of the box
// NumberFormat function. Call populationChange() custom
// function to calculate percent change for the county.
var popupTemplate = { // autocasts as new PopupTemplate()
title: "Population in {NAME}",
content: "As of 2010, the population in this area was {POP2010:NumberFormat} " +
"and the density was {POP10_SQMI:NumberFormat} sq mi. " +
"As of 2013, the population here was {POP2013:NumberFormat} " +
"and the density was {POP13_SQMI:NumberFormat} sq mi. " +
"Percent change is {POP2013:populationChange}"
};
layer.popupTemplate = popupTemplate;
populationChange = function(value, key, data) {
// calculate the population percent change from 2010 to 2013.
var diff = data.POP2013 - data.POP2010;
var pctChange = (diff * 100) / data.POP2010;
var result = diff > 0 ? "up.png" : "down.png";
// add green arrow if the percent change is positive.
// red arrow for negatice percent change.
return "<img src='" + result + "'/>" +
"" +
number.format(pctChange, {
places: 3
}) +
"%";
}
});
});

Re: Custom format popup - attribute is integer, want to display string

MKF62 — Fri, 10 Dec 2021 22:49:46 GMT

I figured it out and it has nothing to do with the function. It is because I was using "status" as my variable name. The word "status" must be some sort of reserved word because when I changed the variable name to something else ("myStatus" for instance), it started working.

Full script:

    var map, myStatus;
    
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "dojo/domReady!"
      ],
      function(
        Map, MapView,
        FeatureLayer
      ) {

        map = new Map({
          basemap: "dark-gray"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-77.069, 36.950],
          zoom: 14
        });

        /********************
         * Add feature layer
         ********************/

        // Carbon storage of trees in Warren Wilson College.
        var popup = {
          title: "{StateID}, Point {Point}, Patch {PatchNum}",
          content: "<ul><li>Canopy Deciduous: {CnpyDecid}%</li>" +
                  "<li>Canopy Coniferous: {CnpyConif}%</li>" +
                  "<li>Bare Ground: {BareGround}%</li>" +
                  "<li>Habitat Status: {OfficialQH:myStatus}</li></ul>"
        };
        var featureLayer = new FeatureLayer({
          url: "https://xxx/MapServer/0",
          outFields: ["*"],
          popupTemplate: popup
        });

        map.add(featureLayer);
        featureLayer.refreshInterval = 3;
        
        myStatus = function(value, key, data) {
            var result = "";

            switch (value) {
              case 1:
                result = "Yes";
                break;

              case 0:
                result = "No";
                break;
                    
                 default:
                   result = "Maybe";
                    break;
            };

            return result;
          };
      });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍