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.

Vind meer berichten getagd met

Accepted answers

All comments

SaadiaElaarji

hello,
i'm just trying to make communication between two widgets and execute this code but it doesn't work,

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

Widget 2

Code:

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

someone could help me !!
i'm using flex 4.6 + Java

variables.png

IvanBespalov

Indra,

*
one way - Using Singleton

*
another way - look at the viewer code

find class AppEvent.as
public static const REFRESH_LEGEND : String = "refreshLegend";
it used to refresh legend widget, so LegendWidget has listener attached during initialization
AppEvent.addListener(AppEvent.REFRESH_LEGEND, legendRefreshHandler, false, 1);

You can add to AppEvent.as own code

public static const REFRESH_MY_WIDGET_NR_2:String = "refreshMyWidgetNr2";

in SecondWidget code initialization add listener function (you can add it in other places too)

AppEvent.addListener(AppEvent.REFRESH_MY_WIDGET_NR_2, widgetRefreshHandler, false, 1);
...
private function widgetRefreshHandler(event:AppEvent):void
{
    // right place to refresh

    // read sended data
    // var sendedData:Object = event.data;
}

In FirstWidget code

var sendedData:Object = null;
AppEvent.dispatch(AppEvent.REFRESH_MY_WIDGET_NR_2, sendedData);

-------------
AppEvent class is good helper in ArcGIS FlexViewer application - it has many needed functions, it is extendable ... 🙂
Good luck

indrasena_ReddyKarumuri

Hi,
I am opening a new Widget(Say for Example Widget 2) on button click on another Widget(Say for Example Widget 1).
whenever i make a change in Widget 1, i need to refresh Widget 2. Please help in doing this.
Currently i am using ArcGIS Version 3.5.
Thanks,
Indra.

IvanBespalov

in this case objid must be Bindable parameter:

// in script tag
[Bindable]
private var objid:Number;
// in some function when object id changed
objid = somevalue;
// in declaration tag
<esri:Query id="query" outFields="" returnGeometry="false" where="OBJECTID={objid}"/>

or reset where clause each time object id changed:

// in some function when object id changed
query.where = StringUtil.substitute("OBJECTID={0}", somevalue);
// in declaration tag
<esri:Query id="query" outFields="" returnGeometry="false" />

P.S. create new topic or find existing topic using forum search to discuss about query. This discussion is about "Communication between widgets"
Good luck

Nehas

Here was similar task.
And here is other way to do it.

Thanks for the prompt reply Ivan.. my problem has been solved finally. 🙂
I have one more question regarding the query tag.

<esri:Query id="query" outFields="" returnGeometry="false" where="OBJECTID={objid}"/>

objid is the value that I have taken from source widget. Now I want to use it in this widget to query some relavant data.
This code is not working. Is there some other way of passing script parameter value in query's attribute?

IvanBespalov

Here was similar task.
And here is other way to do it.

Nehas

Hi..

I am very new to flex development and need urgent help.

I am trying to pass the objectid of the clicked point from one widget to another.
For that I am using addshareddata in my source widget.

recAC.addItem(obj.OBJECTID);
addSharedData("HelloWorldWidget", recAC);

In my destination widget I am adding the following two listeners in the creationcomplete
event of the widget.

AppEvent.addListener(AppEvent.DATA_PUBLISH, sharedDataUpdated);
AppEvent.addListener(AppEvent.DATA_SENT, sharedDataUpdated);

sharedDataUpdated function is given below

private function sharedDataUpdated(event:AppEvent):void
{
 var data:Hashtable = event.data as Hashtable;
 Alert.show("Length is "+data);
 if (data.containsKey("HelloWorldWidget")) 
 {
  var myAC:ArrayCollection =data.find("HelloWorldWidget") as ArrayCollection;
     
  Alert.show("Length is "+myAC.length);
 }
    
}

The problem is that the first Alert is giving data as null.
And the if condition is not returning true. The code is not going inside the if.

Please help me in retrieving the data here. I am stuck in this for days now.

Thanks in advance.

MLowry

For future use by others:
The new way to call a widget from within a widget is the following:

AppEvent.dispatch(AppEvent.WIDGET_RUN, ViewerContainer.getInstance().getWidgetId("WIDGET_NAME"));

RobertScheitlin__GISP

All,

Here is a must read for Widget Communication:

http://forums.arcgis.com/threads/38899-Widget-Communication-Explained

GabrielSuárez

this may sound stupid, but i need to send just 1 variable from one widget as the imput of another, appereantly this methods and DATA_SENT all that stuff pops an error that "1 is not an array collection" 1 being the input of the second widget, any ideas? or help?

problem solve... now, how to i repopulate or rebuild a widget content?

grahamcooke

Hi robert,

Still no joy with that i'm afraid. i got it working by creating a new AppEvent called RANGE_DETAIL_OPEN and then firing that from the init of the Range detail widget (widget 2). in widget 1 i have a listener for that and the listener routine then fires the addshareddata routine which is listened for in widget 2 init.

This works great.....BUT, it means that the second time I click the button for a different set of data, nothing works as a widgets init routine is only fired the first time it is ever loaded. I think maybe I have to fire the RANGE_DETAIL_OPEN event from somewhere in the widgetcontainer code.

I will have a play around, I'm sure there is a way to get this working. The other issue I foresee is emptying the data ArrayCollection that is passed every time addshareddata is called. It seems to always be added to every time the addshareddata is called successfully.

RobertScheitlin__GISP

Graham,

Now that I look at your code closer you should be adding the listeners in the init function.

grahamcooke

Hi Robert.

Still not working I'm afraid. Have tried various combinations of appevents without any success.

The event that is raised by addsharedata is firing before the listener is declared. But I don't understand why it has worked for others. Have I got something in the wrong order or put the events in the wrong routines or something?

RobertScheitlin__GISP

Graham,

Try adding this to widget 2 along with your other event listener.

ViewerContainer.addEventListener(AppEvent.DATA_SENT, sharedDataUpdated);

grahamcooke

hi,

Hope somone can assist as i am struggling a bit with this. the use case is that a user clicks a button on a widget, a second widget should then be opened with data from the first widget copied across to the newly opened widget.

I can get the second widget open fine, but the data is not copied across unless i click the button a second time. Only on that second click is the sharedData routine in the second widget called.

Relevant code snippets are as follows (flex viewer version = 2.3.1):

1st widget (button click routine)

//call the range detail widget.
ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, ViewerContainer.getInstance().getWidgetId("Range Detail")));

//add the ArrayCollection data to the sharedData object on the BaseWidget class.
addSharedData("ArtyDetail", rangeDetailArray);

2nd widget

<viewer:BaseWidget 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"
                   xmlns:viewer="com.esri.viewer.*"
                   xmlns:customValidators="Landmarc.customValidators.*"
                   initialize="myBaseWidgetInitHandler(event)"
                   widgetConfigLoaded="init()"  
                   xmlns:supportClasses="com.esri.ags.skins.supportClasses.*">

protected function myBaseWidgetInitHandler(event:FlexEvent):void
{
     ViewerContainer.addEventListener(AppEvent.DATA_PUBLISH, sharedDataUpdated);
}

public function sharedDataUpdated(event:AppEvent):void
{
    var data:Object = event.data;
    switch (data.key)
    {
         //if arty detail there is a maximum of 2 items in the ArrayCollection. First is the grids, second (if present) is the direct fire firing point
         case "ArtyDetail":
         {
              txtSta.text = data.collection[0].toString();
              //if the artillery selection was a direct fire, then there will be a firing position in the second item in the collection
              if (data.collection[1])
              {
                 txtWeaponPosition.text = data.collection[1].toString();
              }
              break;
        }

MarkBarker1_0-1746653605137.png

FrankRoberts

Thanks that fixed it. Strange that it was working and then it stopped....

Have a great Forth of July!

RobertScheitlin__GISP

Frank,

The ViewerContainer is a singleton so you need to get the instance. Try:

protected function editButton_clickHandler(event:MouseEvent):void
            {
                ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, ViewerContainer.getInstance().getWidgetId("Edit")));                
            }

FrankRoberts

Robert et al, Regarding launching widget1 from widget2. I made the ViewerContainer.mxml changes as mentioned above. I then added the code per step two above. It was working just great. I've been busy writing more code for the same widget, now the other widget won't launch.... So assume I broke something. I then created a new widget, so I can just figure out what I did wrong, and it won't work either.... The below is my stripped down widget2 code. Do you guys see any reason why this wouldn't work? Thanks for the extra set of eyes..

Frank

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget 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"                   
       xmlns:Search="widgets.Response.*"
       xmlns:viewer="com.esri.viewer.*"
                   widgetConfigLoaded="init()">
    <fx:Script>
        <![CDATA[
   
   import com.esri.viewer.ViewerContainer;
   import com.esri.viewer.AppEvent;      
   import mx.controls.Alert;
      
   private var viewerCon:ViewerContainer;
         
   //this function called when the widget's configuration is loaded
                        private function init():void
                        {             
    
   }
   
   protected function editButton_clickHandler(event:MouseEvent):void
   {
    ViewerContainer.dispatchEvent(new AppEvent(AppEvent.WIDGET_RUN, viewerCon.getWidgetId("Edit")));    
   }         
  ]]>
    </fx:Script>
 <fx:Declarations>
  
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations> 
    <viewer:WidgetTemplate id="Removal" width="450" height="180">  
  <mx:Button id="editButton" label="Edit" click="editButton_clickHandler(event)"/>       
    </viewer:WidgetTemplate>
</viewer:BaseWidget>

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()

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.

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

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,

All you have to do is call

ViewerContainer.getInstance()

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.

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

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.

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?

JesseMetcalfe

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

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.

ShannakaBeveridge

Thank you! All working now.

Doe mee aan het gesprek

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

Inloggen
Registreren

Snelle Links

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