topic Pop Up Spacing in ArcGIS Viewer for Flex Questions

Pop Up Spacing

SteveWhitehead__GISP — Tue, 19 Apr 2011 16:41:08 GMT

Does anyone know how to change the spacing between the field data in the Pop Up Widget from double spaced to single spaced?

I am finding my popup window is huge and takes up loads of unnecessary space in the application.

Re: Pop Up Spacing

MattShetzer — Wed, 19 Oct 2011 15:44:37 GMT

Did you ever find a resolution on this? I'd be interested too.
Thank you !
Matt Shetzer

Re: Pop Up Spacing

StephanieSnider — Wed, 19 Oct 2011 16:14:31 GMT

I'd like to know the answer to this as well.

Re: Pop Up Spacing

FaizanTayyab — Thu, 20 Oct 2011 12:33:18 GMT

I had the same problem but corrected it by modifying the popUpRendererSkin. If you look at the skin you will see it uses forms and formItem, which i think have some kind of default spacing.

Re: Pop Up Spacing

MattShetzer — Thu, 15 Dec 2011 13:32:58 GMT

I was hoping I might be able to get a little help with this. I've gone to the popUpRenderSkin, but don't see any where to edit the spacing. I really want to get rid of the double spacing, and move it to single so I can display more information in my popups.

Thanks in advance !
Matt Shetzer

I had the same problem but corrected it by modifying the popUpRendererSkin. If you look at the skin you will see it uses forms and formItem, which i think have some kind of default spacing.

Re: Pop Up Spacing

FaizanTayyab — Sat, 11 Dec 2021 08:50:23 GMT

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>

Re: Pop Up Spacing

MattShetzer — Mon, 19 Dec 2011 16:14:24 GMT

Faizan,
Thank you for the assistance with this.

I am struggling to find the PopUpRenderer. The only one in my viewer is PopUpRendererSkin.abc and when I try to edit it, I receive:

Source could not be found for com.esri.ags.skins.PopUpRendererSkin in XXXX.agslib-2.5-2011-11-30.swc

I'm I looking in the right place, or do I have to do something else first to make this change to the Popup Spacing?

Thank you for all your help.
Matt

rockzZ25;157420 wrote:
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.

Re: Pop Up Spacing

FaizanTayyab — Mon, 19 Dec 2011 17:31:32 GMT

Apologies, it is PopUpRendererSkin not PopUpRenderer. Please use the instructions below to find the skin (provided by Robert on another thread).

The popup that is used in the Viewer is actually part of the Flex API, so the source for it is not in the Viewers project structure. That being said it is easy to add the API's PopUpRendererSkin.mxml to your Flex Viewer project so that you can modify it and have it used by your viewer app. All you need to do is get the Flex API download from here:

http://resources.arcgis.com/content/...x-api-download

When you unzip it you will have a arcgis_api_for_flex_2_4 folder drill down and find arcgis_api_for_flex_2_4\ArcGIS_Flex\skins\src\com\esri\ags\skins\PopUpRendererSkin.mxml and copy it to the clipboard.
In the Flex Viewer project right click on src folder in the Package Explorer and choose New > Package and for the name field put com.esri.ags.skins and then paste the PopUpRendererSkin.mxml into that Package/folder.

Re: Pop Up Spacing

philippschnetzer — Sat, 11 Dec 2021 08:50:25 GMT

download the api from here:

http://help.arcgis.com/en/webapi/flex/index.html

In there you will find the PopUpRenderedSkin.mxml (arcgis_api_for_flex_2_5\ArcGIS_Flex\skins\src\com\esri\ags\skins\).

Take that file and put in in your project at (src/com/esri/viewer/skins) and then place this in your default.css:

esri|PopUpRenderer
{
 skinClass:ClassReference('com.esri.viewer.skins.PopUpRendererSkin');
}

Re: Pop Up Spacing

MattShetzer — Mon, 19 Dec 2011 21:35:53 GMT

That did the trick. Thanks for the help !
Matt