Select to view content in your preferred language

Custom Info template window

2104
5
Jump to solution
02-01-2016 10:01 AM
KushendraShah1
Emerging Contributor

I have an issue with  info template window. I used set content method to display calculated value by geometry engine service. It works fine for displaying calculated value but cannot join other fields information. Here is my code:

var template = new esri.InfoTemplate();

         template.setTitle("<b>Cooperator: </b> ${Cooperator}"); 

         template.setContent("<b>PropertyName: <b> ${PropertyName} <br>");      // this cannot be displayed

         template.setContent(getTextContent);

var layer = new FeatureLayer("URL", {

          infoTemplate: template,

          outFields: ["*"],

          opacity: 0.5

        });

      

        // convert squarefeet to acre

       

        function getTextContent(value) {

  var sqft = geometryEngine.geodesicArea(value.geometry, "square-feet"); 

  var squarefeet = number.format(sqft, { places: 1 }); 

  var acres = number.format(sqft / 43560, { places: 0 }); 

  return "Acres :" + acres ;

  };

        map.addLayers([layer]);

0 Kudos
1 Solution

Accepted Solutions
TracySchloss
Honored Contributor

You'll need to create your entire formatted string within your function.

function setContent(value)  {

var formatString = "<b>Property Name:  </b> + value.attributes.PropertyName +"<br/>"

  var sqft = geometryEngine.geodesicArea(value.geometry, "square-feet");

  var squarefeet = number.format(sqft, { places: 1 });

  var acres = number.format(sqft / 43560, { places: 0 });

formatString += "Acres:  " + acres;

  return formatString;

}

View solution in original post

5 Replies
TracySchloss
Honored Contributor

You'll need to create your entire formatted string within your function.

function setContent(value)  {

var formatString = "<b>Property Name:  </b> + value.attributes.PropertyName +"<br/>"

  var sqft = geometryEngine.geodesicArea(value.geometry, "square-feet");

  var squarefeet = number.format(sqft, { places: 1 });

  var acres = number.format(sqft / 43560, { places: 0 });

formatString += "Acres:  " + acres;

  return formatString;

}

KushendraShah1
Emerging Contributor

Tracy, Thanks for the information. Unfortunately, it didn't work. It returns all the field string except the calculation. I think that calculation didn't executed when we call the function. Please check here;

var template = new esri.InfoTemplate();

         template.setTitle("<b>Cooperator: </b> ${Cooperator}");

         template.setContent;

function setContent(value){

  var formatString = "<b>Property Name:  </b> + value.attributes.PropertyName + <br/>";

  var sqft = geometryEngine.geodesicArea(value.geometry, "square-feet");

  var squarefeet = number.format(sqft, { places: 1 });

  var acres = number.format(sqft / 43560, { places: 0 });

  formatString += "acres:  " + acres;

  return formatString;

  }

0 Kudos
TracySchloss
Honored Contributor

When you define your infoTemplate content with a function, you have to pass it the name of your function.   it should be:

template.setContent(setContent)

OR whatever you have called your function.  I name my function something else to avoid confusion.

If you're not sure of your calculation, set some breakpoints within that function and make sure you have a value.  If you're not getting a value for sqft, then yes you're likely to have problems with what the function is returning.  There are a variety of reasons why this might not return the right output, including failing to define geometryEngine somewhere higher up in your code. 

KushendraShah1
Emerging Contributor

Tracy, you are right! I am glad that works now. Thank you so much for the help. Appreciated!

var PropertyString = value.attributes.PropertyName;

  var formatString = "<b>Property Name:</b> " + PropertyString

  var sqft = geometryEngine.geodesicArea(value.geometry, "square-feet");

  var squarefeet = number.format(sqft, { places: 1 });

  var acres = number.format(sqft / 43560, { places: 0 });

  formatString += "<br><b>Acres:</b> " + acres;

return formatString;

0 Kudos
TracySchloss
Honored Contributor

You must also define number.  Once I added 'esri/geometry/geometryEngine', and 'dojo/number' along with  their properly placed variables, your formatting function worked for me.