topic Re: Programatically add hyperlinks to popup in ArcGIS JavaScript Maps SDK Questions

Programatically add hyperlinks to popup

JeffPace — Wed, 24 Jul 2013 19:48:11 GMT

I am using a popup in a side panel. It is a tabContainer.

I have a details tab which I am writing the content to, works great.

I would like a LINK panel, which contains a number of hyperlinks for each popup item.

How do i attach the hyperlinks to the content? Right now I have a JSON Array of hyperlinks that is generated at the same time as my popup content.

psuedo code


//start loop for each feature

//how do i put these in the popup so i can access them later?
var links = [{link1: 'http://...", link2: 'http://....'}]

//popup content
 var fieldInfos= [];
                    dojo.forEach(fieldNames, function(name){
                        fieldInfos.push({
                            fieldName: name, visible:true
                        });
                    });
                 //   alert(fieldInfos);
                    var g = new esri.Graphic(f.geometry, sym, attrs);
                    g.setInfoTemplate (new esri.dijit.PopupTemplate({
                          title: title,
                          fieldInfos: fieldInfos
                        }));
map.graphics.add(g);
features.push(g);

//end loop

this.popup.setFeatures(features);
this.popup.select(0);

Re: Programatically add hyperlinks to popup

JonathanUihlein — Thu, 25 Jul 2013 17:00:29 GMT

One of these examples should help, although they are non-AMD style.

https://developers.arcgis.com/en/javascript/jssamples/widget_extendInfowindow.html

https://developers.arcgis.com/en/javascript/jssamples/widget_formatInfoWindow.html

https://developers.arcgis.com/en/javascript/jssamples/popup_chart.html

Re: Programatically add hyperlinks to popup

JeffPace — Sat, 11 Dec 2021 21:48:09 GMT

Appreciate the links, but they dont help.

Mainly because they hardcode everything down the to field values

I ended up just appending the links onto the feature as it comes back to the query. Then i loop through and set the links and manually create the dom elements and write them to the links tab.

var links = feature.attributes.links;
                        for (var key in links) {
                          if (links.hasOwnProperty(key)) {
                         if(links[key]){
                            var a = dojo.create('a',{ href: links[key],target:"_blank"}, dojo.byId('resultLinksTab'));
                            var img = dojo.create('img',{ src:"images/"+key+".png"}, a);
                            dojo.addClass(img,'resultLink');
                              }
                          }

Re: Programatically add hyperlinks to popup

NickO_Day — Sat, 11 Dec 2021 21:48:12 GMT

Jeff,
I struggled with this for a while and ended up using some jQuery to convert a raw URL into a simple href on the fly. In the code, I search for all of the elements in a table (td) that start with "http://" and then convert them to an href that shows the user a simple "Click here". It has some downsides, but it works for what we need it to do. Here's the code:

function hrefLinks()
{
    //Grab all TD elements that have http://
    var $tds =  $('td:contains("http://")');
    
    $.each($tds, function(i, td){
        //each returns a raw element, so wrap in jQuery for convenience
        var $td = $(td);
        
        //save original url
        var url = $td.html();
        
        //change TD's HTML
        $td.html('<a href="' + url + '" target="_blank">Click here</a>');
    });
}
function schedule_hrefLinks()
{
    setInterval('hrefLinks();', 200); 
}

schedule_hrefLinks();

Good luck!

Nick

Re: Programatically add hyperlinks to popup

JeffPace — Thu, 25 Jul 2013 19:29:04 GMT

I am pretty surprised that the popup class doesnt support a "hyperlink" data type. Thats the point of gis right? bring data together? Spatial Links?

I have (for example) parcels, which i can generate 5+ hyperlinks on (appraiser, tax collector, permitting, google, document management, etc..) simply with the parcel id.

Oh well, its handled for now.