topic Re: Popup Format Question in ArcGIS JavaScript Maps SDK Questions

Popup Format Question

AaronDrake — Tue, 09 Aug 2011 17:45:37 GMT

I am trying to get rid of the comma separator in a field. I am using the following which does not seem to work. I have tried multiple ways to get this to work, but to no avail.

{fieldName: "UID", isEditable:false, tooltip: "Unique ID Field", label:"UID:", format:{places: 0,digitSeparator: false}}

Thanks...

Re: Popup Format Question

KellyHutchins — Sun, 12 Dec 2021 06:51:50 GMT

Aaron,

Here's an example showing how to use the format option with the Popup Template:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>  

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />

    <!--The viewport meta tag is used to improve the presentation and behavior of the

    samples on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

    <title>

     Number Format Test

    </title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/dojo/dijit/themes/claro/claro.css"/>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css"/>

    <style>

      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{

      padding: 20px 20px; } #map{ padding:0;}

    </style>

    <script type="text/javascript">

      var dojoConfig = {

        parseOnLoad: true

      };

    </script>

    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4">

    </script>

    <script type="text/javascript">

      dojo.require("dijit.layout.BorderContainer");

      dojo.require("dijit.layout.ContentPane");

      dojo.require("esri.map");

      dojo.require("esri.layers.FeatureLayer");

      dojo.require("esri.dijit.Popup");





      var map;

      var resizeTimer;





      function init() {

        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");



        //setup the map's initial extent (World View)

         var startExtent = new esri.geometry.Extent({"xmin":-10157363,"ymin":5563431,"xmax":-9166739,"ymax":6042844,"spatialReference":{"wkid":102100}});


         

        //define custom popup options

        var popupOptions = {

          'markerSymbol': new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25])),

          'marginLeft': '20', 

          'marginTop': '20'

        };

        //create a popup to replace the map's info window

        var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

        

        map = new esri.Map("map", {

          extent: startExtent,

          infoWindow: popup

        });

        dojo.place(popup.domNode, map.root);



        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");

        map.addLayer(basemap);

        

        

        //define a popup template

        var popupTemplate = new esri.dijit.PopupTemplate({

          title: "{NAME}",

          fieldInfos: [

          {fieldName: "POP2000", visible: true, label:"Population 2000",format:{places:0,digitSeparator:true}},

          {fieldName: "POP2007", visible:true, label:"Population 2007" ,format:{places:0,digitSeparator:false}}

          ],

          showAttachments:false

        });

  

        //create a feature layer based on the feature collection

        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {

          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,

          infoTemplate: popupTemplate,

          outFields: ['*']

        });


        featureLayer.setDefinitionExpression("STATE_NAME = 'Michigan'");
        //apply a renderer

        var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([109,146,155,0.35]));

        featureLayer.setRenderer(new esri.renderer.SimpleRenderer(symbol));

      
       

       dojo.connect(featureLayer,"onClick",function(evt){

           map.infoWindow.setFeatures([evt.graphic]);

        });

        

        

        map.addLayer(featureLayer);

        

        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 

        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm

        dojo.connect(map, 'onLoad', function(theMap) {

          dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized

            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(function() {

              map.resize();

              map.reposition();

            }, 500);

          });

        });

      }



      dojo.ready(init);

    </script>

  </head>

  <body class="claro">

    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"

    style="width: 100%; height: 100%; margin: 0;">

      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"

      style="border:1px solid #000;padding:0;">

      </div>

    </div>

  </body>



</html>

Re: Popup Format Question

AaronDrake — Wed, 10 Aug 2011 15:40:59 GMT

I tried using the example. This is the code:

{fieldName: "UID", visible: true, label:"UID",format:{places:0,digitSeparator:false}}

I still get the same results...

Re: Popup Format Question

KellyHutchins — Wed, 10 Aug 2011 15:44:14 GMT

Is the service publicly available? If so can you post the link?
If the service isn't available can you post the field information (view the services directory). For example:

Fields:
OBJECTID_1 (Type: esriFieldTypeOID, Alias: OBJECTID_1)
Shape (Type: esriFieldTypeGeometry, Alias: Shape)
OBJECTID (Type: esriFieldTypeDouble, Alias: OBJECTID)
NAME (Type: esriFieldTypeString, Alias: NAME, Length: 80 )
CODE (Type: esriFieldTypeDouble, Alias: CODE)
NUM (Type: esriFieldTypeString, Alias: NUM, Length: 6 )
AGE (Type: esriFieldTypeString, Alias: AGE, Length: 12 )
ACODE (Type: esriFieldTypeDouble, Alias: ACODE)
SLIPRATE (Type: esriFieldTypeString, Alias: SLIPRATE, Length: 7 )
SLIPCODE (Type: esriFieldTypeDouble, Alias: SLIPCODE)
SLIPSENSE (Type: esriFieldTypeString, Alias: SLIPSENSE, Length: 5 )
DIPDIRECTI (Type: esriFieldTypeString, Alias: DIPDIRECTI, Length: 15 )
SLIPDIRECT (Type: esriFieldTypeString, Alias: SLIPDIRECT, Length: 5 )
FCODE (Type: esriFieldTypeDouble, Alias: FCODE)
FTYPE (Type: esriFieldTypeString, Alias: FTYPE, Length: 25 )
MAPPEDSCAL (Type: esriFieldTypeString, Alias: MAPPEDSCAL, Length: 8 )
CFM_URL (Type: esriFieldTypeString, Alias: CFM_URL, Length: 254 )
Shape_Length (Type: esriFieldTypeDouble, Alias: Shape_Length)

Re: Popup Format Question

AaronDrake — Wed, 10 Aug 2011 15:47:33 GMT

Hi Kelly,

Thanks for the quick response...The service isn't public, but here is the information you asked for:

UID (Type: esriFieldTypeInteger, Alias: Unique ID, Editable: True)

Thank you...

Re: Popup Format Question

KellyHutchins — Wed, 10 Aug 2011 16:00:42 GMT

I took a look at the image you attached to the last post - and it looks like you are editing? Is this the case? If so then its the attribute inspector that is displaying the fields in a popup. The attribute inspector doesn't have the same formatting options. View the fieldInfos section for details on how the fields can be customized in the attribute inspector.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jsapi/attributeinspector.htm

Re: Popup Format Question

AaronDrake — Wed, 10 Aug 2011 16:02:29 GMT

Yes, I am working on a web editing application. I take a look at the link you posted.

Thank you,
Aaron

Re: Popup Format Question

JoyC — Wed, 11 Jan 2012 16:58:46 GMT

I'm trying to do the same thing as Aaron was. I looked at the AttributeInspector class.
Under fieldInfos, exactly which property should be used to remove the comma separator for numerical field?
Or am i looking at the wrong property?

Thanks,
Joy

Re: Popup Format Question - format dijit.Form.NumberTextBox

DianaBenedict — Wed, 31 Oct 2012 18:40:19 GMT

I was encountering the same issue and I was hoping that there was going to be a property within the fieldinfos params to set the format. Eventhough the fieldInfo properties from within the Popup Template allow for setting format properties, the AttributeInspector object does not expose this functionality. The LEAST painless way I was able to do this is described below:

var props = {
    name: "numberTextBox",
    class: "atiField",
    constraints: { pattern: "#" }
};
var numberTextBoxGazID = new dijit.form.NumberTextBox(props);
//...other code to generate the fieldInfo object
//... set the customField Property to the field of interest as stated below
fieldInfos.push({ 'fieldName': 'GAZ_ID', 'isEditable': true, 'label': 'GAZ ID', 'customField': numberTextBoxGazID });

So essentially I created a custom dijit that has the number pattern of interest and set the customField param for the field of interest. You MUST make sure to set the class to new dijit = "atiField" so that it can inherit the CSS that has been established within the AttributeInspector framework and the CSS that you have established in your application.

For Example:
.esriAttributeInspector .atiField {font-size:7pt;}

So far it seems to work, but I have not done any final testing. Hope this helps others who have encountered this problem. There doesn't seem to be much documentation out there for this issue.