topic Re: Calling a function from Attribute Table widget? in Web AppBuilder Custom Widgets Questions

Calling a function from Attribute Table widget?

AnnCrystal — Fri, 27 Oct 2017 14:08:07 GMT

The attribute table widget has a function _switchTable which toggles attribute table. I would like to call it from a off panel widget. I looked into Communication between widgets- but it provides methods to fetchData. I am little confused. Any thoughts? Robert, have done anything in this line?

Thanks in advance

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Fri, 27 Oct 2017 14:11:39 GMT

Ann,

So do you know how to get a reference to the AT widget in your widget?

Re: Calling a function from Attribute Table widget?

AnnCrystal — Fri, 27 Oct 2017 14:43:52 GMT

Yes, like this ?: var _AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Fri, 27 Oct 2017 14:55:55 GMT

Ann,

Then all you have to do is call the method from the _AttributeTable var then.

Re: Calling a function from Attribute Table widget?

AnnCrystal — Fri, 27 Oct 2017 15:40:40 GMT

Thanks Robert. That's the part which confused me to implement in "on" click event.

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Fri, 27 Oct 2017 15:43:51 GMT

Ann,

The on click event in the AT widget just calls that function so all you need to do is call that same fruntion:

_AttributeTable._switchTable();

Re: Calling a function from Attribute Table widget?

AnnCrystal — Fri, 27 Oct 2017 17:58:22 GMT

Thanks Robert. That part I got- but my "on" implementation is getting wrong. Actually, I was trying to modify a sample code something like this:
var _AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");
        html.setAttr(this.domNode, 'title', this.label);
        d = domConstruct.create('div');
        on(d, 'click', function{
          _AttributeTable._switchTable();

},d);

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:33:57 GMT

Ann,

Ahh, now I see what you were saying about the on event handler. So the issue I see in your code is that _AttributeTable is likely out of scope inside your on event handler. So you need to use lang.htich to get around that.

var _AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");
html.setAttr(this.domNode, 'title', this.label);
d = domConstruct.create('div');
on(d, 'click', lang.hitch(this, function{
  _AttributeTable._switchTable();
}),d);‍‍‍‍‍‍‍‍‍‍‍‍

Or you can use:

this._AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");
html.setAttr(this.domNode, 'title', this.label);
d = domConstruct.create('div');
on(d, 'click', function{
  this._AttributeTable._switchTable();
},d);‍‍‍‍‍‍‍‍‍‍‍‍

Re: Calling a function from Attribute Table widget?

AnnCrystal — Fri, 27 Oct 2017 18:55:51 GMT

Thanks Robert. Learning curve is little steep that I thought. But, you are very helpful. Dojo is a strange world with less help. Most of the books are written before 2011. And, there are no good tutorials except one in Pluralsight which is off topic. Sitepen is no longer doing anything with Dojo. So, what's the suggestion on how to get speed on WAB development? Please share your expertise. Thanks

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Fri, 27 Oct 2017 19:00:19 GMT

Ann,

Look at existing widgets and try to follow the code paths that they take. When you see something that you don't understand like "this.own" or "lang.hitch" search the web for dojo docs on those. Dojo is not going away so I am not sure about:

Sitepen is no longer doing anything with Dojo

Re: Calling a function from Attribute Table widget?

AnnCrystal — Mon, 30 Oct 2017 02:07:30 GMT

Thanks Robert for the tips.

Dojo is not going away so I am not sure about:
Sitepen is no longer doing anything with Dojo

My Sitepen reference was regarding training- Let me elaborate-I was planning take a Dojo online workshop which Sitepen used to host. But, they redesigned their website and all the pages which mentioned about the workshop schedules disappeared. So, I am stuck with no options for a jump-start training:(

Re: Calling a function from Attribute Table widget?

AnnCrystal — Sun, 12 Dec 2021 07:34:00 GMT

Robert Scheitlin, GISP wrote:
Ann,

Ahh, now I see what you were saying about the on event handler. So the issue I see in your code is that _AttributeTable is likely out of scope inside your on event handler. So you need to use lang.htich to get around that.
var _AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");
html.setAttr(this.domNode, 'title', this.label);
d = domConstruct.create('div');
on(d, 'click', lang.hitch(this, function{
  _AttributeTable._switchTable();
}),d);‍‍‍‍‍‍
Or you can use:
this._AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");
html.setAttr(this.domNode, 'title', this.label);
d = domConstruct.create('div');
on(d, 'click', function{
  this._AttributeTable._switchTable();
},d);
‍‍‍‍‍‍

Hi Robert:

I added the code to the widget. But on clicking the button, nothing happens. What can be wrong?

My full code of Widget here:

define([
'dojo/_base/declare',
'jimu/BaseWidget',
'dojo/_base/html',
'dojo/on',
'dojo/_base/lang',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/topic'
],
function(
declare,
BaseWidget,
html,
on,
lang,
domConstruct,
domClass,
dojoTopic) {
var clazz = declare([BaseWidget], {
name: 'AttributeTableToggle',
baseClass: 'jimu-widget-AttributeTableToggle',
icon: 'images/icon.png',
startup: function() {
this.inherited(arguments);
var _AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");
html.setAttr(this.domNode, 'title', this.label);
d = domConstruct.create('div');
on(d, 'click', lang.hitch(this, function(){
domClass.toggle(this, "selected");
dojoTopic.publish('attributeTable/toggle', "selected")
_AttributeTable._switchTable();
}),d);
// html.place(d, this.domNode);
}
});
return clazz;
});

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:34:03 GMT

Ann,

I can see from this that you are pretty new to JS coding. There should be errors in your browsers console for sure, assuming the widget even loads.

You have this line in your code:

var _AttributeTable = this.widgetManager.getWidgetsByName("AttributeTable");‍‍

But you you don't have this.widgetManager defined any where.

define([
...
    'jimu/WidgetManager',
...
],
  function(
...
    WidgetManager,
...‍‍‍‍‍‍‍‍‍

You are adding a div:

d = domConstruct.create('div');‍

But there is not style of class that specifies the height, width, color, etc.

Then you have commented out actually placing the div in your widgets domNode:

// html.place(d, this.domNode);‍

Re: Calling a function from Attribute Table widget?

AnnCrystal — Mon, 30 Oct 2017 13:11:32 GMT

Thanks Robert. Yes, I am new to js programming and that I have to jump in Dojo right away for my internship. I was trying to modify an old widget code which places div and closes the table using a div tag "selected". However, that stopped working. Then, I saw that Attribute table widget has a function _switchTable() and was trying to implement it. But I am confused about how to call it without even using "d" as in

d = domConstruct.create('div');

and this line:

on(d, 'click', lang.hitch(this, function(){
_AttributeTable._switchTable();
}),d);

I was hoping to call that function without creating the variable "d" as this function need to be called on widget button click. Is there a simple way to do that on the "on click" event? Thanks

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Mon, 30 Oct 2017 13:15:31 GMT

Ann,

So am I understanding you to say that you really do not want the widget to have a panel or UI you just want it to fire the switchtable method when the widget icon is clicked?

Re: Calling a function from Attribute Table widget?

AnnCrystal — Mon, 30 Oct 2017 13:17:35 GMT

Yes Robert, that's correct. I want to toggle Attribute Table when widget icon is clicked.

Re: Calling a function from Attribute Table widget?

RobertScheitlin__GISP — Mon, 30 Oct 2017 13:21:21 GMT

Then you should look at my Layer Toggle Button widget for guidance:

https://community.esri.com/docs/DOC-8592-layer-toggle-button-widget-version-22-01132017