Need simple example: add tabs to widget

6104
57
Jump to solution
01-19-2018 08:44 AM
JamesCrandall
MVP Frequent Contributor

LaunchPad theme

WABDev 2.5

Custom Widget

I'm looking for the simplest, most straight forward example of adding 2 tabs to a new widget (an absolute vanilla panel).  THIS thread seemed to be close but I'm not seeing the expected result (no CSS example?). 

Looking for the most basic form of HTML, JS and CSS to get this implemented.

TIA

0 Kudos
57 Replies
RobertScheitlin__GISP
MVP Emeritus

I personally use the jimu.js/dijit/TabContainer. It is a html css tab container.

0 Kudos
Arne_Gelfert
Occasional Contributor III

It's exactly what I've been jacking around with.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

I thought you said you were use the dojo dijit/layout/TabContainer ...

0 Kudos
Arne_Gelfert
Occasional Contributor III

Oh my! It's the jungle out there... I started with 

"dijit/layout/TabContainer"

...based on the earlier examples in this thread... then I got to churning through online examples and ended up trying to get it work with...

"jimu/dijit/TabContainer"

... somewhere along the way, I also played with ... 

"jimu/dijit/TabContainer3"

I've tossed them all and am using a pure HTML/CSS/JS solution that I understand and that gives me full control over events and enabling/disabling tabs. I'll post an example when I'm done. In this case, jimu/dojo was too much overhead for me to take the time and decipher. Thanks again for your efforts.  Maybe one day in our post-Covid days, I'll get the chance to buy you a drink at an ESRI event! 

Arne_Gelfert
Occasional Contributor III

Should be step1Node, step2Node... in HTML ... dojo-attach-point has to match "content:..." ... I had that right, just messed up while typing this post. So this is not the solution.

<div class="esriCTTabDiv" data-dojo-attach-point="tabDiv" data-dojo-type="dijit/layout/TabContainer">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="step1Node" class="esriCTTabNode" id="step1Node"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="step2Node" class="esriCTFullHeight esriCTTabNode" id="step2Node"></div>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-attach-point="step3Node" class="esriCTFullHeight esriCTTabNode" id="step3Node" ></div>
 </div>
0 Kudos
MichelTurmel
New Contributor III

I am trying to replicate this example  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?

0 Kudos
Arne_Gelfert
Occasional Contributor III

Michel. I'm no expert at this... I'm constantly relying on feedback from folks like Robert around here. I would try replacing...

this.tabContainer = new TabContainer ({
...
   selected: this.selTab}
...)

with

this.tabContainer = new TabContainer ({
...
    selected: "Tab 1"}
...)
0 Kudos
MichelTurmel
New Contributor III

Good morning Arne,

Robert provided me his "Identify" widget and I have used version 2.5 and it works with my 2.6 WAB environment. I will use it as a guide to resolve my issue and will let you know how I have resolved my issue. I will also try your suggestion.

Thank you for your reply it is really appreciated!

0 Kudos