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

1953
10
10-21-2020 08:26 AM
MichelTurmel
New Contributor III

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>
  <div data-dojo-attach-point="tabIdentify">
    <div class="my-tab-node" data-dojo-attach-point="tabNode1">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    <div class="my-tab-node" data-dojo-attach-point="tabNode2">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>
  </div>
</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([_WidgetsInTemplateMixinBaseWidget], {
      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(thisfunction(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?

10 Replies
RobertScheitlin__GISP
MVP Emeritus

Michel,

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

return declare([_WidgetsInTemplateMixin, BaseWidget], {

to

return declare([BaseWidget, _WidgetsInTemplateMixin], {

BaseWidget need to be first.

0 Kudos
MichelTurmel
New Contributor III

Robert,

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Michel,

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

0 Kudos
MichelTurmel
New Contributor III

Robert,

Yes, I am using WAB 2.6 with Portal 10.6.

0 Kudos
MichelTurmel
New Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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 

0 Kudos
MichelTurmel
New Contributor III

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!

0 Kudos
MichelTurmel
New Contributor III

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos