Identify ??? Popup sample: Customize for hyperlink

[JanBenson]

I am trying to customize the Identify �?? Popup sample (under Find and Identify) from samples at http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm?Legend such that a hyperlink is enabled from the field name.  At present the hyperlink appears in the window, but it is not clickable.  I would like to instead have an alias name for the hyperlink.  When a user clicks on the name the hyperlink is activated.   In the function executeIdentifyTask (evt)  { there is an else if statement

else if (result.layerName === 'Building Footprints'){
              var template = new esri.InfoTemplate("", "Parcel ID: ${PARCELID}");
              feature.setInfoTemplate(template);

I am presuming PARCELID if the field name.  How would I make PARCELID as a clickable hyperlink?  Is there a way to put an alias name on PARCELID so the user would see somethink like URL or Link that would be clickable?

Thanks for any suggestions.

[KellyHutchins]

If the field contains a url you should just have to specify the field name when you define the popup template. For example in the code below a field named WEB contains a hyperlink.

        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{EVENT}",
          fieldInfos: [
          {fieldName: "EFFECTIVE", visible: true, label:"Effective"},
          {fieldName: "WEB", visible:true, label:"Link"}
          ],
          showAttachments:false
        });
  
        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_weat/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate: popupTemplate,
          outFields: ['*']
        });
       

When you view the popup you'll see a clickable link that says 'More Info' and takes you to the url defined in the WEB field.  Here's a link so you can see this in action:
http://jsfiddle.net/khutchins/bTZwR/

[BulbulMajumder1]

@Kelly can  you help me please why this is not working ? Adding hyperlink in popup template for JS API 4.8

{
fieldName: "Report",
label: "Report",
Link :"href='http://data.mbmg.mtech.edu/proppant/Report.asp?SampleId=${SampleId}&reqby=M&'",
visible: true
},

[BulbulMajumder1]

Kelly Hutchins now it works in this way....I watched your Making Popups video...It helped.

var template = { // autocasts as new PopupTemplate()
title: "SNaP Record {SampleId}",
content: "<table>" + "<tr valign='top'><td style='white-space:nowrap;'>Sample Name</td><td>{SampleName}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Report</td><td><a target='_newwellwin' href='http://data.mbmg.mtech.edu/proppant/Report.asp?SampleId=${SampleId}&reqby=M&'>View</a></td></tr>" +
"<tr><td style='white-space:nowrap;'>Elevation</td><td style='white-space:nowrap;'>{Elevation}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>{Township} {Range} {Section} {QSection}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Lat/Long</td><td>{Latitude}, {Longitude}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Sampled?</td><td>{SampleTaken}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Sample Date</td><td>{SampleDate}</td></tr>" +
"</table>"
};

Thank you for your elaborate Video demonstration.
Regards
Bulbul

[JanBenson]

Kelly,

  Thanks for your reply.  I saw your popup sample, but it uses a single feature layer.  In my map I will have points, lines, and polygon features.  The Identify-Popup allows for multiple features.  When I adapted the sample to my data, the hyperlink appears are regular text instead of a hyperlink (see IdentifyPopup.jpg).  I listed some of my code below.  I think the trick is to configure the InfoTemplate (var template = new esri.InfoTemplate("", "${Name} <br/> URL: ${Link}"); ) for my hyperlink.  I just don�??t know how to make it work.

    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.form.DropDownButton");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Bookmarks");      
      dojo.require("dijit.form.Button");
      dojo.require("dijit.Dialog");
      dojo.require("dijit.form.TextBox");
      dojo.require("esri.dijit.Popup");

      var map, bookmarks;
var resizeTimer;
      var identifyTask,identifyParams;

      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-23034069,"ymin":5700229,"xmax":-14357334,"ymax":13000000,"spatialReference":{"wkid":102100}});
       
   //setup the popup window 
        var popup = new esri.dijit.Popup({
          fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
        }, dojo.create("div"));

          map = new esri.Map("map", {
          infoWindow : popup, wrapAround180: true,extent: initialExtent
        }) ;

        // Resize the map when the browser resizes
        dojo.connect(map, 'onLoad', function() {
          dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
        });
 
     dojo.connect(map,"onLoad",mapReady);

        var url = "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
        var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
        map.addLayer(tiledLayer);
  var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxx/arcgis/rest/services/WebDemo101C/MapServer");
  map.addLayer(operationalLayer);

        // Bookmarks can be specified as an array of objects with the structure:
        // { extent: <esri.geometry.Extent>, name: <some string> }
        var bookmarks = [{
          "extent": {
            "spatialReference": {
                "wkid": 102100
            },
            "xmin":-20300897,
            "ymin":9822391,
            "xmax":-15056706,
            "ymax":13344609
          },
          "name": "Arctic" 
        }];

        // Create the bookmark widget
        bookmarks = new esri.dijit.Bookmarks({
          map: map, 
          bookmarks: bookmarks
        }, dojo.byId('bookmarks'));                     
      }
  
  function mapReady(map){

       dojo.connect(map,"onClick",executeIdentifyTask);
       
       //create identify tasks and setup parameters 
       identifyTask = new esri.tasks.IdentifyTask("http://localhost:6080/arcgis/rest/services/WebDemo101C/MapServer");
       
       identifyParams = new esri.tasks.IdentifyParameters();
       identifyParams.tolerance = 3;
       identifyParams.returnGeometry = true;
       identifyParams.layerIds = [0,1,2,3,4];
       identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
       identifyParams.width  = map.width;
       identifyParams.height = map.height;
       
       
       //resize the map when the browser resizes
       dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
  
      }
      
   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 === 'AllPoints'){
              console.log(feature.attributes.Name);
              var template = new esri.InfoTemplate("", "${Name} <br/> URL: ${Link}");
              feature.setInfoTemplate(template);
            }
            else if (result.layerName === 'FishCommunitiesProfile'){
              var template = new esri.InfoTemplate("", "${Name} <br/> URL: ${Link}");
              feature.setInfoTemplate(template);
            }   
            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([ deferred ]);
        map.infoWindow.show(evt.mapPoint);
      }
      //show map on load 
      dojo.ready(init);
    </script>

[JeffPace]

you are using esri.InfoTemplate

you need to use esri.dijit.PopupTemplate as per the example above

[JanBenson]

Jeff,

Thanks for the reply.  Will esri.dijit.PopupTemplate cycle through multiple found items or are you limited to one theme?  I have multiple layers I want the identify to act upon.  The Identify-Popup sample I found lets you use multiple layers through an if statement.  The popup window has an arrow to cycle through the items found at the identified location.  In the sample I am using (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm) under Find and Identify, Identify-Popup, esri.dijit.Popup is used as opposed to esri.dijit.PopupTemplate.  It is working great except for the hyperlink.  I hope it is a formatting problem combined with my lack of knowledge in this area.

Thanks!

[KellyHutchins]

Jan,

When you create the template for the popup you can define a function that will be used to create and format the content. So in this snippet instead of setting the content when you create the info template you specify the name of a function in setContent. In this example the function is called getWindowContent.

   
var template = new esri.InfoTemplate();
    template.setTitle("Advisories");
    template.setContent(getWindowContent);
    // var template = new esri.InfoTemplate("", "Parcel ID: ${PARCELID}");
    feature.setInfoTemplate(template);
  }

In the getWindowContent function you are provided the graphic that was just clicked. You can then access the graphic's attributes and build the hyperlink.

      function getWindowContent(graphic){
        var content = "<a href='" + graphic.attributes.WEB + "'>Click here for more info</a>";
        return content;
      }

Here's a working sample:

http://jsfiddle.net/bTZwR/2/

[JanBenson]

Kelly,

  Thanks so much for your suggestion.  I got it to work and am now am ready to move to the next step.  I did this by using a series of if statements to process the multiple layers.  It looks like this:
            if(result.layerName === 'AllPoints'){
     var template = new esri.InfoTemplate();
              template.setTitle("Name");
              template.setContent(getWindowContent);      
              feature.setInfoTemplate(template);
            }
            else if (result.layerName === 'FishCommunitiesProfile'){
              var template = new esri.InfoTemplate();                  
              template.setTitle("Name");
              template.setContent(getWindowContent);
              feature.setInfoTemplate(template);

Then I have the function as follows:
       function getWindowContent(graphic){
   var content = "Name: " + graphic.attributes.Name + "<br>" + "<a href='" + graphic.attributes.Link + "'>URL Link</a>";  
         return content;
      }

It is working nicely.  I really do appreciate the help.

Cheers,

[ChrisBrannin]

I am a newbi here with javascript. I am asking for some help with adding multiple featurelayers that connect to a legend, can be toggled on and off and all have popups. I am using this code but it doesn't seem to work with the legend and checkbox dijit. Any help would be greatly appreciated!

var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{Building} {Type}",
          fieldInfos: [
          {fieldName: "Building", visible: true, label:"Building Name:"},
          {fieldName: "Descrip", visible:true, label:"Info:"},
          ],

  mediaInfos: [
    {
      "type":"image",
      "value":{
          "sourceURL":"{Images}",
          "linkURL":"{Hyperlink}"
    }
    }] 
          
        });
 
        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://webgis.uwm.edu/ArcGISUWM/rest/services/Sustain1/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: popupTemplate,
          outFields: ['Type','Building','Descrip','Images','Hyperlink']
        });
        featureLayer.setDefinitionExpression("Type != ''");
      
        dojo.connect(featureLayer,"onClick",function(evt){
           map.infoWindow.setFeatures([evt.graphic]);
        });
       
       
        map.addLayer(featureLayer);