Need simple example: add tabs to widget

[JamesCrandall]

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

[RobertScheitlin__GISP]

Try setting the disabled on the pane as one of those other suggestions states

registry.byId('step2').set('disabled', true);

[Arne_Gelfert]

Darn - I've tried so many variations of this:

init.js:115 TypeError: registry.byId(...).set is not a function

[RobertScheitlin__GISP]

Arne,

   That tells me that it did not find the contentpane by the id then.  What function in your code are you putting this in (i.e. widget lifecycle, Startup, postCreate, etc, etc)?

[Arne_Gelfert]

So instead of using what I thought would be the id set in my div, I found in Dev Tools that it's actually something different. The following at least gives me a reference...

registry.byId('dijit_layout_ContentPane_1')

//  but

registry.byId('dijit_layout_ContentPane_1').set('disabled',true);

// does nothing

If I try what has been suggested elsewhere, e.g. here, I get an error:

dojo.style(registry.byId('dijit_layout_ContentPane_1').controlButton.domNode,{display:"none"});
dojo.style(registry.byId('dijit_layout_ContentPane_1').controlButton.domNode,{display:"inline-block"});

>>TypeError: Cannot read property 'domNode' of undefined

What is this controlButton property? Why is it not available?

[Arne_Gelfert]

Regarding your question where all this is created... it's all happening in my postcreate() function.

[RobertScheitlin__GISP]

postcreate is probably to early in the widget life cycle for this. I am not sure if all the widgets dom element would be created and rendered inside that function. The controlButton property would be the actual tab in the tab controller.

[Arne_Gelfert]

Interesting.... let me try and move it to startup(). -- Any useful guidance as to what elements of your code should live where in the lifecycle? I have often wonder. I figured that many of not most of my function, especially if they don't really interact with DOM and layout could be defined early. I once had some event handlers living in open() and was told you'd end up with a bunch new ones each time that widget was opened, which could lead to memory leaks. But still I never really have though about it further. Maybe stuff for another post. Let me try what you suggested.

[RobertScheitlin__GISP]

Widget life cycle—ArcGIS Web AppBuilder (Developer Edition) | ArcGIS for Developers 

Creating event handlers in in the onOpen is definitely a bad idea. Unless you are first checking if the event handler exists and then removing it before creation. 

[Arne_Gelfert]

I know, I know... I did that months ago - about the time you started answering my first helpless cries for expertise. I've learned a few tricks since then. That ESRI page is alright. As usual, they could do better though.

[Arne_Gelfert]

Okay, so I realized that I had it in startup()... no idea what's going here. But I really don't think I have the time to code around all these dojo quirks. Dojo seems to get in the way of getting stuff done all the time. I'll go back to trying a basic n HTML/css tab container.