Dynamic Hyperlinks Within Search Widget Popups

IsaiahAguilera · ‎02-28-2012

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,

RobertScheitlin__GISP · ‎03-01-2012

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 · ‎03-01-2012

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!

RobertScheitlin__GISP · ‎03-01-2012

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 · ‎03-05-2012

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,