nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Use custom PopUpRendererSkin for just one widget

philippschnetzer

I have an older flex app (maybe 2.2) which utilizes a custom PopUp skin. But now I need to modify a single widget (Query Widget) to use a different custom PopUp. Since...

esri|PopUpRenderer 
{
 skinClass: ClassReference("xyz.skins.CustomPopup");
}

...is already specified in the default.css how can I tell my Query Widget to use a different one?

Thanks

Vind meer berichten getagd met

Accepted answers

All comments

RobertScheitlin__GISP

Phillip,

In your Flex Viewer App right click on the map and see if you see this context menu item:
"About ArcGIS Viewer for Flex" and click it.

As far as specifying that one widget should use a particular PopUp your do that like this:

popUpRenderer.setStyle("skinClass", widgets.eSearch.PopUpRendererSkin);

Don't forget to click the Mark as answer check and to click the top arrow (promote) as shown below:

philippschnetzer

Thanks for your help, Robert!

Where exactly would I place the code you posted? I put it in default.css but it caused an error. Then I put it in QueryWidget.mxml but it also caused an error (the first line is already in the code...):

private var popUpRenderer:PopUpRenderer = new PopUpRenderer();
   popUpRenderer.setStyle("skinClass", widgets.Query.PopUpRendererSkin);

As far as the right click to see the 'About ArcGIS Viewer for Flex' it is not there - but I think it's version 2.2....maybe 2.3

RobertScheitlin__GISP

Phillip,

Try this:

            private function showHighlight(params:Array):void
            {
                var showHighlightPoint:MapPoint = params[0].point as MapPoint;

                popUpRenderer.popUpInfo = configurePopUpInfo(params[0].graphic.attributes.link);
                popUpRenderer.graphic = params[0].graphic;
                popUpRenderer.setStyle("skinClass", widgets.Query.PopUpRendererSkin);
                map.infoWindow.content = popUpRenderer;
                map.infoWindow.contentOwner = popUpRenderer.graphic;
                map.infoWindow.show(showHighlightPoint);
            }

As far as the version of Flex Viewer, that is pretty significant for you to know. Look for the readme.txt in the Package Explorer window in Flash Builder, it should be under the license.txt.

philippschnetzer

I was wondering how I could find out what version it is - turns out it's 2.3 (nice to know! I am modifying someone else's viewer...)

I placed the code as you showed but am getting the following error:

1202: Access of undefined property PopUpRendererSkin in package widgets.Query

Thanks!

RobertScheitlin__GISP

philipp,

So where is your custom PopUpRendererSkin.mxml that you want the QueryWidget to use than?

philippschnetzer

Wow, I should have thought about that a little more. I placed the PopUpRendererSkin into the 'Query' folder and that removed the error. However, there is still an element from the other custom skin showing in the popup. What I am trying to do is actually use the default PopUpRendererSkin for the Query widget (with just a few minor changes - ie, remove the media box border and make the popup larger). Here is the code from the default.css which may be affecting the Query Widget in some way...

esri|PopUpRenderer 
{
 skinClass: ClassReference("agrg.skins.CustomPopup");
}

eSearch|SearchWidget esri|PopUpRenderer {
 skinClass: ClassReference("com.esri.ags.skins.PopUpRendererSkin");
}

and I noticed this code inside the CustomPopup.mxml:

 [HostComponent("com.esri.ags.webmap.PopUpRenderer")]

RobertScheitlin__GISP

Phillip,

I don't do any thing in the css for this... I do it all in the actual widgets defining the skinclass right before the popup is shown just like I showed you in the last post.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.