Attribute displayed as Icon in Pop Up Window

Anonymous User — Fri, 09 Mar 2012 17:57:35 GMT
Original User: conner_justin
What I'd like to do is this, when clicking on a park polygon I would like the activities that are available at that park to be shown with the corresponding activity icon. I have a field for each activity and if that activity is present I coded the attribute value as "activity.png". I'll attach screenshots of what I'm after.
[ATTACH=CONFIG]12565[/ATTACH][ATTACH=CONFIG]12566[/ATTACH]
Re: Attribute displayed as Icon in Pop Up Window

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:54:11 GMT
Justin,

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:
topic Re: Attribute displayed as Icon in Pop Up Window in ArcGIS API for Flex Questions

Attribute displayed as Icon in Pop Up Window

Re: Attribute displayed as Icon in Pop Up Window
