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 Hyperlinks Within Search Widget Popups

IsaiahAguilera

After editing the PopUpRendererSkin I have been able to have my popups listen for a specified attribute value and make them a click able hyperlink (even if the field itself is not a URL). 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 the 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 any body could help me out I would be really grateful!

Thanks,

Vind meer berichten getagd met

Accepted answers

RobertScheitlin__GISP

Isaiah,

Well after looking into it deeper we can do all you need in just the PopUpRendererSkin.mxml. So here are the changes.

            override protected function commitProperties():void             {                 super.commitProperties();                  var featureLayer:FeatureLayer = hostComponent.featureLayer;                 var formattedAttributes:Object = hostComponent.formattedAttributes;                 var graphic:Graphic = hostComponent.graphic;                 var map:Map = hostComponent.map;                 var popUpInfo:PopUpInfo = hostComponent.popUpInfo;                 var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;                 var geometry:Geometry = graphic ? graphic.geometry : null;                 var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;                  vGroup.removeAllElements();                 //vGroup.addElement(ToggleLayers);                 if (popUpInfo)                 {                     if (popUpInfo.title)                     {                         titleText.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);                         if (titleText.text)                         {                             vGroup.addElement(titleText);                             vGroup.addElement(titleLine);                         }                     }                      var htmlText:String;                     if (popUpInfo.description)                     {                         htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);                         if (htmlText)                         { //Code Addition                             htmlText = replaceIsaiahsContent(htmlText); //End Code Addition                             var descriptionText:Text = new PopUpText();                             descriptionText.percentWidth = 100;                             descriptionText.styleSheet = textStyleSheet;                                                          cleanAndSetHtmlText(descriptionText, htmlText);                             //trace(descriptionText.htmlText);                             vGroup.addElement(descriptionText);                         }                     }                     else                     {                         var descriptionForm:Form;                         for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)                         {                             if (fieldInfo.visible)                             {                                 var formItem:FormItem = new FormItem();                                 formItem.label = fieldInfo.label || fieldInfo.fieldName;                                                                  var label: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 Label();                                         htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";                                     }                                     else                                     {                                         label = new PopUpText();                                     }                                     cleanAndSetHtmlText(label, htmlText);                                     label.selectable = true;                                     label.styleSheet = this.textStyleSheet;                                     label.width = 150;                                     formItem.addChild(label);                                 }                                 if (!descriptionForm)                                 {                                     descriptionForm = new Form();                                     descriptionForm.percentWidth = 100;                                     descriptionForm.horizontalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.verticalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.styleName = "formStyle";                                 }                                 descriptionForm.addChild(formItem);                             }                         }                         if (descriptionForm)                         {                             vGroup.addElement(descriptionForm);                         }                     }                      if (validMediaInfos && validMediaInfos.length > 0)                     {                         vGroup.addElement(mediaBrowser);                         mediaBrowser.attributes = graphic.attributes;                         mediaBrowser.formattedAttributes = formattedAttributes;                         mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;                         mediaBrowser.popUpMediaInfos = validMediaInfos;                     }                      if (popUpInfo.showAttachments && graphic && featureLayer                         && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)                     {                         vGroup.addElement(attachmentInspector);                         attachmentInspector.showAttachments(graphic, featureLayer);                     }                      if (map && geometry)                     {                         vGroup.addElement(zoomToButton);                     }                 }             }  //Code Addition             private function replaceIsaiahsContent(content:String):String             {                 content = content.replace("LMD 1","<a href='http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp' target='_blank'><b>LMD 1</b></a>");                 content = content.replace("LMD 2","<a href='http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/2.asp' target='_blank'><b>LMD 2</b></a>");                 content = content.replace("LMD 1, LMD 5","<a href='http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp' target='_blank'><b>LMD 1</b></a>");                 return content;             } //End Code Addition

All comments

IsaiahAguilera

Robert,
I have input your additions and it is now working beautifully! I still have to input the rest of my match fields but I don't see any problems coming up. I will let you know how it turns out. I really appreciate you taking the time to look into this further for me.

Thanks,

RobertScheitlin__GISP

Isaiah,

Well after looking into it deeper we can do all you need in just the PopUpRendererSkin.mxml. So here are the changes.

            override protected function commitProperties():void             {                 super.commitProperties();                  var featureLayer:FeatureLayer = hostComponent.featureLayer;                 var formattedAttributes:Object = hostComponent.formattedAttributes;                 var graphic:Graphic = hostComponent.graphic;                 var map:Map = hostComponent.map;                 var popUpInfo:PopUpInfo = hostComponent.popUpInfo;                 var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;                 var geometry:Geometry = graphic ? graphic.geometry : null;                 var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;                  vGroup.removeAllElements();                 //vGroup.addElement(ToggleLayers);                 if (popUpInfo)                 {                     if (popUpInfo.title)                     {                         titleText.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);                         if (titleText.text)                         {                             vGroup.addElement(titleText);                             vGroup.addElement(titleLine);                         }                     }                      var htmlText:String;                     if (popUpInfo.description)                     {                         htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);                         if (htmlText)                         { //Code Addition                             htmlText = replaceIsaiahsContent(htmlText); //End Code Addition                             var descriptionText:Text = new PopUpText();                             descriptionText.percentWidth = 100;                             descriptionText.styleSheet = textStyleSheet;                                                          cleanAndSetHtmlText(descriptionText, htmlText);                             //trace(descriptionText.htmlText);                             vGroup.addElement(descriptionText);                         }                     }                     else                     {                         var descriptionForm:Form;                         for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)                         {                             if (fieldInfo.visible)                             {                                 var formItem:FormItem = new FormItem();                                 formItem.label = fieldInfo.label || fieldInfo.fieldName;                                                                  var label: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 Label();                                         htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";                                     }                                     else                                     {                                         label = new PopUpText();                                     }                                     cleanAndSetHtmlText(label, htmlText);                                     label.selectable = true;                                     label.styleSheet = this.textStyleSheet;                                     label.width = 150;                                     formItem.addChild(label);                                 }                                 if (!descriptionForm)                                 {                                     descriptionForm = new Form();                                     descriptionForm.percentWidth = 100;                                     descriptionForm.horizontalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.verticalScrollPolicy = ScrollPolicy.OFF;                                     descriptionForm.styleName = "formStyle";                                 }                                 descriptionForm.addChild(formItem);                             }                         }                         if (descriptionForm)                         {                             vGroup.addElement(descriptionForm);                         }                     }                      if (validMediaInfos && validMediaInfos.length > 0)                     {                         vGroup.addElement(mediaBrowser);                         mediaBrowser.attributes = graphic.attributes;                         mediaBrowser.formattedAttributes = formattedAttributes;                         mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;                         mediaBrowser.popUpMediaInfos = validMediaInfos;                     }                      if (popUpInfo.showAttachments && graphic && featureLayer                         && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)                     {                         vGroup.addElement(attachmentInspector);                         attachmentInspector.showAttachments(graphic, featureLayer);                     }                      if (map && geometry)                     {                         vGroup.addElement(zoomToButton);                     }                 }             }  //Code Addition             private function replaceIsaiahsContent(content:String):String             {                 content = content.replace("LMD 1","<a href='http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp' target='_blank'><b>LMD 1</b></a>");                 content = content.replace("LMD 2","<a href='http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/2.asp' target='_blank'><b>LMD 2</b></a>");                 content = content.replace("LMD 1, LMD 5","<a href='http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp' target='_blank'><b>LMD 1</b></a>");                 return content;             } //End Code Addition

IsaiahAguilera

I have over 50 variables in the skin. But if you could show me one or two then I will probably be able to take it from there. All I want to do is to have the popup turn a specified string into a clickable link. The skin used flex regular expression to match the strings and then converted them to a hyperlink. I have attached a picture that shows what the popups does (notice the CFD, SLD, LMD fields) .
[ATTACH=CONFIG]12382[/ATTACH]

I want to do the same exact thing for the popups in the search widget. So the end result is if I have the field turned on in the xml then those fields will be links as well. Here are three of the values that I am searching for as well as the urls I'm using.

var match:Array = htmlText.match(/^\s*((https?|ftp):\/\/\S+)\s*$/i);

var matchTwo:Array = htmlText.match("LMD 1");
         
var match3:Array = htmlText.match("LMD 2");

var match24:Array = htmlText.match("LMD 1, LMD 5");

if (match && match.length > 0)
{
     label = new mx.controls.Label();
     htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";
          
} else if (matchTwo && matchTwo.length > 0){
 label = new mx.controls.Label();
 htmlText = '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp" target="_blank">' + '<b>LMD 1</b>' + "</a>";
}else if (match3 && match3.length > 0){
 label = new mx.controls.Label();
 htmlText = '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/2.asp" target="_blank">' + '<b>LMD 2</b>' + "</a>";
}else if (match24 && match24.length > 0){
 label = new mx.controls.Label();
 htmlText = '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp" target="_blank">' + '<b>LMD 1</b>' + '</a>' + ' ' + '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/5.asp" target="_blank">' + '<b>LMD 5</b>' + "</a>";
}

I figured I would just show the code to make it easier. If it helps, one of the fields that contains these values is "LMD_NAME"

All possible values:
LMD 1
LMD 2
LMD 3A
LMD 3B
LMD 4-R
LMD 5
LMD 6-R
LMD 7
LMD 8
LMD 9
LMD 10
LMD 1, LMD 5
LMD 3A, LMD 3B

I'm sorry for the inconvenience, usually I can figure this stuff out myself without further instructions. Thank you for all of your help!

screenshotkj3.jpg

NoClipToShape.jpg

RobertScheitlin__GISP

Isaiah,

OK I need all the EXACT specific info for what you are attempting then. What field are you looking for what Values can I expect from those fields and what URLs do I replace them with.

IsaiahAguilera

Andrea,
Unfortunately no I haven't been able to get this functionality working within the search widget popups. It is working wonderfully within the independent popups. But I might lack the programming skills to get this to work. I am still rather dependent on looking at examples and then just manipulating the code. This might take a little bit more than that. If you would like you can grab the skin I modified, its in one of the above posts to Robert. Hopefully Robert will be able to help me some more.

Robert, I am having a hard time making this work. I have looked the createSearchResults function up and down but its probably my lack of flex knowledge that is preventing me from making the necessary additions to the widget. I am not sure where within that function I am supposed to add those match variables, or how to make them work outside of the PopUpRendererSkin all together. Any help you would be willing to provide would be greatly appreciated.

Thanks,

AndreaGrygo

Isaiah,

I am trying to accomplish a slightly similar result to what you have done with the PopUps and the Search Widget. Were you able to get the result you were after for the Search Widget?

Thank you!

RobertScheitlin__GISP

Isaiah,

Yes.

When you said to use the createSearchResults function did you mean try adding the same kind of match variable to that function as I did in the skin. That way the html going to the popUpInfo.description would be formatted into a link.

That is exactly the approach you need to take. When you find your field you need to add text like this:

<br/><a href='yourURL'>" + linkText + "</a>

IsaiahAguilera

Ive spent a good bit of the day looking at the code and I keep wanting to try and change something in the cofigurePopUpInfo function. When you said to use the createSearchResults function did you mean try adding the same kind of match variable to that function as I did in the skin. That way the html going to the popUpInfo.description would be formatted into a link. Or I am completely off on what you were saying. Im probably pretty confused on how to do this because asking this question is even confusing me. Sorry about that.

RobertScheitlin__GISP

Isaiah,

So the issue is going to be how the Search widget submits the data to the popup. The way you were handling the code before was depending on each field coming from the popUpInfo.popUpFieldInfos and the Search Widget just has on HTML string going to the popUpInfo.description. So you might have to handle your code in the createSearchResults function instead.

IsaiahAguilera

After adding some breakpoints it looks like the popupskin is getting accessed. I added a break point around my additions as well and it seems that it is hitting the break points all the way up to the red text, anything after the red text doesnt trigger any break points. (Note:The red text itself is triggering) (Another Note: I had to remove most of my variables that are looking for the text for this post, it was too long. I have also attached the whole file just in case.)

override protected function commitProperties():void
   {
    super.commitProperties();
    
    var featureLayer:FeatureLayer = hostComponent.featureLayer;
    var formattedAttributes:Object = hostComponent.formattedAttributes;
    var graphic:Graphic = hostComponent.graphic;
    var map:Map = hostComponent.map;
    var popUpInfo:PopUpInfo = hostComponent.popUpInfo;
    var validMediaInfos:Array = hostComponent.validPopUpMediaInfos;
    var geometry:Geometry = graphic ? graphic.geometry : null;
    var layerDetails:LayerDetails = featureLayer ? featureLayer.layerDetails : null;
    
    vGroup.removeAllElements();
    if (popUpInfo)
    {
     if (popUpInfo.title)
     {
      titleLabel.text = StringUtil.substitute(popUpInfo.title, formattedAttributes);
      if (titleLabel.text)
      {
       vGroup.addElement(titleLabel);
       vGroup.addElement(titleLine);
      }
     }
     
     var htmlText:String;
     if (popUpInfo.description)
     {
      htmlText = StringUtil.substitute(popUpInfo.description, formattedAttributes);
      if (htmlText)
      {
       cleanAndSetHtmlText(descriptionText, htmlText);
       vGroup.addElement(descriptionText);
      }
//Fix for the 2.3.x popup text color bug RJS
      descriptionText.styleSheet = textStyleSheet;
     }
     else
     {
      vGroup.addElement(descriptionForm);
      descriptionForm.removeAllChildren();
      for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)
      {
       if (fieldInfo.visible)
       {
        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);
         //convert attribute field values that contain specified values into links
         var match24:Array = htmlText.match("LMD 1, LMD 5");
         
         var match25:Array = htmlText.match("LMD 3A, LMD 3B");
         
         var matchTwo:Array = htmlText.match("LMD 1");
         
         var match3:Array = htmlText.match("LMD 2");
                                       
         if (match && match.length > 0)
         {
          label = new mx.controls.Label();
          htmlText = '<a href="' + match[1] + '" target="_blank">' + match[1] + "</a>";
          
         } else if (match24 && match24.length > 0){
          label = new mx.controls.Label();
          htmlText = '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp" target="_blank">' + '<b>LMD 1</b>' + '</a>' + ' ' + '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/5.asp" target="_blank">' + '<b>LMD 5</b>' + "</a>";
         }else if (match25 && match25.length > 0){
          label = new mx.controls.Label();
          htmlText = '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/3A.asp" target="_blank">' + '<b>LMD 3A</b>' + '</a>' + ' ' + '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/3B.asp" target="_blank">' + '<b>LMD 3B</b>' + "</a>";
         }else if (matchTwo && matchTwo.length > 0){
          label = new mx.controls.Label();
          htmlText = '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/1.asp" target="_blank">' + '<b>LMD 1</b>' + "</a>";
         }else if (match3 && match3.length > 0){
          label = new mx.controls.Label();
          htmlText = '<a href="http://www.cityofrc.us/cityhall/admin/gis/districts/landscape/2.asp" target="_blank">' + '<b>LMD 2</b>' + "</a>";
         }else{
          label = new Text();
         }
         cleanAndSetHtmlText(label, htmlText);
         label.selectable = true;
         label.styleSheet = this.textStyleSheet;
         label.width = 350; 
         formItem.addChild(label); 
       }
        
        descriptionForm.addChild(formItem);
       }
      }
     }
     
     if (validMediaInfos && validMediaInfos.length > 0)
     {
      vGroup.addElement(mediaBrowser);
      mediaBrowser.attributes = graphic.attributes;
      mediaBrowser.formattedAttributes = formattedAttributes;
      mediaBrowser.popUpFieldInfos = popUpInfo.popUpFieldInfos;
      mediaBrowser.popUpMediaInfos = validMediaInfos;
     }
     
     if (popUpInfo.showAttachments && graphic && featureLayer
      && layerDetails && layerDetails.hasAttachments && layerDetails.objectIdField)
     {
      vGroup.addElement(attachmentInspector);
      attachmentInspector.showAttachments(graphic, featureLayer);
     }
     
     if (map && geometry)
     {
      vGroup.addElement(zoomToButton);
     }
    }
   }

Any Ideas?

PopUpRendererSkin.zip

Untitled-1.jpg

RobertScheitlin__GISP

Isaiah,

The next step I would take is to put a breakpoint in the PopUpRendererSkin code and see if you get to the popup when suing the widget. Of course this assumes you are using the Flash Player Debug Version and you launch your project using the debug (little green Bug) instead of the play button.

IsaiahAguilera

Yep its exactly like that, except my custom skin is located outside of the widget folder. Im not sure that it makes a difference or not?

private function showHighlight(params:Array):void
   {
    var showHighlightPoint:MapPoint = params[0].point as MapPoint;
    popUpRenderer.popUpInfo = configurePopUpInfo(params[0].graphic.attributes.link, params[0].graphic.attributes.linkalias);
    popUpRenderer.graphic = params[0].graphic;
    popUpRenderer.setStyle("skinClass", com.esri.ags.skins.PopUpRendererSkin);
    map.infoWindow.content = popUpRenderer;
    map.infoWindow.contentOwner = popUpRenderer.graphic;
    map.infoWindow.show(showHighlightPoint);
   }

If I close the widget and click on a parcel the all of the fields work great. As soon as I open the eSearch widget the fields are not links any more. It is the same skin being used for both of them. Once again im not sure that matter either? Im just trying to give you as much info as possible. Does it maybe have something to do with the search widget config? I only think this because it determines what shows up in the popups when the search widget is open.

RobertScheitlin__GISP

Isaiah,

So you are saying that you have in what ever search widget flavor you are using you have this code, but pointing to your version of the PopUpRendererSkin:

            private function showHighlight(params:Array):void
            {
                var showHighlightPoint:MapPoint = params[0].point as MapPoint;
                popUpRenderer.popUpInfo = configurePopUpInfo(params[0].graphic.attributes.links);
                popUpRenderer.graphic = params[0].graphic;
                popUpRenderer.setStyle("skinClass", widgets.eSearch.PopUpRendererSkin);
                map.infoWindow.content = popUpRenderer;
                map.infoWindow.contentOwner = popUpRenderer.graphic;
                map.infoWindow.show(showHighlightPoint);
            }

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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