topic Re: AttributeTable Widget - Individual Color for Each Tab in Web AppBuilder Custom Widgets Questions

AttributeTable Widget - Individual Color for Each Tab

CurtNielsen — Thu, 02 Jan 2020 12:41:48 GMT

Happy New Year!

How can I define a individual color for each tab in the AttributeTable widget?

Thank you!

Curt

Re: AttributeTable Widget - Individual Color for Each Tab

RobertScheitlin__GISP — Thu, 02 Jan 2020 15:42:44 GMT

Curt,

How in depth are you wanting to go?.. A specific color for a specific layer or just a different color for each tab?

Re: AttributeTable Widget - Individual Color for Each Tab

CurtNielsen — Thu, 02 Jan 2020 15:46:01 GMT

Hi Robert.

Just a different color for each tab.

Re: AttributeTable Widget - Individual Color for Each Tab

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:33:28 GMT

Curt,

In your apps themes\Theme name\common.css add these rule (you need one for each tab):

div[widgetid="dijit_layout_TabContainer_0_tablist_dijit_layout_ContentPane_0"] {
  background-color: beige !important;
}

div[widgetid="dijit_layout_TabContainer_0_tablist_dijit_layout_ContentPane_1"] {
  background-color: rgb(160, 160, 83) !important;
}

div[widgetid="dijit_layout_TabContainer_0_tablist_dijit_layout_ContentPane_2"] {
  background-color: rgb(96, 160, 83) !important;
}‍‍‍‍‍‍‍‍‍‍‍

Just sequence the number at the end of ContentPane_

Re: AttributeTable Widget - Individual Color for Each Tab

CurtNielsen — Thu, 02 Jan 2020 17:58:19 GMT

Super! Work great!

Anyway to set the default selected tab to "... layout_ContentPane_1" to the default versus content pane 0?

I started looking in ...\server\apps\2\widgets\AttributeTable\table\_FeatureTable.js, but have not found where to set it.

Much appreciated.

Re: AttributeTable Widget - Individual Color for Each Tab

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:33:31 GMT

Curt,

It is actually in the widget.js initDiv function (line 42 added).

      initDiv: function() {
        this.AttributeTableDiv = html.create("div", {}, this.domNode);
        html.addClass(this.AttributeTableDiv, "jimu-widget-attributetable-main");

        var tabDiv = html.create("div");
        html.place(tabDiv, this.AttributeTableDiv);

        this.tabContainer = new TabContainer({
          style: "width: 100%;"
        }, tabDiv);
        html.setStyle(this.tabContainer.domNode, 'height', (this.normalHeight) + 'px');
        
        //if(has("mozilla")){
        //  this.tabContainer.tablist.containerNode.style.width = "50000px";
        //}
        //We need to startup tabContainer before call addChild method, or it will result in issue #8678
        this.tabContainer.startup();

        var configInfos = this._resourceManager.getConfigInfos();
        var len = configInfos.length;
        
        for (var j = 0; j < len; j++) {
          var configInfo = configInfos[j];
          if (configInfo.show) {
            var json = lang.clone(configInfo);
            var paneJson = {};

            paneJson.paneId = json.id;
            paneJson.title = json.name;
            paneJson.name = json.name;
            paneJson.layerType = this._layerTypes.FEATURELAYER;
            paneJson.style = "height: 100%; width: 100%; overflow: visible;";
            var cp = new ContentPane(paneJson);
            this.layerTabPages[j] = cp;
            this.tabContainer.addChild(cp);
          }
        }

        if (len > 0) {
          // tabListWrapperHeight + tolerance
          this.noGridHeight = this._getGridTopSectionHeight() + 5;
          this.tabContainer.selectChild(this.layerTabPages[1]);
        } else {
          this._toggleNoTableMessage(true);
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered.