Attribute displayed as Icon in Pop Up Window
1683
1
03-09-2012 09:57 AM
by
Justin,
Sure just a little manipulation of the PopUpRenedererSkin.mxml will do the trick:
Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:
Sure just a little manipulation of the PopUpRenedererSkin.mxml will do the trick:
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){
var descriptionText:Text = new PopUpText();
descriptionText.percentWidth = 100;
descriptionText.styleSheet = textStyleSheet;
cleanAndSetHtmlText(descriptionText, htmlText);
//trace(descriptionText.htmlText);
vGroup.addElement(descriptionText);
}
}else{
var descriptionForm:Form;
//Added Code
activities.removeAllElements();
//End Added Code
for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos){
//Added Code
var AddFormItem:Boolean = true;
//End Added Code
if (fieldInfo.visible){
var formItem:FormItem = new FormItem();
formItem.label = fieldInfo.label || fieldInfo.fieldName;
var label:Label;
htmlText = formattedAttributes[fieldInfo.fieldName];
//Added Code
var img:Image;
switch(formItem.label){
case "Parking":
case "Golf":
case "Tennis":
case "Restrooms":
case "Soccer":
case "Football":
case "Basketball":
case "Baseball":
case "Fishing":
case "Running":
case "Skateboard":{
if(htmlText){
img = new Image();
img.source = "assets/images/" + htmlText;
img.width = img.height = 20;
activities.addElement(img);
}
AddFormItem = false;
break;
}
}
//End Added Code
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";
}
//Changed Code
if(AddFormItem)
descriptionForm.addChild(formItem);
//End Changed Code
}
}
if (descriptionForm)
{
vGroup.addElement(descriptionForm);
}
//Added Code
if(activities.numElements >0)
vGroup.addElement(activities)
//End Added Code
}
//Add the red line to the Declarations
<fx:Declarations>
<!--- @private -->
<mx:Text id="titleText"
width="100%"
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')}"/>
<s:TileGroup id="activities" orientation="rows" width="100%" />
</fx:Declarations>Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below: