InfoTemplate

[NicholasKnabe]

I have a popup window for my ID function, but for each different layer it has different attribute fields. I have it set up for each feature it returns all fields using ${*}.

Now my question is I have one of the attribute fields which contains a youtube link. I cannot find anywhere how to code in a src for a hyperlink inside the popup window?

Next another one of my features has attachments. How can I access though attachments and then show them in another tab?

Thanks.

Slowing getting everything together just trying to show this hyperlink and the pictures

[JonathanUihlein]

Hello!

You should be able to use HTML-based syntax inside an InfoWindow using InfoTemplate and the setContent() method.

Can you post a code sample or recreate both issues using http://jsfiddle.net/

Thanks and good luck!

[NicholasKnabe]

Here is some code I have a couple of my features set up differently some manually inputting the fields and then some with the ${*}

 function mapReady(map) {
              dojo.connect(map, "onClick", executeIdentifyTask);
              //create identify tasks and setup parameters 
              identifyTask = new esri.tasks.IdentifyTask("http://maps101.gis.halff.com/ladon/rest/services/Lubbock/LubbockCCTVAssets/MapServer/");
              identifyParams = new esri.tasks.IdentifyParameters();
              identifyParams.tolerance = 3;
              identifyParams.returnGeometry = true;
              identifyParams.layerIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];
              identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
              identifyParams.width = map.width;
              identifyParams.height = map.height;

          }


          function executeIdentifyTask(evt) {
              identifyParams.geometry = evt.mapPoint;
              identifyParams.mapExtent = map.extent;
              var deferred = identifyTask.execute(identifyParams);

              deferred.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;
                      
                      if (result.layerName === 'Survey Points') {
                          console.log(feature.attributes.OBJECTID);
                          var template = new esri.InfoTemplate("Survey Points", "<br/> Unique ID: ${UNIQUE_ID}<br/> X Coord: ${X_COORD}<br/> Y Coord: ${Y_COORD}<br/> Z Coord: ${Z_COORD}<br/> Type:${Type}<br/> Status: ${Status}<br/> Data Source: ${DATA_SOURCE}<br/> Shape: ${SHAPE}<br/> Survey Date: ${SURVEY_DATE}<br/>Alternate Name: ${ALT_NAME}");
                          

                          feature.setInfoTemplate(template);
                          
                      }
                      else if (result.layerName === 'CCTV Observations') {
                          var template = new esri.InfoTemplate("CCTV Observations", "<br/> CCTV Route: ${CCTV_ROUTE}<br/> CCTV Distance: ${CCTV_DISTANCE}<br/> CCTV Code: ${CCTV_CODE}<br/> CCTV Value Percent: ${CCTV_VALUE_PERCENT}<br/> CCTV Clock From: ${CCTV_CLOCK_FROM}<br/> CCTV Clock To: ${CCTV_CLOCK_TO}<br/> CCTV Grade: ${CCTV_GRADE} <br/>CCTV Continuous: ${CCTV_CONTINUOUS}<br/> CCTV Observation Type:${CCTV_OBS_TYPE}<br/> CCTV Observation:${CCTV_OBSERVATION}<br/> CCTV Remark:${CCTV_REMARK} <br/>Shape:${SHAPE}<br/> CCTV Attachment:${CCTV_Attach}");
                          feature.setInfoTemplate(template);
                      }

                      else if (result.layerName === 'Manholes') {
                          var template = new esri.InfoTemplate("Manholes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Inlets') {
                          var template = new esri.InfoTemplate("Inlets", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Infalls') {
                          var template = new esri.InfoTemplate("Infalls", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Outfalls') {
                          var template = new esri.InfoTemplate("Outfalls", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Channel Features') {
                          var template = new esri.InfoTemplate("Channel Features", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Pipe Features') {
                          var template = new esri.InfoTemplate("Pipe Features", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Playa Centroids') {
                          var template = new esri.InfoTemplate("Playa Centroids", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Pipes') {
                          var template = new esri.InfoTemplate("Pipes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Flumes') {
                          var template = new esri.InfoTemplate("Flumes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Dams') {
                          var template = new esri.InfoTemplate("Dams", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Channels') {
                          var template = new esri.InfoTemplate("Channels", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'CCTV Routes') {
                          var template = new esri.InfoTemplate("CCTV Routes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Virtual Links') {
                          var template = new esri.InfoTemplate("Virtual Links", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Stormwater Systems') {
                          var template = new esri.InfoTemplate("Stormwater Systems", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Asset Footprints') {
                          var template = new esri.InfoTemplate("Asset Footprints", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      else if (result.layerName === 'Playa Lakes') {
                          var template = new esri.InfoTemplate("Playa Lakes", "${*}")
                          feature.setInfoTemplate(template);
                      }
                      map.infoWindow.setFeatures([deferred]);
                      map.infoWindow.show(evt.mapPoint);
                      return feature;
                  });
              });

             
            
          }

[ReneRubalcava]

I did a write-up on this recently, but here is the fiddle showing a utility module that can help you define fields to show and define URL fields.
http://jsfiddle.net/odoe/PDr7p/1/

Here is a gist of the code that does the work used in the fiddle
https://gist.github.com/odoe/5800348

It basically lets you pass a urlField and urlPrefix to create a hyperlink.

[NicholasKnabe]

I guess I am just confused about applying it to my already working info popup because each different feature has different attribute fields and all the examples I have seen is just one feature or multiple features with the same attributes.

[Hernando_CountyProperty_Apprai]

Hi Nicolas.  Did you ever get an answer to the attachment part of your question?  I have an info window very similar to yours where the user can click on the map and have several things identified.  But there are some feature classes that have attachments that I would like to be able to show.