topic Re: Creating Tabs in widget.html file in ArcGIS Web AppBuilder Questions

Creating Tabs in widget.html file

TimWitt2 — Tue, 24 Feb 2015 18:54:33 GMT

Hey everybody,

I am trying to create tabs in my widget.html files but can't seem to get it to work. Did anybody have any success with this?

I want it to look like this

Text here

</div>

Text here

</div>

Text here

</div>

Thanks,

Tim

Re: Creating Tabs in widget.html file

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:07:34 GMT

Tim,

In all of my widget that use tabs I just create a div and then do the djit stuff in the js file.

HTML

    <div class="identify-tab-node" data-dojo-attach-point="tabNode1">
      <label>${nls.descriptionlabel}</label>
      <br>
      ......
    </div>

      _initTabContainer: function () {
        var tabs = [];
        tabs.push({
          title: this.nls.identifylabel,
          content: this.tabNode1
        });
        tabs.push({
          title: this.nls.resultslabel,
          content: this.tabNode2
        });
        this.selTab = this.nls.identifylabel;
        this.tabContainer = new TabContainer({
          tabs: tabs,
          selected: this.selTab
        }, this.tabIdentify);

        this.tabContainer.startup();
        this.own(on(this.tabContainer,'tabChanged',lang.hitch(this,function(title){
          if(title !== this.nls.resultslabel){
            this.selTab = title;
          }
        })));
        utils.setVerticalCenter(this.tabContainer.domNode);
      },

Re: Creating Tabs in widget.html file

TimWitt2 — Tue, 24 Feb 2015 19:32:20 GMT

Thanks Robert, I will start using this approach.

Re: Creating Tabs in widget.html file

RobertMueller_Jr1 — Tue, 09 Feb 2016 17:52:54 GMT

Hey Tim-

Would you mind assisting me with implementing the code above? I seem to be having some growing pains with the learning curve with the new WAB widgets (from older FLEX/ESRI JS API). I've also been clicking through these sites to learn more

Web AppBuilder Custom Widgets

Naming conventions—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

So - I'm using the "Demo" widget template (provided with WAB Dev version) as a boilerplate. I understand the html above to replace what's currently in the "widget.html", and the .js above to insert into the "widget.js" (with define/function parameters) as follows:

define([

'dojo/_base/declare',

'jimu/BaseWidget',

'dijit/layout/TabContainer'

function(declare, BaseWidget,TabContainer, ContentPane) {

//To create a widget, you need to derive from BaseWidget.

return declare([BaseWidget], {

// DemoWidget code goes here

//please note that this property is be set by the framework when widget is loaded.

//templateString: template,

baseClass: 'jimu-widget-demo',

postCreate: function() {

this.inherited(arguments);

console.log('postCreate');

startup: function() {

this.inherited(arguments);

this.mapIdNode.innerHTML = 'map id:' + this.map.id;

console.log('startup');

////

////Code Above in the post

////

onOpen: function(){

console.log('onOpen');

onClose: function(){

console.log('onClose');

onMinimize: function(){

console.log('onMinimize');

onMaximize: function(){

console.log('onMaximize');

onSignIn: function(credential){

/* jshint unused:false*/

console.log('onSignIn');

onSignOut: function(){

console.log('onSignOut');

}

});

However when I add the widget and refresh the WAB template, I can add the widget into a spot but then I either get a loading screen or an error saying "create widget error: widget\demo\widget". I can add other custom widgets, so I haven't quite figured out how to implement Dojo as of yet with these widgets.

Any help would be much appreciated.

Thanks

-Bob

Re: Creating Tabs in widget.html file

RobertScheitlin__GISP — Sat, 11 Dec 2021 08:07:36 GMT

Bob,

Your likely issue is that you are not using _widgetsInTemplate mixin in your code:

Notice lines( 4, 7 and 9)

define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    'dijit/_WidgetsInTemplateMixin',
    'dijit/layout/TabContainer'
    ],
function(declare, BaseWidget, _WidgetsInTemplateMixin, TabContainer, ContentPane) {
  //To create a widget, you need to derive from BaseWidget.
  return declare([BaseWidget, _WidgetsInTemplateMixin], {
    // DemoWidget code goes here

At this link: Define the template—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Bottom of the page you will find this note:

Note:

By default, the widget’s template does not support dijits in the template. If you need to use dijits in the template, add dijit/_WidgetsInTemplateMixin to your required list, and add this class to your widget. Ensure that you have all the required dijits for your template. For more information, see Creating template-based widgets.

Re: Creating Tabs in widget.html file

RobertMueller_Jr1 — Tue, 09 Feb 2016 19:16:33 GMT

Thanks Robert! - I will give that a try. Not sure how I missed (disregarded really) that in the documentation.

Re: Creating Tabs in widget.html file

ShaikhRizuan — Sun, 05 Mar 2017 13:08:20 GMT

Hi Robert,

I have tried your above code, and its working fine. But when i am trying to create more than 3 tabs, It is not appearing correctly. Please find below image.

Can u please help me out.. how to make it correct like multiple tabs created in dojo with tab strips shown below, also i would like to create nested tabs (i.e. tab inside a tab).

Re: Creating Tabs in widget.html file

RobertScheitlin__GISP — Sun, 05 Mar 2017 16:25:50 GMT

Shaikh,

When using the jimu/dijits/TabContainer it is very limited compared to dojo/layout/tabContainer in its ability to show many tabs and not truncate the text label for them. If you need more of the standard dojo layout tab container ability then you need to switch to that instead.

Re: Creating Tabs in widget.html file

XuanKuai — Tue, 03 Dec 2019 21:10:15 GMT

Hi Shaikh,

How exactly did you implemented Robert's code to get what's shown in your picture. Is there any chance I can see your HTML and JS files? Thank you!