REST Field names Syntax having problems with InfoTemplate

717
4
01-23-2013 05:14 AM
KristenJones1
New Contributor III
I am new at using the Javascript API and not an upper class Javascript guy (Still learning) so I am using the examples and plugging in my specific values.

What I am ultimately trying to do is create some logic pulling data from our ArcGIS server and displaying a popup with a custom link.

My first step was to get a popup window working of which I used the provided ESRI example templates.

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_extendinfowindow/index.html

I am able to get it to run without any problems. So I use our REST service located here
http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesJOINToSQL/MapServer/2

This is where my problem starts. The map service uses some internal SQL queries and for all of our other uses for this service, there is no problems, works great.  However you will notice that the Field names include a % sign. I don't know where this is added, but it is no where in the service outside of the REST services here. Permits.MASTERUSER.%PERMIT.ISSUEDTO

Now it is not entirely a problem because in the example when creating the Infotemplate I can set the setTitle to ${Permits.MASTERUSER.%PERMIT.LOCATION} and it works fine.  In the getTextContent(graphic) function however I can not get a variable assigned from the REST fields.

for example the original code line to start working with a variable is:

var attr = graphic.attributes.qSpecies.replace('"',""); 

I can see from thier REST service http://servicesbeta.esri.com/ArcGIS/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0

that qSpecies is the Field and works.  My field is  Permits.MASTERUSER.%PERMIT.LOCATION and no matter how I try to encapsulate it, it fails or errors.

UPDATE.. I also tried the field Properties.DBO.Permits.MCDNUM and still the the same issues


Here is my code. I hope anyone here can help me.

<!DOCTYPE html>
<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>Street Trees</title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <link rel="stylesheet" href="myModules/InfoWindow.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } 
      .esriScalebar{padding: 20px 20px; }
      #map{ padding:0; }      
    </style>

    <script>var dojoConfig = {
        parseOnLoad:true,
        packages: [{
          "name": "myModules",
          "location": location.pathname.replace(/\/[^/]+$/, "") + "/myModules"
        }]
      };
    </script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      // Import my info window module.
      dojo.require("myModules.InfoWindow");
      
      var map;

      function init() {
        var infoWindow = new myModules.InfoWindow({
          domNode: dojo.create("div", null, dojo.byId("map"))
        });
      
        map = new esri.Map("map", {
          basemap: "topo",
         // center: [-122.416, 37.781],
          center: [-84.183, 39.734],
          zoom: 13,
          infoWindow:infoWindow
        });

        var template = new esri.InfoTemplate();
        template.setTitle("<b>${Permits.MASTERUSER.%PERMIT.ISSUEDTO}</b> ${OBJECTID}");
        

       //Tried just using a variable but the replace function is looking at the literal string and not pulling the values from the REST
        var theLocation = "";
        theLocation = ("<b>LOCATION: </b>${Permits.MASTERUSER.%PERMIT.LOCATION}<br>");
        theLocation = theLocation.replace("'","");
        theLocation = theLocation.replace("&","And");
        
         template.setContent(getTextContent);
        // tested not working template.setContent(theLocation);
        
        
        var featureLayer = new esri.layers.FeatureLayer("http://map.miamiconservancy.org:6080/arcgis/rest/services/MCDPropertiesJOINToSQL/MapServer/2", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["*"]
        });
        map.addLayer(featureLayer);

      
        map.infoWindow.resize(200, 75);
      }

      function getTextContent(graphic) {
              
             
         // ORIGINAL EXAMPLE CODE var attr = graphic.attributes.qSpecies.replace('"',"");
        //var attr = Name ;
        //var names=attr.split("::");
        //var commName = dojo.string.trim(names[1].replace('"',""));
        //var hlink = names[0].split(" ");
        //var sciName = hlink[0] + "_" + hlink[1];
        
        // TRYING TO GET VARIABLES
        // No error on load on click Error: Cannot call method 'replace' of undefined  var attr = graphic.attributes.LOCATION.replace('"',"");
        // Since line 55 defines the entire REST field name and works I try the following
        // DOES NOT WORK  var attr = graphic.attributes.Permits.MASTERUSER.%PERMIT.LOCATION.replace('"',"");
        // DOES NOT WORK  var attr = {graphic.attributes.Permits.MASTERUSER.%PERMIT.LOCATION.replace('"',"")};
        // DOES NOT WORK  var attr = graphic.attributes.{Permits.MASTERUSER.%PERMIT.LOCATION}.replace('"',"")};
        // DOES NOT WORK  var attr = Permits.MASTERUSER.%PERMIT.LOCATION;
        // DOES NOT WORK  var attr = {Permits.MASTERUSER.%PERMIT.LOCATION};        
        // DOES NOT WORK  var attr = ${Permits.MASTERUSER.%PERMIT.LOCATION};


        
        var commName = "TEST";
        var sciName =  "XXXXX";
        if(commName == ""){
         // commName = names[0];
         
        }
        return "<b>" + commName + "</b><br /><a target='_blank' href=http://en.wikipedia.org/wiki/" + sciName  +">Wikipedia Entry</a>";
      }
      dojo.ready(init);
    </script>
  </head>
  
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:true"
         style="width: 100%; height: 100%; margin: 0;">

      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'" 
           style="overflow:hidden;">
      </div>
    </div>
  </body>
</html>
0 Kudos
4 Replies
RuiShen
New Contributor III
Whenever special characters are in the field name, you can use below syntax to get attributes:
      var attr = graphic.attributes["Permits.MASTERUSER.%PERMIT.LOCATION"].replace('"',"");
0 Kudos
KristenJones1
New Contributor III
Thanks for the help, that was the problem!
0 Kudos
SteveCole
Frequent Contributor
I'm just wondering out loud here but would "graphic.attributes" also work (where x=column number of desired attribute field)?
0 Kudos
KristenJones1
New Contributor III
probably, because it is an array, but I like to see the field name, much easier to follow& Identify in the code 😉
0 Kudos