Is it possible to access ArcMap's HTML popup from the JS API?

StephenLead

In ArcMap, you can configure an HTML Popup for a layer.

Can we access this in ArcGIS Server using the JS API? Or do we need to build our own version of this using an infoWindow or (JS API) popup dijit?

The sample ArcGIS Server lists:

HTML Popup Type: esriServerHTMLPopupTypeNone

which implies that the HTML popup is carried through to ArcGIS Server.

Thanks,
Steve

AlexDeVine

Hi Kelly,

I used the sample you provided in this thread and tried to combine it with another sample from the API reference page Display Identify Results in Popup. When I try to run updatePopup in the switch function, it throws back an error "TypeError: Cannot read property 'url' of null {}" which seems to be saying to me that the graphic does not exist. I am very confused and if you could look over my code and perhaps see where I am going wrong, I would appreciate it.

       //Set templates up for sustainability infowindows
        sustaintemplate = new esri.InfoTemplate();


        //Set infoTemplates for sustainability layers
        setSustainInfoTemplates();

        function setSustainInfoTemplates() {
            for (var j = 0; j < featureLayers.length; j++) {
                featureLayers.setInfoTemplate(sustaintemplate);
            }
        }

     }

     function mapReady(map) {
         map.infoWindow.resize(400, 430);   

         dojo.connect(map, "onClick", executeIdentifyTask);

         identifyTask1 = new esri.tasks.IdentifyTask("http://falcon.camplan.uga.edu/OUAGISSERVER/rest/services/UGA_SustainBase/MapServer");

         identifyParams1 = new esri.tasks.IdentifyParameters();
         identifyParams1.tolerance = 5;
         identifyParams1.returnGeometry = true;
         identifyParams1.layerIds = [0,1,2,3,4,5,6,7,8,9,10,12,14];
         identifyParams1.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
         identifyParams1.width = map.width;
         identifyParams1.height = map.height;

         //resize the map when the browser resizes
         dojo.connect(dijit.byId('map'), 'resize', map, map.resize);      
     }

     function executeIdentifyTask(evt) {
         //create identify task and setup parameters
         identifyParams1.geometry = evt.mapPoint;
         identifyParams1.mapExtent = map.extent;

         var deferred1 = identifyTask1.execute(identifyParams1);

         deferred1.addCallback(function (response) {
             // response is an array of identify result objects    
             // Let's return an array of features.
             return dojo.map(response, function (result) {
                var feature = result.feature;
                feature.attributes.layerName = result.layerName;
                switch(result.layerName){
                case 'UGA Buildings': 
                    alert("UGA Buildings!!");
                    var template = new esri.InfoTemplate();
                    feature.setInfoTemplate(template);
                    break;
                case 'Road Names':
                    alert("Road Names!!");
                    var template = new esri.InfoTemplate();
                    feature.setInfoTemplate(template);
                    break;
                case 'Cisterns_Point':
                    alert("Cisterns!!");
                    var sustaintemplate = new esri.InfoTemplate();
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    feature.setInfoTemplate(sustaintemplate);
                    break;
                case 'DinHall_Point':
                    alert("DinHall!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'GrRoofs_Point':
                    alert("Grroofs!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'HistBuild_Point':
                    alert("Histbuild!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'LEED_Point':
                    alert("LEED!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'Prod_Point':
                    alert("Prod!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'Retail_Point':
                    alert("Retail!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'StrRest_Point':
                    alert("Strrest!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'SusBuild_Point':
                    alert("Susbuild!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'RainGardens':
                    alert("Raingar!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                case 'PorPave_Point':
                    alert("PorPave!!");
                    sustaintemplate.setTitle("<b>UGA Sustainability Info</b>");
                    sustaintemplate.setContent(updatePopup);
                    break;
                }
                 return feature;
             });
         });

         // InfoWindow expects an array of features from each deferred
         // object that you pass. If the response from the task execution 
         // above is not an array of features, then you need to add a callback
         // like the one above to post-process the response and return an
         // array of features.
         map.infoWindow.setFeatures([deferred1]);
         map.infoWindow.show(evt.mapPoint);


     }

     function updatePopup(graphic) {

         var deferred = new dojo.Deferred();
         var url = graphic.getLayer().url + "/" + graphic.attributes.OBJECTID + "/htmlPopup?f=json";
         esri.request({
             url: url,
             content: url.query,
             callbackParamName: "callback",
             load: function (response) {
                 //esriServerHTMLPopupTypeAsURL
                 deferred.callback("<iframe src='" + response.content + "' frameborder='0' width='100%' height='100%' style='width: 100%; height: 100%; display: block; padding: 0px; margin: 0px;'></iframe>");

             },
             error: function (error) {
                 deferred.errback("Error occurred while generating profile");
             }
         });
         console.log(url);
         return deferred;
         return requestHandle;

     }

Thank you,

Alex