topic How to resolve the issue Cannot read property 'domNode' of undefined in Web AppBuilder Custom Widgets Questions

How to resolve the issue Cannot read property 'domNode' of undefined

MichelTurmel — Wed, 21 Oct 2020 15:26:43 GMT

I am trying to replicate the code in "Need simple example: add tabs to widget" on GeoNet but I get: TypeError: Cannot read property 'domNode' of undefined
at Object._createTab (TabContainer.js?wab_dv=2.6:91)

Here are my files:

style.css:

.my-tab-node{

position:absolute !important;

width:100% !important;

height:auto !important;

top:0 !important;

bottom:0 !important;

}

Widget.html:

<div>

<h3>London</h3>

<p>London is the capital city of England.</p>

</div>

<h3>Paris</h3>

<p>Paris is the capital of France.</p>

</div>

Widget.js:

define(['dojo/_base/declare',

'dijit/_WidgetsInTemplateMixin',

'jimu/BaseWidget',

'jimu/dijit/TabContainer',

'jimu/utils',

'dojo/_base/lang',

'dojo/on'],

function(declare,

_WidgetsInTemplateMixin,

BaseWidget,

TabContainer,

utils,

lang,

on) {

return declare([_WidgetsInTemplateMixin, BaseWidget], {

baseClass: "tab",

postCreate: function() {

this.inherited(arguments);

console.log('postCreate');

startup: function() {

this.inherited(arguments);

console.log('startup');

this._initTabContainer();

_initTabContainer: function() {

console.log('_initTabContainer');

var tabs = [];

tabs.push({

title: 'Tab 1',

content: this.tabNode1

});

tabs.push({

title: 'Tab2',

content: this.tabNode2

});

this.selTab = 'Tab 1';

console.log('before new TabContainer');

this.tabContainer = new TabContainer({

tabs: tabs,

selected: this.selTab

}, this.tabIdentify);

console.log('before this.tabContainer.startup()')

this.tabContainer.startup();

this.own(on(this.tabContainer, 'tabChanged', lang.hitch(this, function(title) {

if (title !== 'Tab 1') {

//do something now that Tab 2 has been selected

}

})));

utils.setVerticalCenter(this.tabContainer.domNode);

}

});

Based on the console.log messages that I have included in the above code, it dies in the following section:

this.tabContainer = new TabContainer({

tabs: tabs,

selected: this.selTab

}, this.tabIdentify);

Would you have any suggestions on how I could resolve this?

Re: How to resolve the issue Cannot read property 'domNode' of undefined

RobertScheitlin__GISP — Wed, 21 Oct 2020 15:55:25 GMT

Michel,

Sounds crazy but switch the array order in this line of your code.

return declare([_WidgetsInTemplateMixin, BaseWidget], {‍

return declare([BaseWidget, _WidgetsInTemplateMixin], {‍

BaseWidget need to be first.

Re: How to resolve the issue Cannot read property 'domNode' of undefined

MichelTurmel — Wed, 21 Oct 2020 16:17:36 GMT

Robert,

I have just changed the order as stated and I still get the same error:

Re: How to resolve the issue Cannot read property 'domNode' of undefined

RobertScheitlin__GISP — Wed, 21 Oct 2020 16:43:06 GMT

Michel,

So based on the error can I take it that you are using WAB 2.6?

Re: How to resolve the issue Cannot read property 'domNode' of undefined

MichelTurmel — Wed, 21 Oct 2020 16:47:33 GMT

Robert,

Yes, I am using WAB 2.6 with Portal 10.6.

Re: How to resolve the issue Cannot read property 'domNode' of undefined

MichelTurmel — Wed, 21 Oct 2020 20:32:33 GMT

Hi Robert,

Is the fact that I am using WAB 2.6 the issue? Is there a way around to resolve this issue while continuing to use 2.6 and if not then what version of Portal and WAB would be required?

Re: How to resolve the issue Cannot read property 'domNode' of undefined

RobertScheitlin__GISP — Wed, 21 Oct 2020 20:43:05 GMT

I just asked about the version so I could do testing in that version. 2.6 is a little old considering we are at 2.17 now. But I know my identify widget that uses tabs worked fine back in 2.6. I can not test in Portal 10.6 though. Can you add my identify widget 2.5 version to your Portal and make sure that there is not a bigger WAB issue on your end. If that widget works with Tabs then it is a issue specific to your widgets code (that I can not see).

https://community.esri.com/docs/DOC-3250-identify-widget-version-215-6162020

Re: How to resolve the issue Cannot read property 'domNode' of undefined

MichelTurmel — Wed, 21 Oct 2020 21:39:48 GMT

Robert,

I ran your identify widget 2.5 version on my machine and it is working fine. I will compare it with my code and make the appropriate changes. I may ask you some question later on but for now I will get busy.

I really appreciate your help!

Re: How to resolve the issue Cannot read property 'domNode' of undefined

MichelTurmel — Tue, 27 Oct 2020 21:32:15 GMT

Robert,

Looking at your Identify widget, I see that your "startup: function ()" is "(property) startup: type startup"

while the "startup" in my widget is "(property) startup: (...agrs: any[]) => void

How do I make my "startup" a type of startup?

Re: How to resolve the issue Cannot read property 'domNode' of undefined

RobertScheitlin__GISP — Wed, 28 Oct 2020 12:24:00 GMT

Michel,

That tells that your line this.tabContainer is not returning an actual jimu/dijit/TabContainer. Now why is whats hard to say. It looks like your module order is correct in your define.

Re: How to resolve the issue Cannot read property 'domNode' of undefined

MichelTurmel — Thu, 29 Oct 2020 17:08:42 GMT

Thank you for your reply Robert,

I have used your Identify 2.5 widget code and I have commented out everything except the code that creates the tab. I will try to add all my code in the striped down version.