Format PopupTemplate Title 4.x

AndrewLindley · ‎10-04-2019

I'm using the popupTemplate's title property to show a parcel number, but it automatically formats it as a parsed local number (1,234,567) instead of leaving it as the number from the field (1234567).

I want the number to be displayed without the commas, but can't figure out how to get it to stop formatting it under the hood.

Here's a sample of my code:

this.parcelTemplate = {
  title: title(),
  content: [{
    type: "fields",
    fieldInfos: [
      {
        fieldName: "OwnerName",
        label: "Owner"
      }
    ]
  }],
  expressionInfos: [
    {
      name: "parcelNumber",
      title: "Parcel Number",
      expression: `
      if ($feature.RP_ACCT_ID != 0) {
        return $feature.RP_ACCT_ID
      }
      if ($feature.PIN != 0) {
        return $feature.PIN
      }
      if ($feature.PNUM != null) {
        return $feature.PNUM
      } else {
       return $feature.PIN_STRING
      }`
    }
  ]
};

function title() {
  return "Parcel Number: {expression/parcelNumber}"
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The resulting popup shows:

I think I need to use the Acade Number() function but can't figure out how to get it working since the parcelNumber expression is already returning the number in the format I want, and the title string doesn't seem to accept Arcade expressions.

Any help is much appreciated, thanks.

KenBuja · ‎10-04-2019

Simply wrap it in the Text function

return Text($feature.PNUM)‍‍

Here's a quick example combining your code with the Intro PopupTemplate sample

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to PopupTemplate - 4.12</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require([
        "esri/Map",
        "esri/layers/FeatureLayer",
        "esri/views/MapView",
        "esri/widgets/Legend"
      ], function(Map, FeatureLayer, MapView, Legend) {
        // Create the map
        var map = new Map({
          basemap: "gray"
        });

        // Create the MapView
        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-73.95, 40.702],
          zoom: 11
        });

        view.ui.add(new Legend({ view: view }), "bottom-left");

        /*************************************************************
         * The PopupTemplate content is the text that appears inside the
         * popup. {fieldName} can be used to reference the value of an
         * attribute of the selected feature. HTML elements can be used
         * to provide structure and styles within the content. The
         * fieldInfos property is an array of objects (each object representing
         * a field) that is use to format number fields and customize field
         * aliases in the popup and legend.
         **************************************************************/

        var template = {
          // autocasts as new PopupTemplate()
          title: title(),
          content: [
            {
              // It is also possible to set the fieldInfos outside of the content
              // directly in the popupTemplate. If no fieldInfos is specifically set
              // in the content, it defaults to whatever may be set within the popupTemplate.
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "B12001_calc_pctMarriedE",
                  label: "Married %"
                },
                {
                  fieldName: "B12001_calc_numMarriedE",
                  label: "People Married",
                  format: {
                    digitSeparator: true,
                    places: 0
                  }
                },
                {
                  fieldName: "B12001_calc_numNeverE",
                  label: "People that Never Married",
                  format: {
                    digitSeparator: true,
                    places: 0
                  }
                },
                {
                  fieldName: "B12001_calc_numDivorcedE",
                  label: "People Divorced",
                  format: {
                    digitSeparator: true,
                    places: 0
                  }
                }
              ]
            }
          ],
          expressionInfos: [
            {
              name: "parcelNumber",
              title: "Parcel Number",
              expression: `
                return Text($feature.B12001_calc_numMarriedE);
              `
            }
          ]
        };

        // Reference the popupTemplate instance in the
        // popupTemplate property of FeatureLayer
        var featureLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
          popupTemplate: template
        });
        map.add(featureLayer);
        
        function title() {
          return "Parcel Number: {expression/parcelNumber}"
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

KenBuja · ‎10-04-2019

Simply wrap it in the Text function

return Text($feature.PNUM)‍‍

Here's a quick example combining your code with the Intro PopupTemplate sample

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to PopupTemplate - 4.12</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>

    <script>
      require([
        "esri/Map",
        "esri/layers/FeatureLayer",
        "esri/views/MapView",
        "esri/widgets/Legend"
      ], function(Map, FeatureLayer, MapView, Legend) {
        // Create the map
        var map = new Map({
          basemap: "gray"
        });

        // Create the MapView
        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-73.95, 40.702],
          zoom: 11
        });

        view.ui.add(new Legend({ view: view }), "bottom-left");

        /*************************************************************
         * The PopupTemplate content is the text that appears inside the
         * popup. {fieldName} can be used to reference the value of an
         * attribute of the selected feature. HTML elements can be used
         * to provide structure and styles within the content. The
         * fieldInfos property is an array of objects (each object representing
         * a field) that is use to format number fields and customize field
         * aliases in the popup and legend.
         **************************************************************/

        var template = {
          // autocasts as new PopupTemplate()
          title: title(),
          content: [
            {
              // It is also possible to set the fieldInfos outside of the content
              // directly in the popupTemplate. If no fieldInfos is specifically set
              // in the content, it defaults to whatever may be set within the popupTemplate.
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "B12001_calc_pctMarriedE",
                  label: "Married %"
                },
                {
                  fieldName: "B12001_calc_numMarriedE",
                  label: "People Married",
                  format: {
                    digitSeparator: true,
                    places: 0
                  }
                },
                {
                  fieldName: "B12001_calc_numNeverE",
                  label: "People that Never Married",
                  format: {
                    digitSeparator: true,
                    places: 0
                  }
                },
                {
                  fieldName: "B12001_calc_numDivorcedE",
                  label: "People Divorced",
                  format: {
                    digitSeparator: true,
                    places: 0
                  }
                }
              ]
            }
          ],
          expressionInfos: [
            {
              name: "parcelNumber",
              title: "Parcel Number",
              expression: `
                return Text($feature.B12001_calc_numMarriedE);
              `
            }
          ]
        };

        // Reference the popupTemplate instance in the
        // popupTemplate property of FeatureLayer
        var featureLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
          popupTemplate: template
        });
        map.add(featureLayer);
        
        function title() {
          return "Parcel Number: {expression/parcelNumber}"
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍