I am trying to format my Identify Popup in CMV to include some links, images, and special formatting. I have attempted to follow the suggestions mentioned here on GitHub, and here is the code:

define([
'dojo/i18n!./nls/main',
'dojo/_base/lang'
], function (i18n, lang) {
var linkTemplate = '<a href="{url}" target="_blank">{text}</a>';
function directionsFormatter (noValue, attributes) {
    return lang.replace(linkTemplate, {
        url: 'https://www.google.com/maps/dir/' + attributes.Address + ' Louisville, KY',
        text: 'Get Directions'
    });
}
return {
    map: true,
    mapClickMode: true,
    mapRightClickMenu: true,
    identifyLayerInfos: true,
    identifyTolerance: 5,
    draggable: false,/*
    hideEmptyPopop: false,*/

    // config object definition:
    //  {<layer id>:{
    //      <sub layer number>:{
    //          <pop-up definition, see link below>
    //          }
    //      },
    //  <layer id>:{
    //      <sub layer number>:{
    //          <pop-up definition, see link below>
    //          }
    //      }
    //  }

    // for details on pop-up definition see: https://developers.arcgis.com/javascript/jshelp/intro_popuptemplate.html

    identifies: {
        identifies: {
        Properties: {
            1: {
                title: i18n.identify.apegProperties.allProperties,
                fieldInfos: [{
                    fieldName: 'SiteBuildingName',
                    label: 'Name:',
                    visible: true
                }, {
                    fieldName: 'IsBuilding',
                    label: 'Type:',
                    visible: true
                }, {
                    fieldName: 'City',
                    label: "City:",
                    visible: true
                }, {
                    fieldName: 'County',
                    label: 'County:',
                    visible: true
                }, {
                    fieldName: 'DatePropertyIsAvailable',
                    label: 'Availability:',
                    visible: true
                }, {
                    fieldName: 'ForLease',
                    label: 'For Lease:',
                    visible: true
                }, {
                    fieldName: 'LeaseTerms',
                    label: "Lease Terms:",
                    visible: true
                }, {
                    fieldName: 'ForSale',
                    label: 'For Sale:',
                    visible: true
                }, {
                    fieldName: 'SalePrice',
                    label: 'Sale Price:',
                    visible: true
                }, {
                    fieldName: 'Rail',
                    label: 'Railway Access:',
                    visible: true
                }, {
                    fieldName: 'Electric',
                    label: 'Electric at Site:',
                    visible: true
                }, {
                    fieldName: 'Gas',
                    label: 'Gas at Site:',
                    visible: true
                }, {
                    fieldName: 'Sewer',
                    label: 'Sewer at Site:',
                    visible: true
                }, {
                    fieldName: 'Telecom',
                    label: 'Telecom at Site:',
                    visible: true
                }, {
                    fieldName: 'WaterAtSite',
                    label: 'Water at Site:',
                    visible: true
                }, {
                    fieldName: 'URL',
                    label: 'Ohio InSite:',
                    visible: true
                }, {
                    fieldName: 'Lat',
                    label: 'Latitude:',
                    visible: true
                }, {
                    fieldName: 'Long',
                    label: 'Longitude:',
                    visible: true
                }]
            },
            0: {
                title: i18n.identify.apegProperties.riverProperties,
                description: "<b>{name}</b><br />" +
                "{address2}<br />" +
                "<a href='{RiverLink}' target='_blank'><b>Click for Detailed Site Information</b></a>" +
                "<img src="{Picture}" width="230" height="180" ><br />" +
                "<b><u>Site Summary</b></u><br />" +
                "<b><br>{description}</b><br><br />" +
                "<b>Acreage:</b>  {sitesize}<br />" +
                "<b>Square Footage:</b>  {buildingsize}<br />" +
                "<b>For Sale:</b>  {forsale}<br />" +
                "<b>For Lease:</b>  {forlease}<br /><br />" +
                "<b>River Port on Site:</b>  {DockOnSite}<br />" +
                "<b>Railway Access:</b>  {israil}<br />" +
                "<b>Miles to Highway:</b>  {DistanceHighway}<br />" +
                "<b>Miles to Interstate:</b>  {DistanceInterstate}<br />" +
                "<b>Miles to Airport:</b>  {AirportsDist}<br /><br />" +
                "<b>Electric on Site:</b>  {poweronsite}<br />" +
                "<b>Gas on Site:</b>  {gasonsite}<br />" +
                "<b>Water on Site:</b>  {wateronsite}<br />" +
                "<b>Sewer on Site:</b>  {seweronsite}<br />" +
                "<b>County:</b>  {county}<br />"
            }
        }
    }
};
});

After I added the html code for the riverProperties Popup none of the Popups were working for any of the other features. When you comment our the riverProperties Popup, it work no problem. Can anyone else spot an issue?

The first issue I spot is you are using double quotes around the width/height of the image:

"<img src="{Picture}" width="230" height="180" ><br />" +

that is a problem since you are using double quotes around the entire string in that line. Switch to single quotes for the width/height:

"<img src="{Picture}" width='230' height='180' ><br />" +

There maybe other problems. That's all I see with a quick scan. Catching these types of format/syntax errors is ideally best done in the editor. How effective and efficient that is depends on the tools available in your editor of choice. (I use Sublime Text with numerous add-on packages). In addition, I suggest getting familiar with using Google Chrome's Dev Tools. Those tools are extremely helpful in diagnosing and troubleshooting issues such as this.

  • I changed the double quote on the width and height parameters, and was still getting a syntax error. Therefore I went and changed the double quotes around {Picture} to single, and I am no longer getting an error, however my Popup is still not displaying the changes. Is there something else overriding identify.js file? Here is the public URL if you would like to see it for yourself. Click on the tug boat icon, you should notice the format is off. – Dru Apr 7 '17 at 15:19

@tmcgee I was able to eliminate errors however I was still getting syntax errors, and to get the app to run without any errors, I needed to remove the double quotes from the image tag as well and replace them with single quotes as shown:

"<img src='{Picture}' width='230' height='180' ><br />" +

However the Popup was still not displaying/functioning exactly as I would hope. Therefore I started to break things down and compare them to the original config files I downloaded with the CMV templates. I began to notice that I am making a reference to a layer that is stored in the ArcServer published service at position 0. For whatever reason the config would not recognize any of the layers stored in this position.

define([
'dojo/i18n!./nls/main',
'dojo/_base/lang'
], function (i18n, lang) {

var linkTemplate = '<a href="{url}" target="_blank">{text}</a>';
function directionsFormatter (noValue, attributes) {
    return lang.replace(linkTemplate, {
        url: 'https://www.google.com/maps/dir/' + attributes.Address + ' Louisville, KY',
        text: 'Get Directions'
    });
}
return {
    map: true,
    mapClickMode: true,
    mapRightClickMenu: true,
    identifyLayerInfos: true,
    identifyTolerance: 5,
    draggable: false,
    /*hideEmptyPopop: false,*/

    // config object definition:
    //  {<layer id>:{
    //      <sub layer number>:{
    //          <pop-up definition, see link below>
    //          }
    //      },
    //  <layer id>:{
    //      <sub layer number>:{
    //          <pop-up definition, see link below>
    //          }
    //      }
    //  }

    // for details on pop-up definition see: https://developers.arcgis.com/javascript/jshelp/intro_popuptemplate.html

    identifies: {
        Properties: {
            1: {
                title: i18n.identify.apegProperties.allProperties,
                fieldInfos: [{
                    fieldName: 'SiteBuildingName',
                    label: 'Name:',
                    visible: true
                }, {
                    fieldName: 'IsBuilding',
                    label: 'Type:',
                    visible: true
                }, {
                    fieldName: 'City',
                    label: "City:",
                    visible: true
                }, {
                    fieldName: 'County',
                    label: 'County:',
                    visible: true
                }, {
                    fieldName: 'DatePropertyIsAvailable',
                    label: 'Availability:',
                    visible: true
                }, {
                    fieldName: 'ForLease',
                    label: 'For Lease:',
                    visible: true
                }, {
                    fieldName: 'LeaseTerms',
                    label: "Lease Terms:",
                    visible: true
                }, {
                    fieldName: 'ForSale',
                    label: 'For Sale:',
                    visible: true
                }, {
                    fieldName: 'SalePrice',
                    label: 'Sale Price:',
                    visible: true
                }, {
                    fieldName: 'Rail',
                    label: 'Railway Access:',
                    visible: true
                }, {
                    fieldName: 'Electric',
                    label: 'Electric at Site:',
                    visible: true
                }, {
                    fieldName: 'Gas',
                    label: 'Gas at Site:',
                    visible: true
                }, {
                    fieldName: 'Sewer',
                    label: 'Sewer at Site:',
                    visible: true
                }, {
                    fieldName: 'Telecom',
                    label: 'Telecom at Site:',
                    visible: true
                }, {
                    fieldName: 'WaterAtSite',
                    label: 'Water at Site:',
                    visible: true
                }, {
                    fieldName: 'URL',
                    label: 'Ohio InSite:',
                    visible: true
                }, {
                    fieldName: 'Lat',
                    label: 'Latitude:',
                    visible: true
                }, {
                    fieldName: 'Long',
                    label: 'Longitude:',
                    visible: true
                }]
            },
            0: {
                title: i18n.identify.apegProperties.riverProperties,
                description: "<center><b>{name}</b><br /></center>" +
                "<center>{address2}<br /></center>" +
                "<center><a href='{RiverLink}' target='_blank'><b>Click for Detailed Site Information</b></a></center>" +
                "<center><img src='{Picture}' width='230' height='180'><br /></center>" +
                "<b><u>Site Summary</b></u><br />" +
                "<b><br>{description}</b><br><br />" +
                "<b>Acreage:</b>  {sitesize}<br />" +
                "<b>Square Footage:</b>  {buildingsize}<br />" +
                "<b>For Sale:</b>  {forsale}<br />" +
                "<b>For Lease:</b>  {forlease}<br /><br />" +
                "<b>River Port on Site:</b>  {DockOnSite}<br />" +
                "<b>Railway Access:</b>  {israil}<br />" +
                "<b>Miles to Highway:</b>  {DistanceHighway}<br />" +
                "<b>Miles to Interstate:</b>  {DistanceInterstate}<br />" +
                "<b>Miles to Airport:</b>  {AirportsDist}<br /><br />" +
                "<b>Electric on Site:</b>  {poweronsite}<br />" +
                "<b>Gas on Site:</b>  {gasonsite}<br />" +
                "<b>Water on Site:</b>  {wateronsite}<br />" +
                "<b>Sewer on Site:</b>  {seweronsite}<br />" +
                "<b>County:</b>  {county}<br />"
            }
        }
    }
};});

In the published service the layer I want to have Popup for were stored in position 0, and 1. I decided to group the two features I intended to show in the Popup (Changing their positions in the published service to 1, and 2). As shown in the code below:

define([
'dojo/i18n!./nls/main',
'dojo/_base/lang'
], function (i18n, lang) {

var linkTemplate = '<a href="{url}" target="_blank">{text}</a>';
function directionsFormatter (noValue, attributes) {
    return lang.replace(linkTemplate, {
        url: 'https://www.google.com/maps/dir/' + attributes.Address + ' Louisville, KY',
        text: 'Get Directions'
    });
}
return {
    map: true,
    mapClickMode: true,
    mapRightClickMenu: true,
    identifyLayerInfos: true,
    identifyTolerance: 5,
    draggable: false,
    /*hideEmptyPopop: false,*/

    // config object definition:
    //  {<layer id>:{
    //      <sub layer number>:{
    //          <pop-up definition, see link below>
    //          }
    //      },
    //  <layer id>:{
    //      <sub layer number>:{
    //          <pop-up definition, see link below>
    //          }
    //      }
    //  }

    // for details on pop-up definition see: https://developers.arcgis.com/javascript/jshelp/intro_popuptemplate.html

    identifies: {
        Properties: {
            2: {
                title: i18n.identify.apegProperties.allProperties,
                fieldInfos: [{
                    fieldName: 'SiteBuildingName',
                    label: 'Name:',
                    visible: true
                }, {
                    fieldName: 'IsBuilding',
                    label: 'Type:',
                    visible: true
                }, {
                    fieldName: 'City',
                    label: "City:",
                    visible: true
                }, {
                    fieldName: 'County',
                    label: 'County:',
                    visible: true
                }, {
                    fieldName: 'DatePropertyIsAvailable',
                    label: 'Availability:',
                    visible: true
                }, {
                    fieldName: 'ForLease',
                    label: 'For Lease:',
                    visible: true
                }, {
                    fieldName: 'LeaseTerms',
                    label: "Lease Terms:",
                    visible: true
                }, {
                    fieldName: 'ForSale',
                    label: 'For Sale:',
                    visible: true
                }, {
                    fieldName: 'SalePrice',
                    label: 'Sale Price:',
                    visible: true
                }, {
                    fieldName: 'Rail',
                    label: 'Railway Access:',
                    visible: true
                }, {
                    fieldName: 'Electric',
                    label: 'Electric at Site:',
                    visible: true
                }, {
                    fieldName: 'Gas',
                    label: 'Gas at Site:',
                    visible: true
                }, {
                    fieldName: 'Sewer',
                    label: 'Sewer at Site:',
                    visible: true
                }, {
                    fieldName: 'Telecom',
                    label: 'Telecom at Site:',
                    visible: true
                }, {
                    fieldName: 'WaterAtSite',
                    label: 'Water at Site:',
                    visible: true
                }, {
                    fieldName: 'URL',
                    label: 'Ohio InSite:',
                    visible: true
                }, {
                    fieldName: 'Lat',
                    label: 'Latitude:',
                    visible: true
                }, {
                    fieldName: 'Long',
                    label: 'Longitude:',
                    visible: true
                }]
            },
            1: {
                title: i18n.identify.apegProperties.riverProperties,
                description: "<center><b>{name}</b><br /></center>" +
                "<center>{address2}<br /></center>" +
                "<center><a href='{RiverLink}' target='_blank'><b>Click for Detailed Site Information</b></a></center>" +
                "<center><img src='{Picture}' width='230' height='180'><br /></center>" +
                "<b><u>Site Summary</b></u><br />" +
                "<b><br>{description}</b><br><br />" +
                "<b>Acreage:</b>  {sitesize}<br />" +
                "<b>Square Footage:</b>  {buildingsize}<br />" +
                "<b>For Sale:</b>  {forsale}<br />" +
                "<b>For Lease:</b>  {forlease}<br /><br />" +
                "<b>River Port on Site:</b>  {DockOnSite}<br />" +
                "<b>Railway Access:</b>  {israil}<br />" +
                "<b>Miles to Highway:</b>  {DistanceHighway}<br />" +
                "<b>Miles to Interstate:</b>  {DistanceInterstate}<br />" +
                "<b>Miles to Airport:</b>  {AirportsDist}<br /><br />" +
                "<b>Electric on Site:</b>  {poweronsite}<br />" +
                "<b>Gas on Site:</b>  {gasonsite}<br />" +
                "<b>Water on Site:</b>  {wateronsite}<br />" +
                "<b>Sewer on Site:</b>  {seweronsite}<br />" +
                "<b>County:</b>  {county}<br />"
            }
        }
    }
};});

The app now is free of error, and everyone thing is functioning as expected. @tmcgee Thanks!!!

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.