Modifying the Popup skin

anjelinaponkerat — Thu, 27 Aug 2015 13:19:26 GMT

I need to change Popup skin:

1- change it to RTL

2- add border between records and fields.

Re: Modifying the Popup skin

MattiasEkström — Fri, 28 Aug 2015 10:13:33 GMT

Have you been able to download and use your own custom PopUpRendererSkin.mxml?
Otherwise you can take a look at one of the following threads:

How can I increase the size of a popup window in the Flex viewer 3.6

PopUp 3.0

1. Switch the right och left properties of fieldLabel och fieldValue in this part of the code (in PopUpRendererSkin.mxml):

for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)
                        {
                            if (fieldInfo.visible)
                            {
                                var fieldLabel:Label = new Label();
                                fieldLabel.text = fieldInfo.label || fieldInfo.fieldName;
                                fieldLabel.left = 0;
                                fieldLabel.right = "col1:0";
                                fieldLabel.top = "row" + rowID + ":" + (rowID == 1 ? 5 : 15);
                                keyValueGroup.addElement(fieldLabel);
                                var fieldValue:RichEditableText;
                                htmlText = formattedAttributes[fieldInfo.fieldName];
                                if (htmlText)
                                {
                                    fieldValue = new RichEditableText();
                                    fieldValue.textFlow = LinkUtil.createLinkTextFlow(htmlText, textLayoutConfiguration);
                                    fieldValue.editable = false;
                                    fieldValue.left = "col2:5";
                                    fieldValue.right = 0;
                                    fieldValue.top = fieldLabel.top;
                                    keyValueGroup.addElement(fieldValue);
                                }
                                rowID++;
                            }
                        }

Then you might want to edit the width and maxwidth values here:

<s:Group id="keyValueGroup" width="100%">
            <s:layout>
                
                <s:ConstraintLayout id="keyValueGroupLayout">
                    <s:constraintColumns>
                        
                        <s:ConstraintColumn id="col1" maxWidth="100"/>
                        
                        <s:ConstraintColumn id="col2" width="100%"/>
                    </s:constraintColumns>
                </s:ConstraintLayout>
            </s:layout>
        </s:Group>

2. Haven't look in to this but it's somewhere in the keyValueGroup you need to add your borders somehow...

topic Re: Modifying the Popup skin in ArcGIS Viewer for Flex Questions

Modifying the Popup skin

Re: Modifying the Popup skin