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; } } }

Communication between widgets

DonCavinessGeo

Does anyone know how I would go about communicating between widgets? I would like to use a button in one widget to call a function in another or change components (label text, visible property, etc) in another widget. Any help will be appreciated.

Find more posts tagged with

Accepted answers

All comments

SarthakDatt

Hey Don,

Assuming that you are using Flex Viewer 2.x version, every widget extends the BaseWidget class, which has the addSharedData method. This method internally dispatches the AppEvent.DATA_PUBLISH event which is used for inter-widget communication.

e.g:

Widget 1

 
private function widgetCommunication1():void
{
    addSharedData("your key", shared data(ArrayCollection)); 
}

Widget 2

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:viewer="com.esri.viewer.*"
                   initialize="basewidget1_initializeHandler(event)"
                   >
    <fx:Script>
        <![CDATA[
            import com.esri.viewer.AppEvent;
           
            import mx.events.FlexEvent;

            protected function basewidget1_initializeHandler(event:FlexEvent):void
            {
                ViewerContainer.addEventListener(AppEvent.DATA_PUBLISH, sharedDataUpdated);
            }
           
            private function sharedDataUpdated(event:AppEvent):void
            {
                var data:Object = event.data;

                if (data.key == "my key") 
                {
                     // do something..     
                }
            }
        ]]>
    </fx:Script>

Hope that helps.

DonCavinessGeo

Thank you! That is what I was looking for.

BobCarberry

Sarthak,

Do you know of anyway to open a widget from another widget?

RobertScheitlin__GISP

Bob,

You have to know your widgets Id number. The widgets id is not a string it is a sequential number that is assigned when the widget is created in FlexViewer.

Here is the code:

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, yourWidgetsID#));

I added a new function to the ViewerContainer.mxml for the purpose of finding a widgets id #

//Add this new variable at the beginning with the other  private and public vars
public var _configData:ConfigData;

//Add this new function
                        public function getWidgetId(widgetLabel:String):Number
   {
    var id:Number;
    for (var i:Number = 0; i < _configData.widgets.length; i++)
    {
     if (_configData.widgets.label == widgetLabel)
      id = _configData.widgets.id;
    }
    return id;
   }

//Add this to the postConfigHandler function
_configData = event.data as ConfigData;

Then you can do something like this

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, ViewerContainer.getWidgetId("Search")));

DonCavinessGeo

Robert, do you know how I would go about calling a function in the flex viewer using a javascript function in a html page? I have found this example on how to communicate between flex and javascript http://www.switchonthecode.com/tutorials/flex-javascript-basics-using-externalinterface but I am having trouble getting this to work with the 2.1 flex viewer.

RobertScheitlin__GISP

Don,

I am looking into it. Can you give me a use case or workflow that you are considering this for?

DonCavinessGeo

Here is what I am trying to do. I have a custom wrapper that the flex viewer lives in. On the html page a have a button that fires an JavaScript event that changes some information within the html. In the flex viewer I have a widget that will display data depending what is selected by the user clicking on the button in the html wrapper. In other words, I want to change label text, make components visible or hidden, etc. in the widget when the user fires off a JavaScript function. I was successful in using the code snippet provided in this thread to communicate between wigets, so I was hoping I could communicate with the widget but from outside of flex.

RobertScheitlin__GISP

Don,

Took a while to find time for this but here it is:
index.template.html code:

<script type="text/javascript">
            function getFlexApp(appName)
            {
              if (navigator.appName.indexOf ("Microsoft") !=-1)
              {
                return window[appName];
              }
              else
              {
                return document[appName];
              }
            }
            function someFlexFunction()
            {
                getFlexApp('index').flexTalk('Hello World');
            }
        </script>
        <input type="button" id="butFlexTalk" onclick="someFlexFunction()" value="Say Hello" />

index.mxml portion

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:viewer="com.esri.viewer.*"
               xmlns:managers="com.esri.viewer.managers.*"
               pageTitle="ArcGIS Viewer for Flex"
               initialize="initApp()">
               
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function initApp():void
            {
                if (ExternalInterface.available)
                    ExternalInterface.addCallback("flexTalk", flexTalk);     
            }
            
            public function flexTalk(sayThis:String):void
            {
                Alert.show(sayThis);
            }
        ]]>
    </fx:Script>

    <fx:Style source="defaults.css"/>

Of course from here you will have to use some appEvent or something to get from the index.mxml into some widget or what ever you are trying to do.

DonCavinessGeo

Thank you Robert.

MattiasEkstr√∂m

Hi!
This thread helped me to communicate between widgets, I'm sending a graphic from one widget to another which use the graphic as input to an identifyTask. This works fine as long as both widgets are opened.
If the user haven't opened the second widget yet I want to open that widget and send the graphic.
I can open the widget (but I have to hardcode the widget id, the getWidgetId function doesn't work for me, but that's another question I asked in another thread). But if the widget is just opened it obviously didn't had time to add the eventlister and litsen to the AppEvent.DATA_PUBLISH, so nothing happens, the user has to do the same request again.

Any ideas how to accomplish to open a widget and sending data to it at the same time (or at least without any user input after the widget is loaded??

RobertScheitlin__GISP

Mattias,

So are you good on this now based on the other thread?

MattiasEkstr√∂m

Robert,
No I still can't achieve all I want.
If I Have my two widgets open then there is no problem for widget1 to send data to widget2 that uses the data to perform a findtask. But If widgets2 is not loaded it loads but don't perform any findtask. I want it to load and receive the data and perform the findtask.
If widget2 is loaded once and then closed so the state of the widget is closed it works fine, but the problem is when the widget never have been opened/loaded during the session.

I've tried to use some fetchSharedData() code at the creationComplete event for widget2 to see if there is any data with my key in shareddata, but I can't fetch any data, don't know how to use the fetchSharedData.
(I saw another thread about a bug in Datamanager.as, made that change but it didn't changed anything for me).

RobertScheitlin__GISP

Mattias,

In the init of widget 2 you need to add an event listener:

ViewerContainer.addEventListener(AppEvent.DATA_SENT, sharedDataUpdated);

            private function sharedDataUpdated(event:AppEvent):void
   {
    var dataTable:Hashtable = event.data as Hashtable;
    if (dataTable.containsKey("ParcelAddress"))
    {
     var recAC:ArrayCollection = dataTable.find("ParcelAddress") as ArrayCollection;
     for (var i:Number = 0; i < recAC.length; i++)
     {
      var obj:Object = recAC;
      var fitm:* = frmLocateAddress.getChildAt(0);
      var tAddress:TextInput = fitm.getChildAt(0) as TextInput;
      tAddress.text = obj.paddress;
      showStateAddress();
     }
     dataTable.remove("ParcelAddress");
    }
   }

Obviously the sharedDataUpdated function is specific to something that I am doing but this gives you and idea. Basically my scenario is if someone uses the search widget for an address and the returned results are empty than I will give them and option to launch the locate widget with that same searched address. So when they click yes they want to use locate then I launch the locate widget with the WIDGET_RUN app event discussed earlier and then because the search widget used the addSharedData function when the widget is launched the code above is used immediately.

MattiasEkstr√∂m

Robert,
I added the event listener to the init of widget2 and the function to that event listener. But still it doesn't work, the function never runs.
My knowledge about AppEvents are limited, but I'm thinking that the event listener is added after the event is dispatched and therefor nothing happens. But if this code work for you, I guess it should work for me to, but it doesn't...

What's the difference between AppEvent.DATA_PUBLISH and AppEvent.DATA_SENT?

The data that is added from addSharedData in widget1 has to be stored somewhere, is there no way to access it from widget2 without any event listeners??

RobertScheitlin__GISP

Mattias,

AppEvent.DATA_PUBLISH is what gets dispatched by the BaseWidget when the addSharedData function is invoked. AppEvent.DATA_SENT is what gets dispatched when the BaseWidget is done adding the data to the hashtable. BTW I forgot that I was calling fetchSharedData(); in my locate widget when it is shown. fetchSharedData is a function that forces the data sent to get dispached.

MattiasEkstr√∂m

Thanks for all your help Robert!
After I added the call to fetchSharedData() in widget2 it works great.

ShannakaBeveridge

Hi,

I am having the same problem, could you explain where and how you've used fetchSharedData()?

Cheers!

Shannaka

MattiasEkstr√∂m

Shannaka,
I guess normally you could use the fetchSharedData() in the init function, I use it a bit later because I call a few other functions in my init functions that creates some components and set there values based on info in the config file. But the important thing is that you've added the eventlistenter ( ViewerContainer.addEventListener(AppEvent.DATA_SENT, sharedDataUpdated); ) before you call fetchSharedData(), it's used just to trigger that event.

ShannakaBeveridge

Thank you! All working now.

SandraPanicucci

Used the below code in an attempt to get searchResultAC from the search widget to use the BMPID in an edit widget right now I am getting the shared data at least as far as the sharedDataUpdated function--at least in debugger my BMPID displays as the title under the variables tab but I don't seem to be able to figure out how to display the shared data in an alert box...which isn't my ultimate goal but would get me closer to figuring out how to use the shared data.

Widget 1

 
private function widgetCommunication1():void
{
    addSharedData("your key", shared data(ArrayCollection)); 
}

Widget 2

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:viewer="com.esri.viewer.*"
                   initialize="basewidget1_initializeHandler(event)"
                   >
    <fx:Script>
        <![CDATA[
            import com.esri.viewer.AppEvent;
           
            import mx.events.FlexEvent;

            protected function basewidget1_initializeHandler(event:FlexEvent):void
            {
                ViewerContainer.addEventListener(AppEvent.DATA_PUBLISH, sharedDataUpdated);
            }
           
            private function sharedDataUpdated(event:AppEvent):void
            {
                var data:Object = event.data;

                if (data.key == "my key") 
                {
                     // do something..     
                }
            }
        ]]>
    </fx:Script>

Hope that helps.

JesseMetcalfe

Guys stucked here...
My sharedDataUpdated () is not getting called 2nd time when my widget is opened.
See Thread -

GaneshAnanthakrishnan

Bob,

You have to know your widgets Id number. The widgets id is not a string it is a sequential number that is assigned when the widget is created in FlexViewer.

Here is the code:

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, yourWidgetsID#));

I added a new function to the ViewerContainer.mxml for the purpose of finding a widgets id #

//Add this new variable at the beginning with the other  private and public vars
public var _configData:ConfigData;

//Add this new function
                        public function getWidgetId(widgetLabel:String):Number
   {
    var id:Number;
    for (var i:Number = 0; i < _configData.widgets.length; i++)
    {
     if (_configData.widgets.label == widgetLabel)
      id = _configData.widgets.id;
    }
    return id;
   }

//Add this to the postConfigHandler function
_configData = event.data as ConfigData;

Then you can do something like this

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, ViewerContainer.getWidgetId("Search")));

Hi Robert,

I am trying to open a search results widget from a submit button on my headercontroller widget as opposed to opening it by clicking an icon in the widget menu(the default method).

Am I correct in my understanding that the above solution will only work if the widget is specified in the config.xml file (which is when the widget id is assigned)? What if I don't want the widget visible in the menu but I want to open the widget? How would I reference the widget without the id?

RobertScheitlin__GISP

Ganesh,

Sounds like you need to go deep into the widgetmanager and look at the onRunWidget method and try and understand how widgets are loaded a individual modules from a url. Good Luck.

ZhujingXia

Hi,

Any progress for add in widget from the run time? I'd like to add widget2 from widget1. But the widget2 is did not list in the config.xml file. Anyone sould help on this topic?

Thanks

zhujng

AnthonyKeogh1

Bob,

You have to know your widgets Id number. The widgets id is not a string it is a sequential number that is assigned when the widget is created in FlexViewer.

Here is the code:

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, yourWidgetsID#));

I added a new function to the ViewerContainer.mxml for the purpose of finding a widgets id #

//Add this new variable at the beginning with the other  private and public vars
public var _configData:ConfigData;

//Add this new function
                        public function getWidgetId(widgetLabel:String):Number
   {
    var id:Number;
    for (var i:Number = 0; i < _configData.widgets.length; i++)
    {
     if (_configData.widgets.label == widgetLabel)
      id = _configData.widgets.id;
    }
    return id;
   }

//Add this to the postConfigHandler function
_configData = event.data as ConfigData;

Then you can do something like this

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, ViewerContainer.getWidgetId("Search")));

Hi again Robert, I know this is a fairly old post now but this function would be very useful to me at the minute.
I was wondering how you can call the getWidgetId function the way you are above since the function is not static and there is no instance of ViewerContainer to be able to call the function?
I have added in all of the code above into my ViewerContainer.mxml file and the calls I need into my other file where I want to run the widget but, if I dont make the getWidgetId function static I can't access it and if I do try to make it static I get an "Error #1009: Cannot access a property or method of a null object reference." at line 273: "var wgtContainer:IWidgetContainer = configData.widgetContainers[idx.container].container.obj;" of the WidgetManager.mxml file

Thanks for any help.

RobertScheitlin__GISP

Anthony,

All you have to do is call

ViewerContainer.getInstance()

AnthonyKeogh1

I tried both

viewerCon:ViewerContainer = ViewerContainer.getInstace();  // inside init()

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, viewerCon.getWidgetId("Selection") ) );

AND

ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, ViewerContainer.getInstance().getWidgetId("Selection") ) );

and I recieved the same error. Im probably making a stupid mistake somewhere.

RobertScheitlin__GISP

Anthony,

Try some simple debuging like:

trace(viewerCon.getWidgetId("Selection"));

Alert.show(viewerCon.getWidgetId("Selection"));

Is "Selection" the label that you defined for the widget you are after in the main config.xml?

AnthonyKeogh1

Hi Robert, I got it working. Thanks for the help again! Sorry about not replying I have been away the last couple of weeks.

LeiZhou

I changed that to :

var viewerCon:ViewerContainer = ViewerContainer.getInstance();

Then it works. Thank you all!

Anthony,

All you have to do is call
ViewerContainer.getInstance()

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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