Need simple example: add tabs to widget

5970
57
Jump to solution
01-19-2018 08:44 AM
JamesCrandall
MVP Frequent Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

James,

 Try this. All I did was change the order of the modules in the define. It is recommended that basewidget and mixins be at the beginning of your array.

define(["dojo/_base/declare",
     "dijit/_WidgetsInTemplateMixin",
     "jimu/BaseWidget",
     "dojo/_base/lang",
     "dojo/_base/Color",
     "dojo/_base/array",
     "dojo/dom-construct",
     "dojo/dom-class",
     "dojo/keys",
     "dojo/on",
     "dojo/Deferred",
     "dijit/layout/TabContainer"
], 
  function(
     declare,
     _WidgetsInTemplateMixin,
     BaseWidget,
     lang,
     Color,
     array,
     domConstruct,
     domClass,
     keys,
     on,
     Deferred,
     TabContainer
) {

  return declare([BaseWidget, _WidgetsInTemplateMixin], {
               // Custom widget code goes here

               baseClass: "jimu-widget-customwidget",
               LoadingIndicator: null,
               currentFeatures: null,
               printOutlineLayer: null,
               printOutlineConnects: [],
               _isPreparedExhibit: false,

               startup: function() {
                    //  summary:
                    //      Called on initial widget load
                    //      This function sets all of our configurable variables to those set in the settings
                    //      page/file.

                    this.tab = new TabContainer({
                         tabs: [{
                           title: this.nls.input,
                           content: this.inputPaneNode
                         }, {
                           title: this.nls.output,
                           content: this.outputPaneNode
                         }],
                         selected: this.nls.input
                      });
                    this.tab.placeAt(this.domNode);
                    this.tab.startup();

                    window.map = this.map;
                    window.widget = this;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

57 Replies
KenBuja
MVP Esteemed Contributor

This is how I've added tabs to my widget's Settings

Setting.html

<div class="esriCTTabDiv" data-dojo-attach-point="tabDiv">
  <div data-dojo-attach-point="agolSettingsNode" class="esriCTTabNode">
    ...
  </div>
  <div data-dojo-attach-point="prioritizationSettingsNode" class="esriCTFullHeight esriCTTabNode">
    ...
  </div>
  <div data-dojo-attach-point="otherSettingsNode" class="esriCTFullHeight esriCTTabNode">
    ...  
  </div>
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Setting.js

define([.., 'jimu/dijit/TabContainer3', ..], function (.., TabContainer3, ..) {

   _initTabs: function _initTabs() {
      var agolSettingTab, prioritizationTab, otherSettingsTab, tabs;
      agolSettingTab = {
        title: this.nls.agolSettings.agolSettingsTabLabel,
        content: this.agolSettingsNode
      };
      prioritizationTab = {
        title: this.nls.prioritization.prioritizationSettingsTabLabel,
        content: this.prioritizationSettingsNode
      };
      otherSettingsTab = {
        title: this.nls.otherSettings.otherSettingsTabLabel,
        content: this.otherSettingsNode
      };
      tabs = [agolSettingTab, prioritizationTab, otherSettingsTab];
      this._tab = new TabContainer3({
        tabs: tabs
      }, this.tabDiv);
      this._tab.startup();
    },

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Which results in this:

JamesCrandall
MVP Frequent Contributor

Thank you, Ken.  Very much appreciated.  However, I am looking for a way to add tabs to an actual widget that is launched/opened --- for example the Geoprocessing Widget has two tabs.

Again, thank you!

0 Kudos
KenBuja
MVP Esteemed Contributor

This should work equally well in the main widget.

You can always see how that widget was built by opening up its code in the client\stemapp\widgets folder. In it, you'll see

     this.tab = new TabContainer({
        tabs: [{
          title: this.nls.input,
          content: this.inputPaneNode
        }, {
          title: this.nls.output,
          content: this.outputPaneNode
        }],
        selected: this.nls.input
      });
      this.tab.placeAt(this.domNode);
      this.tab.startup();
JamesCrandall
MVP Frequent Contributor

That looks like it's right from the Geoprocessing Widget.js

I added that in my startup: function() but no tabs appear on the widget panel when it opens (no errors and widget does open).  I want the "AppNo" label & text box and "Query" button placed on a tab that appears at the top.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

James,


  That looks like you do not have widgetsintemplate (I am on my phone so I don’t have access to the exact name and case right now) class added to you define list and in the array.

0 Kudos
JamesCrandall
MVP Frequent Contributor

No worry Robert.  I'll check into the widgetsintemplate -- thanks!

I have "dijit/_WidgetsInTemplateMixin" in the define

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

That is it but you need it in the array after the define where baseWidget is listed as well (hard to explain from memory).

0 Kudos
JamesCrandall
MVP Frequent Contributor

Not a problem, Robert.  This is essentially what I have after the declare() and function() --- both have the _WidgetsInTemplateMixin references.

//To create a widget, you need to derive from BaseWidget.
          return declare([BaseWidget,
               _WidgetsInTemplateMixin
          ], {
               // Custom widget code goes here

               baseClass: "jimu-widget-customwidget",
               LoadingIndicator: null,
               currentFeatures: null,
               printOutlineLayer: null,
               printOutlineConnects: [],
               _isPreparedExhibit: false,

               startup: function() {
                    //  summary:
                    //      Called on initial widget load
                    //      This function sets all of our configurable variables to those set in the settings
                    //      page/file.

                    this.tab = new TabContainer({
                         tabs: [{
                           title: this.nls.input,
                           content: this.inputPaneNode
                         }, {
                           title: this.nls.output,
                           content: this.outputPaneNode
                         }],
                         selected: this.nls.input
                      });
                    this.tab.placeAt(this.domNode);
                    this.tab.startup();

                    window.map = this.map;
                    window.widget = this;

                    this.inherited(arguments);
                    this.geoLayerUrl = this.config.geoLayerUrl;
                    this.lookupLayerUrl = this.config.lookupLayerUrl;
                    this.majorRoadsUrl = this.config.majorRoadsUrl;
                    this.streetsUrl = this.config.streetsUrl;
                    this.countyUrl = this.config.countyUrl;
                    this.countyFilterGPUrl = this.config.countyFilterGPUrl;
                    this.printTaskUrl = this.config.printTaskUrl;
                    this.geometryServiceUrl = this.config.geometryServiceUrl;
                    this.permitUrl = this.config.permitUrl;
                    this.canalLayerUrl = this.config.canalLayerUrl;

                    this.queryTask = new QueryTask(this.lookupLayerUrl + "/1");
                    this.adminQueryTask = new QueryTask(this.lookupLayerUrl + "/3");

                    this.populatePermitFieldData();
                    this.createFacilityFeatureLayer();
               },
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

James,

  so you have it in your define and your declare right? You did not post your define portion.

0 Kudos