Creating Tabs in widget.html file

7243
8
Jump to solution
02-24-2015 10:54 AM
TimWitt2
MVP Regular Contributor

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

<div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">

   <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">

     Text here

   </div>

   <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">

       Text here

   </div>

   <div data-dojo-type="dijit/layout/ContentPane" title="My last tab" >

       Text here

   </div>

   </div>

Thanks,

Tim

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

JS

      _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);
      },

View solution in original post

0 Kudos
8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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>

JS

      _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);
      },
0 Kudos
TimWitt2
MVP Regular Contributor

Thanks Robert, I will start using this approach.

0 Kudos
RobertMueller_Jr1
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

RobertMueller_Jr1
New Contributor III

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

0 Kudos
ShaikhRizuan
New Contributor III

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).

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

XuanKuai
New Contributor III

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!

0 Kudos