topic Re: On Screen header widget panel modify allignment in ArcGIS Web AppBuilder Questions

On Screen header widget panel modify allignment

aishvaryvardhan — Thu, 09 Nov 2017 06:45:37 GMT

Hi,
By default all widgets are coming to right side on the header widget panel.
How can I customize like some widgets come on left and some on right

Any help will be highly appreciated

thanks

Ash

Re: On Screen header widget panel modify allignment

RobertScheitlin__GISP — Sat, 11 Nov 2017 15:19:54 GMT

Ash,

I am curious about this request. You know as the HeaderController widget is right now you can only have one widget open at a time... So what benefit would you get from have widget A open on the left and widget B onen on the right?

Re: On Screen header widget panel modify allignment

aishvaryvardhan — Sun, 12 Nov 2017 08:24:24 GMT

Hi Robert,
Right Robert one widget open at a time..
I am talking about panel ..
When we keep on adding widget they get arranged from right to left..
So I am like i want like 4 widgets to be form left to right , then a space and the 4 widgets from right to left..
this kind of alignment

Re: On Screen header widget panel modify allignment

RobertScheitlin__GISP — Sun, 12 Nov 2017 12:29:14 GMT

Ash,

So it sounds like you are wanting to splits the headers widget icons, some left and some right, is that correct?

Re: On Screen header widget panel modify allignment

aishvaryvardhan — Sun, 12 Nov 2017 14:21:59 GMT

Exactly Robert..

Re: On Screen header widget panel modify allignment

RobertScheitlin__GISP — Sat, 11 Dec 2021 19:55:41 GMT

Ash,

OK, that is a fairly simple edit to the apps main config.json and the HeaderController Widget.js files then:

HeaderController Widget.js (replace the _createIconNode with this one):

      _createIconNode: function(iconConfig) {
        console.info(iconConfig);
        var node, iconUrl;
        if (iconConfig.name === '__more') {
          iconUrl = this.folderUrl + 'images/more_icon.png';
        } else {
          iconUrl = iconConfig.icon;
        }

        var clazz = ((iconConfig.isRight) ? 'icon-node jimu-float-leading' : 'icon-node jimu-float-trailing');
        clazz += ((this.openedId === iconConfig.id)? ' jimu-state-selected': '');
        node = html.create('div', {
          'class': clazz,
          title: iconConfig.label,
          settingId: iconConfig.id,
          style: {
            width: this.height + 'px',
            height: this.height + 'px'
          },
          'data-widget-name': iconConfig.name
        }, this.containerNode);

        html.create('img', {
          src: iconUrl,
          style: {
            marginTop: ((this.height - 24) / 2) + 'px'
          }
        }, node);

        if (iconConfig.name === '__more') {
          on(node, 'click', lang.hitch(this, this._showMorePane, iconConfig));
        } else {
          on(node, 'click', lang.hitch(this, function() {
            this._onIconClick(node);
          }));
        }
        node.config = iconConfig;
        // if(iconConfig.defaultState){
        //   this.openedId = iconConfig.id;
        //   this._switchNodeToOpen(this.openedId);
        // }
        if (node.config.widgets && node.config.widgets.length > 1 &&
          node.config.openType === 'dropDown') {
          this._createDropTriangle(node);
        }

        //set current open node
        // if (this.openedId === iconConfig.id) {
        //   html.addClass(node, 'jimu-state-selected');
        //   if (node.config.widgets && node.config.widgets.length > 1 &&
        //     node.config.openType === 'dropDown') {
        //     this._openDropMenu(node);
        //   }
        // }
        return node;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the Apps main config.json add the new isRight property to icons you want to align to the right:

  "widgetPool": {
    "panel": {
      "uri": "themes/FoldableTheme/panels/FoldablePanel/Panel",
      "position": {
        "top": 5,
        "right": 5,
        "bottom": 5,
        "zIndex": 5,
        "relativeTo": "map"
      }
    },
    "widgets": [
      {
        "uri": "widgets/Legend/Widget",
        "version": "2.6",
        "id": "widgets_Legend_Widget_18",
        "name": "Legend",
        "index": 2,
        "isRight": true
      },
      {
        "uri": "widgets/LayerList/Widget",
        "version": "2.6",
        "id": "widgets_LayerList_Widget_19",
        "name": "LayerList",
        "index": 3,
        "isRight": true
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: On Screen header widget panel modify allignment

RobertScheitlin__GISP — Thu, 16 Nov 2017 12:53:44 GMT

Ash,

Did you try this solution?

Re: On Screen header widget panel modify allignment

aishvaryvardhan — Thu, 16 Nov 2017 13:46:41 GMT

Hi Robert,

Thanks for the concern, Not yet I am currently engaged with some other activity , will try in upcoming days and will confirm

Thanks