nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Creating Tabs in widget.html file

TimWitt2

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

Encontre mais publicações marcadas com

Accepted answers

RobertScheitlin__GISP

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

All comments

XuanKuai

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!

RobertScheitlin__GISP

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.

ShaikhRizuan

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

RobertScheitlin__GISP

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

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

TimWitt2

Thanks Robert, I will start using this approach.

RobertScheitlin__GISP

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.