Add abutton inside an Infowindow

tanyabisen — Mon, 05 Dec 2011 10:37:36 GMT

Hello All,

Can somebody help me with adding a button inside an Infowindow..

Thanks,

Tanya

Re: Add abutton inside an Infowindow

IvanBespalov — Mon, 05 Dec 2011 11:07:28 GMT

Tanya,

Try to modify InfoWindowSkin. (available since version 2.3)

In ArcGIS API find skins folder, copy InfoWindowSkin.mxml to your application skins folder. Modify it as you need: add buttons, labels ... Define skin to your InfoWindow.

Re: Add abutton inside an Infowindow

tanyabisen — Tue, 06 Dec 2011 03:04:55 GMT

Hi ibespalov,

Ok..I have done that..I need to call the button which is defind in a skin to the main application. I am not able to access it.

Thanks,
Tanya

Re: Add abutton inside an Infowindow

IvanBespalov — Sat, 11 Dec 2021 18:55:41 GMT

I am not able to access it.

Why do you need to access it? What do you want to do with button when accessed?

You can listen button events. For example:

1 - Modified esri sample application

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      pageTitle="FeatureLayer on demand">
 <!--
 This sample shows you how to add InfoWindows to a feature layer.
 When user clicks on one of the polygon features, the info window popup will show.
 -->
 
 <s:layout>
  <s:VerticalLayout/>
 </s:layout>
 
 <fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";
  @namespace esri "http://www.esri.com/2008/ags";
  esri|InfoWindow
  {
   skin-class: ClassReference("your.path.to.InfoWindowSkin");
  }
 </fx:Style>
 <fx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.events.FlexEvent;

   protected function map1_creationCompleteHandler(event:FlexEvent):void
   {
    if (map.infoWindow)
    {
     map.infoWindow.addEventListener("onSubmitClick", onInfoWindowSubmitClick, false, 0, true);
    }
   }
   
   protected function onInfoWindowSubmitClick(event:Event):void
   {
    Alert.show("submit button clicked", "! ! !");
   }

  ]]>
 </fx:Script>
 
 <esri:Map id="map"
     openHandCursorVisible="false"
     creationComplete="map1_creationCompleteHandler(event)">
  <esri:extent>
   <!-- Extent for Bloomfield Hills, Michigan -->
   <esri:Extent xmin="-9271300" ymin="5247400" xmax="-9270300" ymax="5248500">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"/>
  <esri:FeatureLayer id="fLayer"
         mode="onDemand"
         outFields="[PARCELID,OWNERNME1,SITEADDRESS,LNDVALUE,USECD]"
         url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer/2">
   <esri:symbol>
    <esri:SimpleFillSymbol id="fillsym" style="null">
     <esri:SimpleLineSymbol width="3" color="0xFF0000"/>
    </esri:SimpleFillSymbol>
   </esri:symbol>
   <esri:infoWindowRenderer>
    <fx:Component>
     <mx:VBox backgroundColor="0xffffff"
        color="0x444444"
        label="Parcel {data.PARCELID}">
      <mx:Label text="Owner: {data.OWNERNME1}"/>
      <mx:Label text="Address: {data.SITEADDRESS}"/>
      <mx:Label text="Land Value: {data.LNDVALUE}"/>
      <mx:Label text="Landuse: {data.USECD}"/>
     </mx:VBox>
    </fx:Component>
   </esri:infoWindowRenderer>
  </esri:FeatureLayer>
 </esri:Map>
 
 <s:Label enabled="{fLayer.loaded}" text="Using the 'onDemand' mode, parcels are fetched 'as needed' when you pan and zoom.  Click any parcel to see more information."/>
 
</s:Application>

2 - Modifications in InfoWindowSkin

<fx:Metadata>
        /**
         * A strongly typed property that references the component to which this skin is applied.
         */
        [HostComponent("com.esri.ags.components.supportClasses.InfoWindow")]
  
 [Event(name="onSubmitClick", type="flash.events.Event")]
</fx:Metadata>

...

<fx:Script>
<![CDATA[
    /**
    * Listen submit button click
    */
    protected function onSubmitButtonClick(event:MouseEvent):void
    {
        dispatchEvent(new Event("onSubmitClick", true, false));
    }
]]>
</fx:Script>

...

<s:HGroup id="headerGroup"
               width="100%"
               includeInLayout.withoutHeader="false"
               minWidth="0"
               verticalAlign="middle"
               visible.withoutHeader="false">
            <esri:InfoWindowLabel id="labelText"/>
            <s:Rect width="100%" height="10"
                    minWidth="0"/>
            <esri:InfoWindowCloseButton id="closeButton"/>
     <s:Button id="submitButton"
 click="onSubmitButtonClick(event)"
 label="Submit"/>

Re: Add abutton inside an Infowindow

tanyabisen — Tue, 06 Dec 2011 09:30:33 GMT

Hi Ivan,

It worked. Thanks a ton... Basically I have 2 events: mouseover and mapclick and I want to show the button only on mapclick event. Thats the reason I asked if i can access the id of a button defined in skin into the main application

Re: Add abutton inside an Infowindow

JHayes — Fri, 08 Jun 2012 20:04:13 GMT

Ivan,

You are the man, man. Thanks for the code. It really helped me out!!

topic Add abutton inside an Infowindow in ArcGIS API for Flex Questions

Add abutton inside an Infowindow

Re: Add abutton inside an Infowindow

Re: Add abutton inside an Infowindow

Re: Add abutton inside an Infowindow

Re: Add abutton inside an Infowindow

Re: Add abutton inside an Infowindow