topic InfoWindow formatting in ArcGIS JavaScript Maps SDK Questions

InfoWindow formatting

LauraMiles1 — Sat, 11 Dec 2021 08:03:09 GMT

Hi all, I'm wondering if there is some way to use some kind of "if" statement in my infowindow. What I want to do is display a field that has a hyperlink, replacing the hyperlink's text with "Click to open" (this is the "WebLink" field below). However some items don't have a hyperlink, so I want to leave it blank in those cases. Here's my template code, which currently places "Click to open" regardless if there is anything in the field or not:

var agrTemplate = new InfoTemplate(layerName, "Occupied Status:  ${OCCUPIED} </br> Entry Date:  ${ENTRY_DATE} </br> 
                         Renewal Date:  ${Renew_Date} </br> Contact:  ${CONTACT} \n\</br> 
                         WebLink:  <a href =${WebLink} target='_blank'>Click to open</a> </br> Non-Exclusive:  ${NONEXCL}");
                feature.setInfoTemplate(agrTemplate);

Is there some kind of pretest I could do? Such as if WebLink = null, show this template, else show another one? I think there's something I'm just not thinking of here.

Re: InfoWindow formatting

RobertScheitlin__GISP — Fri, 06 Nov 2015 18:57:52 GMT

Laura,

You would do this using the setContent function for the infoWindow. There are a few threads that deal with this that you can search for using the term setContent.

Re: InfoWindow formatting

TracySchloss — Sat, 11 Dec 2021 08:03:12 GMT

It's pretty common for me to have attributes that have values for only a few of the records, and I don't like the look of blank rows. Here's a sample of how I check for a value before adding a line to the formatted string.

var infoTemplate = new InfoTemplate();
  infoTemplate.setTitle("Site Information");
  infoTemplate.setContent(generateInfoContent);

//creates string for info tag
  function generateInfoContent(graphic){
    var formatString = ""; 
    var disclaimerTest = graphic.attributes.HOURS_OF_OPERATION_DISCLAIMER;
    var adaTest = graphic.attributes.ADA_ACCESS;  //is site ADA accessible
    var idTest = graphic.attributes.ID_REQUIRED; //does site require ID
    locTest = graphic.attributes.LOC_CODE; // location quality of geocoded point
    formatString = "<b>"+graphic.attributes.FACILITY +"</b><br/>" +graphic.attributes.ADDRESS+"<br/>"
    + graphic.attributes.CITY+", " + graphic.attributes.STATE + "</br>"
    + "Phone: " + graphic.attributes.PHONE + "<br/>"
    + "Hours: " + graphic.attributes.HOURS_OF_OPERATION;
  if (disclaimerTest){
    formatString  += "<br/>" + graphic.attributes.HOURS_OF_OPERATION_DISCLAIMER;
  }
  if (idTest && idTest !== 'UNK' ) {
    formatString +=  "<br/> ID Required?:  " + graphic.attributes.ID_REQUIRED;
  }
  if (adaTest && adaTest !== 'UNK' ) {
    formatString  +=  "<br/>ADA access?:  " + graphic.attributes.ADA_ACCESS
  }

// check geocoder location quality code, add note for those only placed centrally
    switch (locTest){
      case "CENT":                 
      formatString += "</br></br>  ** Location Approximate ** ";
      break;
      default:
      // console.log("not a centroid");
      }                 
    return formatString; 
  }

Re: InfoWindow formatting

JeffJacobson — Sat, 11 Dec 2021 08:03:15 GMT

You can hide the empty ones via CSS.

<a href="" class="myinfowindowlink" >Empty Link</a>
<a href="http://example.com" class="myinfowindowlink">Example Link</a>

a.myinfowindowlink[href=''] {
    display: none;
}

Re: InfoWindow formatting

JeffJacobson — Tue, 10 Nov 2015 18:25:07 GMT

The sample HTML got messed up. I can't seem to put the HTML markup as a code block without the forum software converting it. The HTML links should have their class attributes set to "myinfowindowlink" in order to work with the CSS example I provided. (The "myinfowindowlink" can be changed to whatever name you want, as long as it is changed in both the HTML and CSS.)

Re: InfoWindow formatting

LauraMiles1 — Mon, 16 Nov 2015 16:14:48 GMT

Thanks for pointing me in the right direction - haven't had the time to implement yet but it looks fairly straightforward.

Re: InfoWindow formatting

LauraMiles1 — Sat, 11 Dec 2021 08:03:17 GMT

In case anyone else has the same question, working from the ESRI sample here I did the following:

var agrOnlyTemplate = new InfoTemplate();
            agrOnlyTemplate.setTitle("Agreement");
            feature.setInfoTemplate(agrOnlyTemplate);
            agrOnlyTemplate.setContent("Occupied Status:  ${OCCUPIED} </br> Entry Date:  ${ENTRY_DATE} </br> 
            Renewal Date:  ${Renew_Date} </br> Contact:  ${CONTACT} \n\</br> WebLink: ${WebLink:compare} </br> 
            Non-Exclusive: ${NONEXCL}");
                }

compare = function (value, key, data) {
        var result = "";
//If field is blank or contains a space, do nothing
        if((data.WebLink === " " && typeof data.WebLink === "string")||(data.WebLink === null && typeof data.WebLink === "object")){
            return;
            }
//Add the hyperlink if present
        else {
            result = "<a href ='" + data.WebLink + "' target='_blank'>Click to open</a>";
            }

        return result;
          };

Re: InfoWindow formatting

LauraMiles1 — Wed, 18 Nov 2015 20:56:22 GMT

Your solution worked in this jsfiddle, but not in my map - not sure why.