set Infowindow conditional content?

3539
6
Jump to solution
08-21-2014 11:57 AM
MatthewBorr
New Contributor III

Hi,

 

I am displaying an infowindow with content pulled from a pulldown setting as follows (code shortened for clarity). I want to display the record pulled from the database (var content), but what I need to do is, if the number equal zero, the infowindow content will show as "Data not available". I'm stuck on how to start this. Use an if then statement? An SQL query? I can't seem to find examples in any literature Ive searched.

 

Thanks

 

 

 

if (s.value==="male" && a.value==="allage" && r.value==="white" && p.value==="bpov"){          var maxval=1236;     var field="WBPME_Tota";     var title=("<b>White Male Below Poverty</b><br>");     var content=("<b>Count: </b>${WBPME_Tota}");                        } else if (s.value==="mandf" && a.value==="allage" && r.value==="allrace" && p.value==="bpov"){            var maxval=100;     var field="Mpoverty";     var title=("<b>Total Poverty (all ages) )</b><br>");     var content=("<b>Count: </b>${MFpoverty}"); }   var tracttemplate=new esri.InfoTemplate(); tracttemplate.setTitle(title); tracttemplate.setContent(content);
0 Kudos
1 Solution

Accepted Solutions
JoshHevenor
Occasional Contributor II

Sorry, I think I missed something from your original post. You're saying that your process is that the user defines a query which set your s, a, r, and p value. I'm assuming that you're getting your data fine and getting the infoWindow to show what you want is the sticking point.  This combines your sample and mine:

require([ "dijit/form/select", "esri/InfoTemplate" /* , other requires... */],

  function( Select, InfoTemplate /*, other requires... */){

    // roughing in some structure

    var s = new Select(params,srcNodeRef); // Our census options <-- updated

    var a = new Select(params,srcNodeRef); //

    var r = new Select(params,srcNodeRef); //

    var p = new Select(params,srcNodeRef); //

    var map = new Map(etc);

    var qt = new QueryTask(etc);

    map.on("click", function(evt){

        // init query

        map.infoWindow.clearFeatures(); // why not

        qt.execute();

        map.infoWindow.show(evt.mapPoint);

    });

    qt.on("complete", function(results){ // <-------------------------- the important part

        // Build a collection of features with template assigned

        var features = array.map(featureSet.features, function(f){

            var infoTpl = new InfoTemplate("Results", "Results not available");

            if (s.value==="male" && a.value==="allage" && r.value==="white" && p.value==="bpov"){ // <-- updated

                var maxval=1236;

                var field="WBPME_Tota";

                infoTpl.setTitle("<b>White Male Below Poverty</b>");

                infoTpl.setContent("<b>Count: </b>${WBPME_Tota}");

            }  else if (s.value==="mandf" && a.value==="allage" && r.value==="allrace" && p.value==="bpov"){

                var maxval=100;

                var field="Mpoverty";

                infoTpl.setTitle("<b>Total Poverty (all ages) )</b>");

                infoTpl.setContent("<b>Count: </b>${MFpoverty}");

            }

            // The default template is handling this now

            if(f.attributes[field] === null){

                // Results not available

            } else if(f.attributes[field] == 0){

                // Results not available?

                // They are, they're just 0, but that's your business

                infoTpl.setContent("Count: 0");

            }

            f.setTemplate(infoTpl);

            return f;

        });

        map.infoWindow.setFeatures(features);

    });

});

View solution in original post

0 Kudos
6 Replies
JoshHevenor
Occasional Contributor II

If you look at this ESRI demo you'll see something similar (assuming I understand the question).

ArcGIS API for JavaScript Sandbox

The key part is this:

            //display the query results

            var content = "";

            if(results.length > 0){

              content = "Population = " + results[0].value.features[0].attributes.SUM;

            }else{

              content = "No Results Found"

            }

            window.map.infoWindow.setContent(content);

0 Kudos
MatthewBorr
New Contributor III

if(field.value === 0){ 

count = "Results not available"

}

else{ 

count = content;

var tracttemplate=new esri.InfoTemplate();

tracttemplate.setTitle(title);

tracttemplate.setContent(count);

Thanks for helping, this looks like the correct direction. I tried the above code. However I'll ask a newbie-ish question here:

How do I get the value from the field in question for the if then statement? The user has to click on the census tract to activate the infowindow and choose the value displayed for the specific feature based on the feature clicked.

In other words, the field has many values, and the if then statement cannot know what is clicked in this format.

How do I get that value to the if then statement to decide whether to display the correct value or "Results not available?"

0 Kudos
JoshHevenor
Occasional Contributor II

For clarity, your process is something like:

- user picks a database field of interest

    - census stuff from the sournds of it, one of avg age, %male, population, etc

- user clicks map to query census track

Code then looks more like:

require([ "dijit/form/select" /* , other requires... */],

  function( Select /*, other requires... */){

    // roughing in some structure

    var fieldList = new Select(params,srcNodeRef); // Our list of fields

    var map = new Map(etc);

    var qt = new QueryTask(etc);

    map.on("click", function(evt){

        // init query

        // ...

        map.infoWindow.clearFeatures(); // why not

        qt.execute();

        map.infoWindow.show(evt.mapPoint);

    });

    qt.on("complete", function(results){ // <-------------------------- the important part

        // Set default template

        var template = "Results not available";

        // Assign different template based on what field is selected in list

        switch(fieldList.value){ // or if statements

            case "POP" : template = "POP: ${POP}"; break;

            case "SEX" : template = "SEX: ${SEX}"; break;

            case "AGE" : template = "AGE: ${AGE}"; break;

            default:

                // already defined, but you could do more

        }

        // Build a collection of features with template assigned

          // Probably only one response but handling more

        var features = array.map(featureSet.features, function(f){

            f.setTemplate(template);

            return f;

        });

        map.infoWindow.setFeatures(features);

    });

});

0 Kudos
MatthewBorr
New Contributor III

Thanks, the problem is that it is already built quite extensively in legacy code around the structure that I gave in the first post. Is there anyway to modify that code to have a conditional value in the infowindow?

0 Kudos
JoshHevenor
Occasional Contributor II

Sorry, I think I missed something from your original post. You're saying that your process is that the user defines a query which set your s, a, r, and p value. I'm assuming that you're getting your data fine and getting the infoWindow to show what you want is the sticking point.  This combines your sample and mine:

require([ "dijit/form/select", "esri/InfoTemplate" /* , other requires... */],

  function( Select, InfoTemplate /*, other requires... */){

    // roughing in some structure

    var s = new Select(params,srcNodeRef); // Our census options <-- updated

    var a = new Select(params,srcNodeRef); //

    var r = new Select(params,srcNodeRef); //

    var p = new Select(params,srcNodeRef); //

    var map = new Map(etc);

    var qt = new QueryTask(etc);

    map.on("click", function(evt){

        // init query

        map.infoWindow.clearFeatures(); // why not

        qt.execute();

        map.infoWindow.show(evt.mapPoint);

    });

    qt.on("complete", function(results){ // <-------------------------- the important part

        // Build a collection of features with template assigned

        var features = array.map(featureSet.features, function(f){

            var infoTpl = new InfoTemplate("Results", "Results not available");

            if (s.value==="male" && a.value==="allage" && r.value==="white" && p.value==="bpov"){ // <-- updated

                var maxval=1236;

                var field="WBPME_Tota";

                infoTpl.setTitle("<b>White Male Below Poverty</b>");

                infoTpl.setContent("<b>Count: </b>${WBPME_Tota}");

            }  else if (s.value==="mandf" && a.value==="allage" && r.value==="allrace" && p.value==="bpov"){

                var maxval=100;

                var field="Mpoverty";

                infoTpl.setTitle("<b>Total Poverty (all ages) )</b>");

                infoTpl.setContent("<b>Count: </b>${MFpoverty}");

            }

            // The default template is handling this now

            if(f.attributes[field] === null){

                // Results not available

            } else if(f.attributes[field] == 0){

                // Results not available?

                // They are, they're just 0, but that's your business

                infoTpl.setContent("Count: 0");

            }

            f.setTemplate(infoTpl);

            return f;

        });

        map.infoWindow.setFeatures(features);

    });

});

0 Kudos
MatthewBorr
New Contributor III

Looks good, I'll have to try this Monday, as I am out of time today.

thanks again

0 Kudos