nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Dynamic Hyperlink In Popups

IsaiahAguilera

I am looking for a way to create a hyperlink from a specific field in the popup when clicking a feature layer. I know that fields containing a url are already click able. But my problem is a little bit different. I would like to create an event of some sort that looks at what the field contains and then directs you to a specified URL that is dependent on the attribute data.

For example if my DISTRICT field says SLD 1 then it directs you to http://google.com when clicked, but if it says SLD 2 then it takes you to http://yahoo.com.
Obviously I wouldn't use those specific URLs but you get the idea. Any help would be appreciated. I also understand that there might not be a quick fix for this but I am prepared for long fixes.

Thank You,

Find more posts tagged with

Accepted answers

rscheitlin

Isaiah,

That would require you to customize the PopUpRenderSkin.mxml from the API. You would add some custom code to the commitProperties function to first check if the fiels name was the one you are looking for and then if so add your html link, like is done in the that function already:

htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";

All comments

IsaiahAguilera

Robert,
Its been a little while since I asked you the question above, but I wanted to see if you could help me with one more thing on this topic. I have had the popups with the links working great for a while now. My question is getting them to work with the search widget. I have been using a few different search widgets including your eSearch widget. But they all seem to do the same thing, even though I am pointing the widget to the PopUpRendererSkin it doesn't seem to convert the specified values into links. I know this probably has something to do with the search widget using the xml to configure its popup but if you could help me out I would be really grateful!

Thanks,

IsaiahAguilera

Thanks Robert! It worked perfectly! Now I just have to learn the regular expression syntax used to match my string fields. I should be able to figure that part out though. Your help is greatly appreciated, as always!

rscheitlin

Isaiah,

You were close but your logic was a little off. Try this (un-Tested):

                var formItem:FormItem = new FormItem();
                formItem.label = fieldInfo.label || fieldInfo.fieldName;
                var label:mx.controls.Label;
                htmlText = formattedAttributes[fieldInfo.fieldName];
                if (htmlText)
                {
                    // convert attribute field values that just contain URLs into links 
                    var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);
//Start My Addition
                    var matchTwo:Array = htmlText.match('GREENBRIAR');
//End My Addition
                    if (match && match.length > 0){
                        label = new mx.controls.Label();
                        htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";
//Start My Addition
                    }else if (matchTwo && matchTwo.length > 0){
                        label = new mx.controls.Label();
                        htmlText = '<a href="http://www.google.com" target="_blank">' + matchTwo + "</a>";
//End My Addition
                    }else{
                        label = new Text();
                    }
                    cleanAndSetHtmlText(label, htmlText);
                    label.selectable = true;
                    label.styleSheet = this.textStyleSheet;
                    label.width = 350; 
                    formItem.addChild(label); 
                }
                                
                descriptionForm.addChild(formItem);
            }
        }
    }

IsaiahAguilera

Awesome thanks Robert!
I got it working pretty quickly but I am having a few issues. As soon as I add another variable under the "match" variable my popups have duplicates fields all the way down. Both fields are changed to URLs and work properly but I have duplicates now. For example if my popup used to have a field that was "District: SLD 1" Now it says "District: SLD1" with another "SLD 1" directly under it but it does that with every field in the popup click able or not. If I delete my code additions or the original var that looks for the URL field it all works. It has something to do with me copying the original and then filling in what I needed. I must have missed something. If you could take a look at it I would appreciate it. I would like to be able to add numerous variables that I can use for multiple fields. I have included some of the code I was messing with for you to look at.

Thanks!

  var formItem:FormItem = new FormItem();
    formItem.label = fieldInfo.label || fieldInfo.fieldName;
    var label:mx.controls.Label;
    htmlText = formattedAttributes[fieldInfo.fieldName];
    if (htmlText)
    {
     // convert attribute field values that just contain URLs into links 
      var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);
     if (match && match.length > 0)
     {
      label = new mx.controls.Label();
      htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";
     }
     else
     {
      label = new Text();
     }
     cleanAndSetHtmlText(label, htmlText);
     label.selectable = true;
     label.styleSheet = this.textStyleSheet;
     label.width = 350; 
     formItem.addChild(label); 
        
   //my additions  
     var matchTwo:Array = htmlText.match('GREENBRIAR');
     if (matchTwo && matchTwo.length > 0)
     {
      label = new mx.controls.Label();
      htmlText = '<a href="http://www.google.com" target="_blank">' + matchTwo + "</a>";
     }
     else
     {
      label = new Text();
     }
     cleanAndSetHtmlText(label, htmlText);
     label.selectable = true;
     label.styleSheet = this.textStyleSheet;
     label.width = 350;
     formItem.addChild(label);
   //end my additions
   }
        
    descriptionForm.addChild(formItem);
   }
  }
 }

rscheitlin

htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.