var infoTemplate = new InfoTemplat(); infoTemplate.setTitle("<b>Cable: ${NAME}</b>"); infoTemplate.setContent("Capacity: ${CAPACITY_G:formatCapacity}"); function formatCapacity(value){ console.log("LALALALALAA"); var cap = ""; //1Tb = 1024Gb if (value >= 1024){ cap = value/1024 + "Tbps"; } else { cap = value + "Mbps"; } console.log("LALALALALALALA"); return cap; }
Solved! Go to Solution.
In the sample you linked to, the formatting function is in the global scope. To get your formatting function to run, make it a global (or a property on some global object).
require([ "esri/map", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "dojo/ready", etc..... .... ] , function( Map, Popup, PopupTemplate, ready, etc... .... ) { function formatCapacity(value){ console.log("Formatting function is called"); } ready(function(){ ..... ..... var popupTemplate = new PopupTemplate(); popupTemplate.setTitle("<b>${NAME}</b><br>") popupTemplate.setContent("<b>Cable: ${CAPACITY_G:formatCapacity}</b>"); var popup = new Popup({ highlight: false, titleInBody: true }, dojo.create("div")); etc.... .... .... });
If you're still using setContent and setTitle, continue to use an instance of InfoTemplate. You can use it with Popup. Unless you want PopupTemplate's specific features, no need to use PopupTemplate.
map = new map("mapDiv", { infoWindow: popup }
var popup = new Popup({ highlight:false, titleInBody: true }, dojo.create("div"));
var infoTemplate = new InfoTemplate(); infoTemplate.setTitle("<b>Cable:</b> ${NAME}"); infoTemplate.setContent("<b>Cable:</b> ${NAME}"<br> + "<b>Capacity:</b> ${CAPACITY_G:formatCapacity}");
showPopupContent(popup.getSelectedFeature()); function showPopupContent(feature){ var cap = ""; if (feature.attributes.CAPACITY_G > 0){ if (feature.attributes.CAPACITY_G >= 1000{ cap = dojo.number.format(feature.attributes.CAPACITY_G/1000, {places:2}) + " Tbps"; } else { cap = feature.attribues.CAPACITY_G + " Gbps"; } } else { cap = " n/a" } //Set the CAPACITY_G attribute to be the newly formatted value feature.attr("CAPACITY_G", cap); //Get the content for the current feature var content = feature.getContent(); //Display content in the side panel dom.byId("cableInfo").innerHTML = content;
Are you using 3.7? graphic.attr() was introduced at 3.7 (we'll update the docs to say this).
Attr is also used to add attributes to a graphic's DOM node, it doesn't affect graphic.attributes (which I admit is confusing).