Showing an Image based on a condition on an InfowindowRender

Anonymous User · ‎07-19-2011

Original User: sravabonagiri

Hi Folks,

Please help me with my situation. I am using an InfoWindowRenderer to show a window on a mouse click. I did this on a Feature layer. I was able to do the basic data binding from the feature layer without any issues. However, I have an issue displaying an Image inside the info window based on a condition. I have two scenarios, one is, if the water quality is good at a beach location, then I would like to show the swim image. In the other scenario, if the water has elevated bacteria levels, then I would like to show no-swim image. I attached an image and the code associated with my work. Could you please help me out. I appreciate in advance.

Here is the associated code:
<esri:FeatureLayer id="fLayer"
outFields="[GIS.Samplets_Join.BEACH_NAME, GIS.Samplets_Join.ADVISORYFROM,
                                GIS.Samplets_Join.ADVISORYTO, GIS.STATION.DATE_COLLECTED,
                                GIS.STATION.STATUS]"
graphicAdd="fLayer_graphicAddHandler(event)"
url="http://hostname/ArcGIS/rest/services/WaterQualityMonitoringApp/MapServer/0" >


<esri:infoWindowRenderer>
   <fx:Component>
    <mx:VBox backgroundColor="0xffffff" width="100%" height="100%"
     color="#5588a6" label="{data['GIS.Samplets_Join.BEACH_NAME'].toString().toUpperCase()}">


     <mx:Label text="from {data['GIS.Samplets_Join.ADVISORYFROM']} to {data['GIS.Samplets_Join.ADVISORYTO']}"/>
     <mx:Image source='assets/swimokgraphic.PNG'/>
     <mx:Label text="Date of Test: {data['GIS.STATION.DATE_COLLECTED']}" />
     <mx:LinkButton id="lnkButton" label="Frequently Asked Questions" fontWeight="bold" textDecoration="underline" />
    </mx:VBox>
   </fx:Component>
</esri:infoWindowRenderer>
</esri:FeatureLayer>

ReneRubalcava · ‎07-19-2011

Looks like you may still be using Flex 3, so you would want to review using view states.
http://livedocs.adobe.com/flex/3/html/help.html?content=using_states_3.html

If you're using Flex 4.X, check this link out
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf63611-7ff1.html

Flex 4 states are drastically different than they were in 3.

Anonymous User · ‎07-20-2011

Original User: sravabonagiri

Thank you for your response. This is a simple problem I guess. Using view states concept would complicate the issue. Flex Guru's please share your expertise to the above problem. I appreciate it.

Looks like you may still be using Flex 3, so you would want to review using view states.
http://livedocs.adobe.com/flex/3/html/help.html?content=using_states_3.html

If you're using Flex 4.X, check this link out
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf63611-7ff1.html

Flex 4 states are drastically different than they were in 3.

RobertScheitlin__GISP · ‎07-20-2011

Shravan,

What is the attribute of the returned data that will determine if the image is swing or no swimming?

Anonymous User · ‎07-20-2011

Original User: sravabonagiri

Hi Robert,

I appreciate your time. The value is coming from the SDE the database.The attribute is STATUS (GIS.STATION.STATUS). It has basically three values Green, Blue, Yellow. If the Status is Green then it should show swimming image. If the status is either Blue or Yellow, it should show no-swimming image. How could I write the condition?

RobertScheitlin__GISP · ‎07-20-2011

Shravan,

Try something like this:

<esri:infoWindowRenderer>
            <fx:Component>
                <mx:VBox backgroundColor="0xffffff" width="100%" height="100%" 
                 color="#5588a6" label="{data['GIS.Samplets_Join.BEACH_NAME'].toString().toUpperCase()}">                            
                                    
                    <mx:Label text="from {data['GIS.Samplets_Join.ADVISORYFROM']} to {data['GIS.Samplets_Join.ADVISORYTO']}"/>
                    <mx:Image source="{data.GIS.STATION.STATUS == 'Green'?'assets/swimokgraphic.PNG':'assets/noswimokgraphic.PNG'}"/>
                    <mx:Label text="Date of Test: {data['GIS.STATION.DATE_COLLECTED']}" />
                    <mx:LinkButton id="lnkButton" label="Frequently Asked Questions" fontWeight="bold" textDecoration="underline" />
                </mx:VBox>    
            </fx:Component>                                                    
        </esri:infoWindowRenderer>

This is untested of course.

Anonymous User · ‎07-20-2011

Original User: sravabonagiri

Hi Robert,

It's working absolutely great. You are the genius here. I appreciate it.