Try making changes as shown in code below. Remember to keep a backup of your original PopUpRenderer before making any changes. As it wouldn't let me add more then 10000 characters in this reply, i had to delete some code. I think the main change you need to make are in commitProperties and leave rest as it is.
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)
{
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)
{
var descriptionText:Text = new PopUpText();
descriptionText.percentWidth = 100;
descriptionText.styleSheet = textStyleSheet;
cleanAndSetHtmlText(descriptionText, htmlText);
vGroup.addElement(descriptionText);
}
}
else
{
var descriptionForm:Form;
var item:Text=new PopUpText();
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;
if(label.htmlText.length>1){
item.text=item.text+fieldInfo.label+" "+ label.htmlText.toString()+"\n";
}
//formItem.styleName = "formItemStyle";
//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);
}
}
vGroup.addElement(item);
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);
}
}
}
private function cleanAndSetHtmlText(labelCntrl:Label, htmlText:String):void
{
if (labelCntrl && htmlText != null)
{
htmlText = htmlText.replace(/<div/gi, "<br /><div"); // divs are ignored so put br's in front of them
htmlText = htmlText.replace(/<div><br ?\/><\/div>/gi, ""); // remove existing <div><br /></div>'s so we don't have too many new lines
// add target="_blank" to all anchor tags
htmlText = htmlText.replace(/<a.*?href\s*=\s*["']([^"']*).*?>(.*?)<\/a\s*>/gi, '<a href="$1" target="_blank">$2</a>');
labelCntrl.htmlText = htmlText;
}
}
private function zoomToButton_clickHandler(event:MouseEvent):void
{
var graphic:Graphic = hostComponent.graphic;
var map:Map = hostComponent.map;
var geometry:Geometry = graphic.geometry;
var extent:Extent = geometry.extent; // returns null for MapPoint or Multipoint's with only one point
if (extent)
{
map.extent = extent;
// make sure the whole extent is visible
if (!map.extent.contains(extent))
{
map.level--;
}
}
else
{
// code here
}
}
]]>
</fx:Script>
<fx:Declarations>
<!--- @private -->
<mx:Text id="titleText"
width="100%"
fontSize="18"
fontWeight="bold"/>
<!--- @private -->
<s:Line id="titleLine" width="100%">
<s:stroke>
<s:SolidColorStroke id="titleLineSymbol"
color="black"
weight="1"/>
</s:stroke>
</s:Line>
<!--- @private -->
<supportClasses:PopUpMediaBrowser id="mediaBrowser"
width="100%"
skinClass="com.esri.ags.skins.supportClasses.PopUpMediaBrowserSkin"/>
<!--- @private -->
<esri:AttachmentInspector id="attachmentInspector"
width="100%"
addEnabled="false"
deleteEnabled="false"/>
<!--- @private -->
<!-- <mx:LinkButton id="zoomToButton"
click="zoomToButton_clickHandler(event)"
fontWeight="bold"
label="{resourceManager.getString('ESRIMessages', 'zoomLabel')}"/>-->
</fx:Declarations>
<s:Scroller width="100%" height="100%">
<!--- @private -->
<s:VGroup id="vGroup" fontFamily="arial" fontSize="10" fontStyle="normal" fontWeight="normal"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0" gap="0" verticalAlign="top">
<!-- elements are added in commitProperties() -->
</s:VGroup>
</s:Scroller>
</s:SparkSkin>
