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.
Solved! Go to Solution.
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; };
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.
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; }
Thanks for pointing me in the right direction - haven't had the time to implement yet but it looks fairly straightforward.
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; }
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.)
Your solution worked in this jsfiddle, but not in my map - not sure why.
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; };