Editing Viewer 2.4's Pop-Up Skin

Chad,

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/arcgis-flex-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.
then look for vGroup.addElement(zoomToButton) and comment that line out.
Then the next time you compile run your viewer the zoom to button should be gone.

MrinmayeeBharadwaj_0-1621376282239.png

JenniferBorlick_1-1751558325732.gif

ChadKijewski

Robert,

Fantastic, thanks much for the assist. I'm a complete newbie when it comes to editing source code and ActionScript, but was easily able to alter it with your help.

Chad

PetrTrefil

Please,
give advice for two questions:
1/
how to use such new PopUpRendererSkin.mxml ?

How to do, use this skin for example PopUp windows ?

In main config.xml I have for example:
<operationallayers>
<layer label="vrstevnice" type="dynamic" visible="false" alpha="0.8"
url="http://gishzskv:8399/arcgis/rest/services/vrstevnice/MapServer">
<sublayer id="0" popupconfig="popups/PopUp_vrstevnice.xml"/>
</layer>
</operationallayers>

and in the section popups I created "PopUp_vrstevnice.xml"

How to manage, the PopUp window for this case use PopUpRendererSkin.mxml and not default?

2/
How to do to open popup windows without clicking on object in map, but by moving over object ?

Thanks

Hi there guys
I'm sorry to bother you, but I'm desperately trying to use the new PopUpRendererSkin as provided by http://forums.arcgis.com/threads/36513-2.4-PopUp-scrollbar-bug in my Flex Viewer 2.4 app.

I followed the steps provided by Robert, but instead of using the skin from the Flex API download, I used the one from the above link. The thing is, I make the changes to the PopUpRenderSkin, I save it, then re-run the project, but the changes do not appear.

Any suggestions?
I would really appreciate some help with this. My manager is on my case.

Jonathan,

Are you using the compiled or source code version of the viewer?

Robert, thanks so much for replying, I really appreciate it!
I am using the viewer "with" source code version.

Your widgets are great by the way.
I hope ESRI is rewarding you for your efforts!

Jonathan,

So you said you followed the steps that I outlined. Can you verify for me that you have a your Flex Viewer project as shown exactly in this attached JPG?

[ATTACH=CONFIG]9208[/ATTACH]

&#84.zip

Hey Robert

I got it sorted!
Thanks for helping me out.
The problem was that I put the skin in the wrong folder!
Keep well.

Hi Robert
I'm back again.
I was wondering how do I widen the first column in the popup window?
I have successfully widened the entire window, but the column doesn't automatically adjust.
As you can see in the attached screenshot, the labels for my fields are getting cut off, as they are too long. Any ideas?

Thanks so much.

popupcolumnwidth.JPG

Jonathan,

Sure that is as easy as changing the style block in the PopUpRendererSkin.mxml

<fx:Style>
        .formStyle
        {
            indicatorGap: 5;
            labelWidth: 100;
            paddingBottom: 5;
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 5;
            labelWidth: 250;
        }
    </fx:Style>

Hi Robert

Thanks a million for all your help so far.
I really hope this is the last time I have to bother you!
😄

I increased the width of the labels, but as you can see in the screenshot, the label and field data don't "center" in the form. How can I do this? Does it have something to do with padding?

Thanks again.

image.JPG

Jonathan,

The only thing you can do is you know what you set the skins width to, so make your label half of that.

LefterisKoumis

First of all, thank you for making the life for flex newbies easier.

I followed your steps and I successfuly altered the width of the pop up window when I tested it in flash builder. So, now what do I transfer to my application to apply the wider property for the pop up window? What do I copy from the compiled code (bin-debug) to my application. I know that I have to copy the default.css but what else? Thank you so much.

Chad,

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/arcgis-flex-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.
then look for vGroup.addElement(zoomToButton) and comment that line out.
Then the next time you compile run your viewer the zoom to button should be gone.

Amanda__Huber_0-1751560638920.png

DougBrowning_1-1751560664305.png

Amanda__Huber_1-1751560674872.png

Calendar2026_RGB_small.jpg

Lefteris,

You will have to export a release build and then copy everything from the bin-release folder to your web server.

LefterisKoumis

Thank you.

Lefteris,

You will have to export a release build and then copy everything from the bin-release folder to your web server.

JeffGarcia_0-1751561519751.png

MrinmayeeBharadwaj_2-1621376432476.png

MrinmayeeBharadwaj_3-1621376477641.png

MrinmayeeBharadwaj_4-1621376600937.png

MatthewBeal_2-1606944121490.png

MartynSmith

Jonathan,

Sure that is as easy as changing the style block in the PopUpRendererSkin.mxml

<fx:Style>
        .formStyle
        {
            indicatorGap: 5;
            labelWidth: 100;
            paddingBottom: 5;
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 5;
            labelWidth: 250;
        }
    </fx:Style>

Robert- I have imported the PopUpRendererSkin.mxml from the API, and successfully removed the "zoomto" text from the popup... but I dont have the above code block in my PopUpRendererSkin.mxml ?

EDIT: nevermind I found it, but looked different, not in fx:style, formstyle:

<!--- @private -->
        <mx:Form id="descriptionForm"
                 width="100%" height="100%"
                 horizontalScrollPolicy="off"
                 indicatorGap="5"
                 labelWidth="150"
                 paddingBottom="5"
                 paddingLeft="0"
                 paddingRight="0"
                 paddingTop="5"
                 verticalScrollPolicy="off"/>

Jonathan8209

How did you change the color the popup from gray to green?
Or if anyone else can answer this for me i would greatly appreciate it.

Thanks!

Tony,

Look here:

http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Setting_styles_for_the_Viewer/01m30000000s000000/

StevenBeothy_2-1751564877640.png

rscheitlin, thanks for the reply. Is there a way to just change the popup with out changing the header?

Thanks for pointing me in the right direction.

Thanks!

Does anyone know how to change the color popup with out changing the header?

Thanks,

Tony,

Look at adding some css to the default.css in the default package folder

    esri|InfoWindow
        {
            content-background-alpha : 0;
            background-color : yellow;
            background-alpha : 0.8;
            border-style : solid;
        }

rscheitlin.

Thanks for the replay,
I add the following code you pasted to the defaults.css and nothing changed???

DianeWhited

Does anyone know how to change the width of the column for the output results. I see labelwidth changes the column width for the filed name, but would like to widen the output column also.

Thanks.

chuckfrank

Does anyone know how to change the width of the column for the output results. I see labelwidth changes the column width for the filed name, but would like to widen the output column also.

Thanks.

If you go into the PopUpRendererSkin.mxml and scroll down around the middle of the code you will see

label.width = 143;

Change the 143 to the desired width. In my file it was on line 174.

DianeWhited

Thanks Chuck that did the trick. Much appreciated!

RicardoCuitiva

Hello,

I need to create a query, but the I need some differents fields in my Pop-Up window, because it read the fields from the XML, I need that it read these fields from other label and maybe in the same XML config.

Please help with this.

Thank you very much.

Ricardo

MiguelRueda

Hi Everyone,

I'm trying to make PopupWindow to take alternateColorItems property, but i can't do it, i'm trying to show every item that the popup shows to looks like a datagrid row using alternateColorItems property adding this to the VGroup element that it's in the PopupRenderer.mxml class. Is something i'm doing wrong, or what is the proper way to do it?

Any help is aprecciated.

Regards,

Miguel.

Miguel,

You are editing the wrong file. You need to be editing the PopUpRendererSkin.mxml. Then you need to know if the popup is configured using the description or individual fields (these are two different code paths).

MiguelRueda

Miguel,

You are editing the wrong file. You need to be editing the PopUpRendererSkin.mxml. Then you need to know if the popup is configured using the description or individual fields (these are two different code paths).

Hi Robert,

I'm sorry i mistyped, actually I'm editing PopUpRendererSkin.mxml. Well, i have configured the popups to use individual fields is this the problem?

This is a sample of what i'm looking to do with my popup window

[ATTACH=CONFIG]17828[/ATTACH]

Thanks,

Miguel.

sample.png