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
Solved! Go to Solution.
I personally use the jimu.js/dijit/TabContainer. It is a html css tab container.
It's exactly what I've been jacking around with.
I thought you said you were use the dojo dijit/layout/TabContainer ...
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!
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>
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:
Widget.html:
Widget.js:
Based on the console.log messages that I have included in the above code, it dies in the following section:
Would you have any suggestions on how I could resolve this?
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"} ...)
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!