topic Re: Communication between Widgets in Web AppBuilder Custom Widgets Questions

Communication between Widgets

KafilBaig — Sun, 29 Mar 2020 07:07:17 GMT

I have custom widget which is used to fetch data.

On button click i am opening the widget B to populate details data.

I don't want to show the details widget b in Anchorcontroller. I am using Launchpad theme .

Is there a way i can remove the widget B from AnchorController and just open it from Custom Widget button click.

Thanks in Advance.

Re: Communication between Widgets

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:46:14 GMT

Kafil,

Sure here are the steps:

Make sure your widget IS added to the anchorbarcontroller.

In the apps main config.json add a "visible: false" to your widgets object.

      {
        "name": "eSearch",
        "version": "2.13.1",
        "uri": "widgets/eSearch/Widget",
        "config": "configs/eSearch/config_widgets_eSearch_Widget_44.json",
        "index": 6,
        "id": "widgets_eSearch_Widget_44",
        "visible": false
      }‍‍‍‍‍‍‍‍‍

Next add this code to your other widgets button:

          var pm = PanelManager.getInstance();
          var widgetCnfg = null;  
          array.some(this.appConfig.widgetPool.widgets, function(aWidget) {  
            if(aWidget.name == 'eSearch') {  
              widgetCnfg = aWidget;  
              return true;  
            }  
            return false;  
          });
          widgetCnfg.visible = true;
          pm.showPanel(widgetCnfg).then(lang.hitch(this, function(panel){  
            panel.setPosition({ top: 120, left: 10, width: 350, height: 480, margin: 10, index: 1 });  
            pm.normalizePanel(panel);  
          }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to add PanelManager to your widget define array.

Re: Communication between Widgets

KafilBaig — Mon, 30 Mar 2020 09:59:05 GMT

Thanks for the help Robert.

I tried but not working.

Let me give u my code what exactly i am doing.

I have a details button in my dgrid.

grdTest.on(".field-det:click", lang.hitch(this, function(e){

if (e.target.alt) {

var paramvalues = e.target.alt;

document.getElementById('RegNo').value = paramvalues

document.getElementById('publishData').click();

document.getElementById('Det').click();

}

}));

_onPublishClick: function() {

this.publishData({

message: document.getElementById('RegNo').value;

});

this.i ++;

toOpenWidget: function() {

var widget = this.appConfig.getConfigElementsByName('Details');

var widgetId = widget[0].id;

this.openWidgetById(widgetId).then(lang.hitch(this, function(widget) {

}));

}

In widget.Html i am adding the below.

This is working for me . But when i try to add the below statement in Config file the widget is not showing up.

"visible": false

but when i try to open the widget it is not becoming true when i add your code.

Please guide me am missing something.

Re: Communication between Widgets

RobertScheitlin__GISP — Mon, 30 Mar 2020 13:01:08 GMT

Kafil,

Your button click event is out of scope. The scope of "this" is the button click event and not the widget. This is normally a problem when trying to add inline click events to html code. Instead you need to add a click handler programatically so that you can use lang.hitch.

Re: Communication between Widgets

KafilBaig — Wed, 01 Apr 2020 03:32:24 GMT

Thanks Robert. The above code worked for me.

I have another query regarding eSearch widget.

I am using eSearch widget when url is passed from other application. The eSearch widget icon is also showed in AnchorController. Where i want to make it visible : false and open the widget only when the Url Param is passed from other application. Where exactly i should place this code to work.

Re: Communication between Widgets

RobertScheitlin__GISP — Thu, 02 Apr 2020 12:02:06 GMT

The eSearch widget has to be open at startup in order to receive URL parameters so what I recommended previously will not work.