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,

[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);
            }

[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,

   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]

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?

[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]

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,

  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>

[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!

[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,