Hi,
I'm just creating a simple map to display one point dataset. When the user clicks on a point I want a popup to display, some of the attribute fields contain null values and ideally I don't want these fields to be included in the popup if the value of the attribute is null. I've tried to find the answer to this question and have come across a solution when using data coming from a queryTaskLayer but I'm looking to do this on a featureLayer. Any suggestions on how to do this with a featureLayer?
Cheers,
Mike
Solved! Go to Solution.
You need to create a function and set it as your infoContent. I'm not using a popupTemplate, I'm using an infoTemplate, but it should be the same concept.
var infoTemplate = new InfoTemplate();
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;
var idTest = graphic.attributes.ID_REQUIRED;
//these fields always have data, so start with a string that contains them and then append the others only when they have values.
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
}
return formatString;
}
FeatureLayer has a infoTemplate property and you can use it to change the content. Check out this example
Hi,
Thanks for your reply. Yeah I originally had created a new PopupTemplate like this:
var asTemplate = new PopupTemplate({title: ""});
asTemplate.setContent("${Agency}<br/>" + "${Address_1}, ${Address_2}, ${Town}, ${Postcode}<br/>" + "${Telephone}<br/>"
+ "Area covered: ${Area_covered}<br/>" + "<a href=${Website} target = _blank>${Website}</a>");
But some of the features have null values on certain attributes so I tried to hide them by doing this:
var content = "";
if(${Address_2}){
content += ", " + ${Address_2};
}
if(${Town}){
content += ", ${Town}";
}
if(${Postcode}){
content += ", ${Postcode}";
}
if(${Telephone}){
content += ", ${Telephone}";
}
if(${Website}){
content += "<br/><a href=${Website} target = _blank>${Website}</a>";
}
if(${Area_covered}){
content += "<br/>Area covered: ${Area_covered}";
}
if(${Advice}){
content += "<br/>${Advice}";
}
if(${Information}){
content += "<br/>${Information}";
}
if(${Provider}){
content += "<br/>${Provider}";
}
asTemplate.setContent("${Agency}<br/>" + "${Address_1}, ",content);
But it looks like referencing the attributes with curly brackets interferes with the if statement so that doesn't work. Any suggestions on how to get around this?
You need to create a function and set it as your infoContent. I'm not using a popupTemplate, I'm using an infoTemplate, but it should be the same concept.
var infoTemplate = new InfoTemplate();
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;
var idTest = graphic.attributes.ID_REQUIRED;
//these fields always have data, so start with a string that contains them and then append the others only when they have values.
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
}
return formatString;
}
Thanks Tracy, that has worked a treat.
Cheers,
Mike