nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Hide values in infoWindow / Popup if value = null

BryanKaraffa

Hi all,

I have my popup working fine for my features. When you click, it queries the featurelayer and gets the 3 attributes B_Name, B_Number, Departments. Not every feature has a value for "Departments" and I want to "hide" it in the infowindow if it's null.

Example:

With value Departments not null B_Name = "Ellison" B_Number = "563" Departments = "Geography"  Infowindow should show (result): Building Name: Ellison Building #: 563 Department: Geography    With NO VALUE SET in "Department" attribute B_Name = "Phelps" B_Number = "492" Departments = ""   Infowindow should show (result): Building Name: Ellison Building #: 563

Not sure how to go about this.... hope y'all can help!

Find more posts tagged with

Accepted answers

JeffPace1

It's my understanding that ${B_Number} is not a recognized variable... how do I grab ${B_Name} and set it to a javascript variable after the query?

SOrry, was trying to rush. Here is the real code. I:

1. moved the infoTemplate into the for loop (changed to a dojo forEach)
2. Created a blank content variable
3. Queried on the field from the featureset (trimmed it first in case it was empty, not null)
4. Appended the Field value onto the content variable only if it existed
5. set the infotemplate to the Title and content variable.

<!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" />     <!--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>UCSB Interactive Campus Map</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">  <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css'/&gt;     <style type="text/css">       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>     <script type="text/javascript">       var djConfig = {         parseOnLoad: true       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>     <script type="text/javascript">       dojo.require("dijit.dijit");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.dijit.Popup");         var map;        function init() {         initExtent = new esri.geometry.Extent({    "xmin":-119.86100,    "ymin":34.40856,    "xmax":-119.83553,    "ymax":34.41913,    "spatialReference":{"wkid":4326}   });   var popup = new esri.dijit.Popup(null, dojo.create("div"));         map = new esri.Map("map", {     infoWindow: popup         });         //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://ags2.geog.ucsb.edu/ArcGIS/rest/services/icmBaseMap20120411/MapServer");         map.addLayer(basemap);      //Add Building Layer   var layerCampusBuildings = new esri.layers.ArcGISDynamicMapServiceLayer("http://ags2.geog.ucsb.edu/ArcGIS/rest/services/Buildings_120404/MapServer");   map.addLayer(layerCampusBuildings);        //***********************************     //START Buildings Popup/Highlight Code     function executeQueryTask(evt) {      //onClick event returns the evt point where the user clicked on the map.      //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).      //set query geometry = to evt.mapPoint Geometry      query.geometry = evt.mapPoint;       //Execute task and call showResults on completion      queryTask.execute(query, showResults);       }     function showResults(featureSet) {      //remove all graphics on the maps graphics layer      map.graphics.clear();       //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.      dojo.forEach(featureSet.features, dojo.hitch (this, function(f) {        //Get the current feature from the featureSet.        //Feature is a graphic        var graphic = f;        graphic.setSymbol(symbol);       var content = "";       if(dojo.trim(f.attributes["B_Number"])!=""&&dojo.trim(f.attributes["B_Number"])!=null){          content+="<b>Bldg:</b>"+ f.attributes["B_Number"]+"<br />";       }       if(dojo.trim(f.attributes["Department"])!=""&&dojo.trim(f.attributes["Department"])!=null){          content+="<b>Department:</b>"+ f.attributes["Department"];       }       infoTemplate = new esri.InfoTemplate(f.attributes["B_Name"]+"<br />",content);               //Set the infoTemplate.        graphic.setInfoTemplate(infoTemplate);         //Add graphic to the map graphics layer.        map.graphics.add(graphic);      }));                     }       //Listen for click event on the map, when the user clicks on the map call executeQueryTask function.     dojo.connect(map, "onMouseMove", executeQueryTask);     dojo.connect(map, "onClick", executeQueryTask);           //build query task     queryTask = new esri.tasks.QueryTask("http://earth.geog.ucsb.edu/ArcGIS/rest/services/icmBasemap10/MapServer/16");      //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.     //dojo.connect(queryTask, "onComplete", showResults);      //build query filter     query = new esri.tasks.Query();     query.returnGeometry = true;     query.outFields = ["B_Name", "B_Number", "Department"];      symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([25,25,112]), 3), new dojo.Color([0,0,128,1]));     //END BUILDINGS POPUP/HIGHLIGHT CODE     //***********************************            dojo.connect(map, "onLoad", function(map) {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });              }         dojo.addOnLoad(init);   </script>   </head>      <body class="claro">     <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"     gutters="false" style="width:100%; height:100%;">       <div id="header" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top">         <span>           This is the header section         </span>       </div>       <div id="leftPane" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="left"       style="width:275px;">         This is the left section       </div>       <div id="centerPane" dojotype="dijit.layout.BorderContainer" class="roundedCorners" region="center"       gutters="false">         <div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center"         style="position:relative; overflow:hidden;">           <div id="ovWin" class="shadow" style="position:absolute; right:35px; top:5px; z-Index:998; width:100px;height:100px; ">             <div id="overviewDiv" style="width:100%;height:100%;">             </div>           </div>         </div>         <div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom">           This is the footer section         </div>       </div>     </div>   </body> </html>

All comments

JeffPace1

This is one of the reasons we manually create our popups. However, that is a bit excessive in this case.

Can you post the code you use to set your infowindow/popup content? In very pseudo code

var content = getContent(); //get json content from whereever you are getting it
//loop through json
for (var key in p) {
//remove nulls
if (p[key]==null){
delete p.key;
}
}
//set content
infoWindow.setContent(content);

BryanKaraffa

Excellent idea! Never thought about retrieving the json information and handling it that way. You mentioned you manually created your own popups... care to go into details or have any resources you could forward me to regarding that method..?

Ultimately, I am loading a service with multiple layers. I want to enable one of the layers within the surface to "highlight" onMouseOver and if clicked, open an infowindow. I know there are a couple ways to do this... the first method we tried was to create a graphicsLayer ontop that had the highlight and infowindow method. The way it was implemented was a little messy and I felt there was a better solution. This is what I've come up with: http://bryankaraffa.com/ucsbcampusmap/

In addition, there will be additional layers that will overlay this "basemap" which I will want to have their own popup when activated - each layer with a different popup style. I have a feeling what you mentioned regarding "creating your own popups" is a solution for all these issues and will allow more much more customization than ESRI's infoWindow or Popup widgets.

Thanks for your response!!

JeffPace1

Nice map

in your code

//create the infoTemplate to be used in the infoWindow.
    //All ${attributeName} will be substituted with the attribute value for current feature.
    infoTemplate = new esri.InfoTemplate("${B_Name}<br />", "<b>Bldg:</b> ${B_Number}<br /><b>Department:</b> ${Department}");

i would change it to

var content = "";
if(${B_Number}){
      content+="<b>Bldg:</b>"+ ${B_Number}+"<br />";
}
if(${Department}){
      content+="<b>Department:</b>"+ ${Department};
}
infoTemplate = new esri.InfoTemplate("${B_Name}<br />",content);
}

BryanKaraffa

Nice map

in your code

//create the infoTemplate to be used in the infoWindow.
    //All ${attributeName} will be substituted with the attribute value for current feature.
    infoTemplate = new esri.InfoTemplate("${B_Name}<br />", "<b>Bldg:</b> ${B_Number}<br /><b>Department:</b> ${Department}");

i would change it to

var content = "";
if(${B_Number}){
      content+="<b>Bldg:</b>"+ ${B_Number}+"<br />";
}
if(${Department}){
      content+="<b>Department:</b>"+ ${Department};
}
infoTemplate = new esri.InfoTemplate("${B_Name}<br />",content);
}

It's my understanding that ${B_Number} is not a recognized variable... how do I grab ${B_Name} and set it to a javascript variable after the query?

JeffPace1

It's my understanding that ${B_Number} is not a recognized variable... how do I grab ${B_Name} and set it to a javascript variable after the query?

<!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" />     <!--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>UCSB Interactive Campus Map</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">  <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css'/&gt;     <style type="text/css">       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }     </style>     <script type="text/javascript">       var djConfig = {         parseOnLoad: true       };     </script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>     <script type="text/javascript">       dojo.require("dijit.dijit");       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.require("esri.dijit.Popup");         var map;        function init() {         initExtent = new esri.geometry.Extent({    "xmin":-119.86100,    "ymin":34.40856,    "xmax":-119.83553,    "ymax":34.41913,    "spatialReference":{"wkid":4326}   });   var popup = new esri.dijit.Popup(null, dojo.create("div"));         map = new esri.Map("map", {     infoWindow: popup         });         //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://ags2.geog.ucsb.edu/ArcGIS/rest/services/icmBaseMap20120411/MapServer");         map.addLayer(basemap);      //Add Building Layer   var layerCampusBuildings = new esri.layers.ArcGISDynamicMapServiceLayer("http://ags2.geog.ucsb.edu/ArcGIS/rest/services/Buildings_120404/MapServer");   map.addLayer(layerCampusBuildings);        //***********************************     //START Buildings Popup/Highlight Code     function executeQueryTask(evt) {      //onClick event returns the evt point where the user clicked on the map.      //This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).      //set query geometry = to evt.mapPoint Geometry      query.geometry = evt.mapPoint;       //Execute task and call showResults on completion      queryTask.execute(query, showResults);       }     function showResults(featureSet) {      //remove all graphics on the maps graphics layer      map.graphics.clear();       //QueryTask returns a featureSet.  Loop through features in the featureSet and add them to the map.      dojo.forEach(featureSet.features, dojo.hitch (this, function(f) {        //Get the current feature from the featureSet.        //Feature is a graphic        var graphic = f;        graphic.setSymbol(symbol);       var content = "";       if(dojo.trim(f.attributes["B_Number"])!=""&&dojo.trim(f.attributes["B_Number"])!=null){          content+="<b>Bldg:</b>"+ f.attributes["B_Number"]+"<br />";       }       if(dojo.trim(f.attributes["Department"])!=""&&dojo.trim(f.attributes["Department"])!=null){          content+="<b>Department:</b>"+ f.attributes["Department"];       }       infoTemplate = new esri.InfoTemplate(f.attributes["B_Name"]+"<br />",content);               //Set the infoTemplate.        graphic.setInfoTemplate(infoTemplate);         //Add graphic to the map graphics layer.        map.graphics.add(graphic);      }));                     }       //Listen for click event on the map, when the user clicks on the map call executeQueryTask function.     dojo.connect(map, "onMouseMove", executeQueryTask);     dojo.connect(map, "onClick", executeQueryTask);           //build query task     queryTask = new esri.tasks.QueryTask("http://earth.geog.ucsb.edu/ArcGIS/rest/services/icmBasemap10/MapServer/16");      //Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.     //dojo.connect(queryTask, "onComplete", showResults);      //build query filter     query = new esri.tasks.Query();     query.returnGeometry = true;     query.outFields = ["B_Name", "B_Number", "Department"];      symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([25,25,112]), 3), new dojo.Color([0,0,128,1]));     //END BUILDINGS POPUP/HIGHLIGHT CODE     //***********************************            dojo.connect(map, "onLoad", function(map) {           //resize the map when the browser resizes           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);         });              }         dojo.addOnLoad(init);   </script>   </head>      <body class="claro">     <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"     gutters="false" style="width:100%; height:100%;">       <div id="header" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top">         <span>           This is the header section         </span>       </div>       <div id="leftPane" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="left"       style="width:275px;">         This is the left section       </div>       <div id="centerPane" dojotype="dijit.layout.BorderContainer" class="roundedCorners" region="center"       gutters="false">         <div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center"         style="position:relative; overflow:hidden;">           <div id="ovWin" class="shadow" style="position:absolute; right:35px; top:5px; z-Index:998; width:100px;height:100px; ">             <div id="overviewDiv" style="width:100%;height:100%;">             </div>           </div>         </div>         <div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom">           This is the footer section         </div>       </div>     </div>   </body> </html>

BryanKaraffa

MANY thanks!!! This will be a good starting point for me 🙂

JeffPace1

Happy to help. Good luck!

HeidiOgle

I've got a somewhat similar issue only I have used the identify task rather than the query task. I have multiple layers that are identified in a sidebar. Some of the attributes in some of the layers contain <null> values which I would like to hide. I think I am somewhat close with the code but being a novice, I could use a push in the right direction. Thanks in advance for any assistance!

function layerTabContent(layerResults, layerName) {
 var content = "";
  switch (layerName) {
   case "ownerLayerResults":  
    for (var i=0, il=layerResults.features.length; i<il; i++) {
  content += "<b>Grantee Deed: </b><a target='_blank' href=" +layerResults.features.attributes['GRANTEE_DEED_1']+">Click here</a><br/>"
     content += if( +layerResults.features.attributes['GRANTEE_DEED_2']+ == null ) {return "";} else 
    {return "<b>Additional Grantee Deed: </b><a target='_blank' href=" +layerResults.features.attributes['GRANTEE_DEED_2']+">Click here</a><br/>"}
} break;
   case "censusLayerResults":
//and so on and so forth....

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.