topic Re: Format infoTemplate content with custom function in ArcGIS JavaScript Maps SDK Questions

Format infoTemplate content with custom function

RyanClancy — Tue, 24 Sep 2013 16:27:30 GMT

I'm trying to format the value of a field for display in an infoTemplate but nothing is happening; it appears as though the function is not being called. I used the example here as a guide, see the compare() function.

I simply want to format the text to display either Gbps or Tbps based on the value of the field. The relevant field is called "Capacity_G" and I put the console.log statements in there to test whether the function was executing; it is not.

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; }

What have I done wrong? The text in the resulting popup appears unmodified, exactly as it is in the attributes of the data.

Re: Format infoTemplate content with custom function

derekswingley1 — Tue, 24 Sep 2013 16:50:39 GMT

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).

Re: Format infoTemplate content with custom function

RyanClancy — Tue, 24 Sep 2013 16:52:57 GMT

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).

Yep, that was it. Works perfectly now. Thanks!

Re: Format infoTemplate content with custom function

RyanClancy — Sat, 11 Dec 2021 14:24:26 GMT

It seems I'm having another issue of scope on this same topic. I've updated my code to use dojo/ready and instead of the base infoWindow I'm now using a Popup. My formatting function is no longer being called. Is this a problem of scope or something to do with the Popup vs base infoWindow? Initially the formatCapacity() function was inside the ready(function(){*in here*}) as a global function but when it didn't work I moved it outside of the ready(). Either way it is not called. Everything else works.

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....
       ....
       ....
   });

Re: Format infoTemplate content with custom function

derekswingley1 — Tue, 01 Oct 2013 17:50:55 GMT

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.

Re: Format infoTemplate content with custom function

RyanClancy — Sat, 11 Dec 2021 14:24:29 GMT

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.

Okay, I switched back to InfoTemplate. Instead of displaying the default popup over the map I've disabled it with map.infoWindow.set("popupWindow", false) . I'm writing the contents of the popup to a <div> that I define, somewhat like this. This is why I switched to Popup; I didn't realize I could use InfoTemplate with Popup. The only other difference is the addition of dojo/ready.

The map's infoWindow is set like so:

map = new map("mapDiv", {
    infoWindow: popup
}

The popup is defined as:

var popup = new Popup({
    highlight:false,
    titleInBody: true
}, dojo.create("div"));

InfoTemplate is:

var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("<b>Cable:</b> ${NAME}");
infoTemplate.setContent("<b>Cable:</b> ${NAME}"<br>
                             + "<b>Capacity:</b> ${CAPACITY_G:formatCapacity}");

...all of this happens within ready() and the formatCapacity() function is never called regardless of whether it is nested with ready() or outside of ready().

Re: Format infoTemplate content with custom function

derekswingley1 — Wed, 02 Oct 2013 12:04:26 GMT

When you're not using the popup on the map, things are a little different. When putting content from a feature in an element outside the map, you have to do more with your code.

In the sample you linked to, the displayPopupContent function gets feature info and puts it in a div. This is where you could also do any custom formatting.

Re: Format infoTemplate content with custom function

RyanClancy — Sat, 11 Dec 2021 14:24:32 GMT

Ah, I see. In that case, how do I call the graphic.attr() method? My code is giving me a "feature.attr is not a function" error. Here's what I'm trying to do:

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;

Re: Format infoTemplate content with custom function

derekswingley1 — Wed, 02 Oct 2013 20:59:55 GMT

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). If you want to add to or update a graphic.attributes, modify that object directly.

Re: Format infoTemplate content with custom function

RyanClancy — Thu, 03 Oct 2013 12:29:53 GMT

Are you using 3.7? graphic.attr() was introduced at 3.7 (we'll update the docs to say this).

Ah, that's the gotcha that got me. I was using 3.6 but I'll switch to 3.7 today. Thanks again!

Attr is also used to add attributes to a graphic's DOM node, it doesn't affect graphic.attributes (which I admit is confusing).

....and oh yes, that is confusing.

Re: Format infoTemplate content with custom function

DominickCisson — Wed, 07 May 2014 13:39:13 GMT

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). If you want to add to or update a graphic.attributes, modify that object directly.

Do you know of an example of how to add a real attribute to a graphic? and I'll second the original poster here, graphic.attr is very confusing. What exactly is the point of adding an attribute to a graphic's DOM node?

Re: Format infoTemplate content with custom function

DominickCisson — Thu, 22 May 2014 20:37:26 GMT

Do you know of an example of how to add a real attribute to a graphic? and I'll second the original poster here, graphic.attr is very confusing. What exactly is the point of adding an attribute to a graphic's DOM node?

Never mind... Figured it out. It's JSON 101 Duh.

Just set the attribute directly... graphic.attribute.<attribute name> = "New value"