Whats wrong with my logic?

RachelAlbritton · ‎04-21-2016

I am trying to set the contents of an infoTemplate based on an if/else statement, however, its not giving me the results that I would expect. Certain fields in the 'thumbnails' field contain a field that is call 'NoImage2.jpg'. If the field contains this title I want this field removed from the infotemplate window. When I test the logic, the infotemplate always returns the else statement. If I remove the else statement and have the function only evaluate the if statement, the windows comeback blank, even for the objects that it should apply to. I'm clearly overlooking something but I can't figure it out. Thanks in advance.

 map = new Map("map",{
          basemap: "streets",
          center:[-111.836, 40.765], //long, lat
          zoom: 14
        });
            
            bldgContentObject = {
            objectid: '${OBJECTID}',
            formalName: '"${formal_name:formatStructureNameForThumbnailModal}"',
            informalName: '"${informal_name:formatStructureNameForThumbnailModal}"',
            streetAddress: '${street_address}',
            city: '${city}',
            state: '${state}',
            zipCode: '${zip_code}',
            thumbnails: '${thumbnails}',
            buildingNumber: '${building_number}',
            abbreviation: '${abbreviation}',
            lattitude: '${lattitude:gsvLat}',
            longitude: '${longitude:gsvLon}',
            gsvHeading: '${gsv_heading:gsvHeading}',
            gsvPitch: '${gsv_pitch:gsvPitch}'
          };
          
        symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID)); //new Color([0,0,0])), new Color([0,0,0]));
        //infoTemplate = new InfoTemplate("${informal_name}", "<b>BN: </b>${building_number}<br><b>Abbrv: </b>${abbreviation}<br><b>Thumbnail: </b>${thumbnails}<br>");
        
        infoTemplate = new InfoTemplate();
        infoTemplate.setTitle (bldgContentObject.informalName);
        var infoContent1 = "<b>BN: </b>"+bldgContentObject.buildingNumber+"<br><b>Thumbnail: </b>"+bldgContentObject.thumbnails;
      var infoContent2 = "<b>BN: </b>"+bldgContentObject.buildingNumber;
        //infoTemplate.setContent("<b>BN: </b>${building_number}<br><b>Abbrv: </b>${abbreviation}<br><b>Thumbnail: </b>${thumbnails}<br>"); //Works
        //infoTemplate.setContent(infoContent1); //This logic works
        infoTemplate.setContent(templateContent());
    
        function templateContent (){
    //return bldgContentObject.thumbnails; //name in the thumbnails field (string)
        if (bldgContentObject.thumbnails === "'NoImage2.jpg'"){return infoContent2;} //returns a content window with only the title
        //if (bldgContentObject.thumbnails === "NoImage2.jpg"){return infoContent2;}) //same results as above
        //if bldgContentObject.thumbnails === '"NoImage2.jpg"'){return infoContent2;}// same results as above
    else {return infoContent1;}
        
        }
        
        map.on("click", doQuery);
        
        queryTask = new QueryTask("http://fmags.fm.utah.edu/arcgis/rest/services/mapservices/public_basemap_2014/MapServer/41");
        queryTask.on("complete", addToMap);
           
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["*"];
           
      });
      
          function doQuery(evt) {
        //clear currently displayed results
        map.graphics.clear();
               
        query.geometry = evt.mapPoint;
            query.outSpatialReference  = map.spatialReference;
        queryTask.execute(query);
          }
            
        function addToMap(results) {           
        var featureArray = results.featureSet.features;
            var feature = featureArray[0];          
            map.graphics.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate));
      }
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

RobertScheitlin__GISP · ‎04-21-2016

Rachael,

You should look at the help docs for formatting infowindow content, specifically

Using custom functions:

Format info window content | Guide | ArcGIS API for JavaScript

Your line

infoTemplate.setContent(templateContent());

should be:

infoTemplate.setContent(templateContent);

and in your

function templateContent (){

function you need to work with the graphic.

function templateContent (graphic){

var attrs = graphic.attributes;

View solution in original post

KenBuja · ‎04-21-2016

The if and else if statements both return infoContent2. Is that correct?

if (bldgContentObject.thumbnails === "'NoImage2.jpg'"){return infoContent2;}
else {return infoContent2;}

RachelAlbritton · ‎04-21-2016

correct

KenBuja · ‎04-21-2016

Then what is the purpose of infoContent1?

RachelAlbritton · ‎04-21-2016

My mistake - thats a mistype and I've edited the original post (thank you for catching that).

It should read:

if (bldgContentObject.thumbnails === "'NoImage2.jpg'"){return infoContent2;}

else {return infoContent1;}

RobertScheitlin__GISP · ‎04-21-2016

Rachael,

You should look at the help docs for formatting infowindow content, specifically

Using custom functions:

Format info window content | Guide | ArcGIS API for JavaScript

Your line

infoTemplate.setContent(templateContent());

should be:

infoTemplate.setContent(templateContent);

and in your

function templateContent (){

function you need to work with the graphic.

function templateContent (graphic){

var attrs = graphic.attributes;

RachelAlbritton · ‎04-21-2016

thanks Robert - I'll take a look at the link you provided

As far as your suggestion for this:

Your line
infoTemplate.setContent(templateContent());
should be:
infoTemplate.setContent(templateContent);

I tried that, but your suggestion returns this:

whereas my statement returns the field value:

RobertScheitlin__GISP · ‎04-21-2016

Rachel,

Why either one of those images is displaying the thumbnail info does not make any sense to me. Supposedly your function is returning infoContent2. And infoContent2 should be "BN: "+bldgContentObject.buildingNumber. Have you changed your code since you posted what you did above to account for this difference in what code we can see and what is actually running on your end?

RachelAlbritton · ‎04-21-2016

Robert -

the images I posted were simply to show you that keeping my format : infoTemplate.setContent(templateContent());

gives my attribute information, but your suggestion of infoTemplate.setContent(templateContent); does not.

Keeping things within context, if I run the code using my format of infoTemplate.setContent(templateContent());

The following image defaults to infoConent1, but it should be recognizing infoContent2

if I use your suggested format: infoTemplate.setContent(templateContent); it still defaults to the infoContent1 (which it should not), but it does not give me the attribute value

I hope this provides some clarity.

EvelynHernandez · ‎04-21-2016

try to follow my logic to solve ur issue

First u need to do the query to pass the parameters to that function:

function templateContent(graphic, infoTemplate){

var attr = graphic.attributes['thumbnails'];

if (attr = "NoImage2.jpg"){

var infoContent1 = "BN: "+ bldgContentObject.buildingNumber +

" Thumbnail: " +

"<img>${thumbnails}</img>";

infoTemplate.setContent(infoContent1);

}else{

var infoContent2 = "BN: " + bldgContentObject.buildingNumber;

infoTemplate.setContent(infoContent2);

}