Hide values in infoWindow

1494
13
09-18-2013 09:11 AM
Chang-HengYang
New Contributor III
Hi all,

I have the same problem as the post (Hide values in infoWindow / Popup if value = null). I have my popup working fine for my features. When you click, it queries the featurelayer and gets the 7 attributes "name", "lat", "Map_id", "long", "Topo_URL", "Web_URL", "mrc". Not every feature has a value for "Topo_URL" and " Web_URL" and I want to "hide" it in the infowindow if it's null. I tried to modify the script I mentioned (the post). However, it failed to work. Please let me know if you all have any suggestion.

Thanks,
Hank

<!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" />
    <title>QueryTask with geometry, results as an InfoWindow onClick</title>
     <link rel="stylesheet"  href="http://granite.nmt.edu/~hyang/Grid.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.6/js/dojo/dojox/layout/resources/ExpandoPane.css">
 
  <script>var dojoConfig = { parseOnLoad:true };</script>
 
   <script src="http://js.arcgis.com/3.6/"></script>
 
 
    <script type="text/javascript" language="Javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.query");
   dojo.require("esri.dijit.Popup");
       var map;

      function init() {
         var popup = new esri.dijit.Popup(null, dojo.create("div"));
         map = new esri.Map("map", {
          basemap: "oceans",
          center: [-106.9048, 34.0665],
    infoWindow: popup,
          zoom: 7
    });

    
        dojo.connect(map, "onLoad", initFunctionality);

        //create and add new layer
       //var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer");
        //map.addLayer(layer);
      }

      function initFunctionality(map) {
        //build query task
        function executeQueryTask(evt) {
         query.geometry = evt.mapPolygon;   
   queryTask.execute(query, showResults);
      }
  
  function showResults(featureSet) {
     
     map.graphics.clear();

     
     dojo.forEach(featureSet.features, dojo.hitch (this, function(f) {
      
       var graphic = f;
       //var infoTemplate = new esri.InfoTemplate();
       graphic.setSymbol(symbol);
      var content = "";
      if(dojo.trim(f.attributes["Topo_URL"])!=null&&dojo.trim(f.attributes["Web_URL"])!=null){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>"
                       + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"])== null&&dojo.trim(f.attributes["Web_URL"])!=null){
         content+="<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"])!=null&&dojo.trim(f.attributes["Web_URL"])== null){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>";
      }
      infoTemplate = new esri.InfoTemplate("<b>ID: </b>${Map_id}<br/>"
                             + "<b>Name: </b>${name}<br/>"
                             + "<b>Coordinates: </b>(${lat}, ${long})<br/>"
                             + "<b>mrc: </b>: ${mrc}<br/>"
        + "<b>Product: </b> ${name} 7.5' topo map <br/>",content);
      
       //Set the infoTemplate.
       graphic.setInfoTemplate(infoTemplate);

       //Add graphic to the map graphics layer.
       map.graphics.add(graphic);
     }));
      
      
      }
             
                dojo.connect(map, "onClick", executeQueryTask);
         
     //build query task
        var queryTask = new esri.tasks.QueryTask("http://129.138.12.83:6080/arcgis/rest/services/index_24k_web_w_urls/MapServer/0");
        //build query filter
   dojo.connect(queryTask, "onComplete", showResults);
      var query = new esri.tasks.Query();
         query.returnGeometry = true;
      query.outFields = ["name", "lat", "Map_id", "long", "Topo_URL", "Web_URL", "mrc"];
      
   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]));
          
        
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Single click a county in New Mexico to get more information.
    <div id="map" style="width:1200px; height:800px; border:1px solid #000;"></div>
  </body>
</html>
0 Kudos
13 Replies
BetsySchenck-Gardner
Occasional Contributor
My thought is you aren't coming back with a null value for those two attributes. What if instead you looked at the length of the text string coming back ... assuming the URL is a text string. If it's 0, there is no value and you can go from there.
0 Kudos
Chang-HengYang
New Contributor III
Hi Betsy,

Thank you for the information. It still failed to work after I have the "length" following the (dojo.trim(f.attributes["Topo_URL"]). Please let me know if you all have any suggestion. I also attached a picture to show these two fields values.

Thanks,
Hank

The part code listed below
dojo.forEach(featureSet.features, dojo.hitch (this, function(f) {
      
       var graphic = f;
       //var infoTemplate = new esri.InfoTemplate();
       graphic.setSymbol(symbol);
      var content = "";
      if(dojo.trim(f.attributes["Topo_URL"]).length > 4&&dojo.trim(f.attributes["Web_URL"]).length > 4){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>"
                       + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"]).length <= 4 && dojo.trim(f.attributes["Web_URL"]).length > 4){
         content+="<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      if(dojo.trim(f.attributes["Topo_URL"]).length >4&&dojo.trim(f.attributes["Web_URL"]).length <= 4){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>";
      }
      infoTemplate = new esri.InfoTemplate("<b>ID: </b>${Map_id}<br/>"
                             + "<b>Name: </b>${name}<br/>"
                             + "<b>Coordinates: </b>(${lat}, ${long})<br/>"
                             + "<b>mrc: </b>: ${mrc}<br/>"
        + "<b>Product: </b> ${name} 7.5' topo map <br/>",content);
      
0 Kudos
YungKaiChin
Occasional Contributor
Try to use both null and "undefined" and see if that works.
0 Kudos
Chang-HengYang
New Contributor III
Hi YungKai,

Thank you for the information. Unfortunately, it still failed to work.

Thanks,
Hank
0 Kudos
YungKaiChin
Occasional Contributor
What did you see in the infoWindow if a field was null?
0 Kudos
VinayBansal
Occasional Contributor II
Try with these checks. And if still not work then tell us what you are actually getting in the output
      if((f.attributes["Topo_URL"] !=null && f.attributes["Topo_URL"] !=undefined &&  f.attributes["Topo_URL"]  !="") && (f.attributes["Web_URL"] !=null && f.attributes["Web_URL"] !=undefined && f.attributes["Web_URL"]  !="")){
         content+="<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>"
                       + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
      }
      
0 Kudos
JasonZou
Occasional Contributor III
Try to change:
var content = "";
if (dojo.trim(f.attributes["Topo_URL"]) != null && dojo.trim(f.attributes["Web_URL"]) != null) {
    content += "<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>" + "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
}
if (dojo.trim(f.attributes["Topo_URL"]) == null && dojo.trim(f.attributes["Web_URL"]) != null) {
    content += "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>";
}
if (dojo.trim(f.attributes["Topo_URL"]) != null && dojo.trim(f.attributes["Web_URL"]) == null) {
    content += "<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>";
}


To:
var content = "";
var hasTopoUrl = f.attributes["Topo_URL"] && dojo.trim(f.attributes["Topo_URL"]);
var hasWebUrl = f.attributes["Web_URL"] && dojo.trim(f.attributes["Web_URL"]);
content += hasTopoUrl ? "<a target='_blank' href='${Topo_URL}'>Topo Map Information</a><br/>" : "";
content += hasWebUrl ? "<a target='_blank' href='${Web_URL}'>Geologic Map Information</a>" : "";
0 Kudos
KenBurcham
Occasional Contributor
Hi guys,

  What I do is define a function "is_empty" that helps in these situations:

function is_empty(obj) {

    // null and undefined are empty
    if (obj == null) return true;
    // Assume if it has a length property with a non-zero value
    // that that property is correct.
    if (obj.length && obj.length > 0) return false;
    if (obj.length === 0) return true;

    //if an object, does it have any values in any of its properties?
    for (var key in obj) {
        if (hasOwnProperty.call(obj, key)) return false;
    }

    // Doesn't handle toString and toValue enumeration bugs in IE < 9

    return true;
}


Then you can:

if(!is_empty(f.attributes["Topo_URL"]) && !is_empty(f.attributes["Web_URL"]))


It doesn't add in dojo.trim, but that's easy enough to add if you want.
0 Kudos
JasonZou
Occasional Contributor III
Actually, all these values are considered falsy in javascript: null, undefined, false, "", 0. So instead of using if statement to evaluate for each case, just use the value itself should suffice to evaluate it's true value or falsy value. We do need to consider the case where " " is true, but "" is falsy. So using dojo.trim would be needed in some cases.

Here is a blog to explain that.
0 Kudos