Format Popup Content - integer to string

[JúlioCaineta]

I am trying to format the Popup content in a way that, reading the documentation, I am not sure if it is possible or not.

I am consuming a layer through a REST service (published with ArcGIS Server). One of the available fields is

• safe ( type: esriFieldTypeSmallInteger , alias: safe )

This field only has the values 0 and 1. In the Popup, I want to display these values as "No" and "Yes", respectively.

In the documentation, it says (emphasis mine):

The date or number formatting object. Fields of type date and number can be formatted by specifying a formatting function. The format will apply anywhere the field is used in the popup (title, description, media, etc).

What is exactly this formatting function? How should it be defined?

There is no available examples with this formatting function -- specifically for fields of type number.

I have tried the following, with no success:

{

    fieldName: 'safe',

    visible: true,

    format: function(x) {

        switch(x) {

            case 0:

                return "No"

            case 1:

                return "Yes"

        }

    }

I appreciate any suggestions.

[RobertScheitlin__GISP]

Júlio,

  You should nook at this reference:

Format info window content | Guide | ArcGIS API for JavaScript

Here is a sample from the above link that shows a formatting function:

var infoTemplate = new InfoTemplate();

infoTemplate.setTitle("Population in ${NAME}");

infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" +

  "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +

  "<b>2000: </b>${POP2000:NumberFormat}<br/>" +

  "<b>2000 density: </b>${POP00_SQMI:NumberFormat}");

compare = function (value, key, data) {

  var result = "", diff, pctChange;

  switch (key) {

    case "POP2007":

      result = value > data.POP2000 ? "images/up.png" : "images/down.png";

      diff = data.POP2007 - data.POP2000;

      pctChange = (diff * 100) / data.POP2000;

      break;

    case "POP07_SQMI":

      result = value > data.POP00_SQMI ? "images/up.png" : "images/down.png";

      diff = data.POP07_SQMI - data.POP00_SQMI;

      pctChange = (diff * 100) / data.POP00_SQMI;

      break;

  }

  return number.format(value) +

    "   <img src='" + result + "'>" +

    "  <span style='color: " +

    (pctChange < 0 ? "red" : "green") + ";'>"

     + number.format(pctChange, { places: 3 }) +

    "%</span>";

};

[KellyHutchins]

Look at the compare or compare2 function in this sample for an example showing how to format a field for display.

Format info window content | ArcGIS API for JavaScript

In the code you'll see that the info template is defined as follows:

infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" +
                                  "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
                                  "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
                                  "<b>2000 density: </b>${POP00_SQMI:NumberFormat}");

Note that we have a field called POP07_SQMI and we want to use a function called compare to modify the value that will be displayed in the popup.  The compare function takes in the field value evaluates it against some logic and then returns the value to display.

        compare = function (value, key, data) {
            var result = "", diff, pctChange;

            switch (key) {
              case "POP2007":
                result = value > data.POP2000 ? "images/up.png" : "images/down.png";
                diff = data.POP2007 - data.POP2000;
                pctChange = (diff * 100) / data.POP2000;
                break;

              case "POP07_SQMI":
                result = value > data.POP00_SQMI ? "images/up.png" : "images/down.png";
                diff = data.POP07_SQMI - data.POP00_SQMI;
                pctChange = (diff * 100) / data.POP00_SQMI;
                break;
            }

            return number.format(value) +
                   "   <img src='" + result + "'/>" +
                   "  <span style='color: " +
                   (pctChange < 0 ? "red" : "green") + ";'>"
                     + number.format(pctChange, { places: 3 }) +
                   "%</span>";
          };

[JúlioCaineta]

Dear Kelly and Robert,

Thank you very much for your prompt replies.

I had seen that example, but I am not sure that "formatting function" is in the same exact context as in my case.

I am using the PopupTemplate and I am trying to set it up through a template, and not with the setContent and setTitle methods. This template is defined by an object like so

// config object definition:
    {<layer id>:{
        <sub layer number>:{
            title: "title",

            fieldInfos:  [{
                    fieldName: 'designacao',
                    label: 'Designação',
                    visible: true
                }, {

                   // another field

                }]

            }
        }
    }

Now my question is about the "formatting function" referred in the fieldInfo structure documentation (cited in my first message). In the example that you both provide, the formatting function is not used in this context, but with the InfoTemplate.setContent method. I tried changing the function signature to accept three arguments, but still, it is not called.

[RobertScheitlin__GISP · Accepted solution]

Júlio,

  I think the issue here is the use of the word function in the doc you are referring to.

The date or number formatting object. Fields of type date and number can be formatted by specifying a formatting function. The format will apply anywhere the field is used in the popup (title, description, media, etc).

The documentation goes on to explain what this formatting function looks like for numeric and date fields.

Example:

format: { places: 0, digitSeparator: true }

In the popup template fieldinfo object you came only have something like this:

{

    fieldName: 'safe',

    visible: true,

    format:  {places: 0, digitSeparator: false}

}

If you need an actual function to manipulate the info windows display of a fields value the you have to go the route that Kelly and I outlined and use the setContent function of the infoWindow.

[JúlioCaineta]

Thank you Robert. You are right, "formatting function" is a somewhat misleading term. Perhaps that part of the documentation should be reworded. I will follow your advice, thank you.