On Screen header widget panel modify allignment

[aishvaryvardhan]

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

[RobertScheitlin__GISP]

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? 

[aishvaryvardhan]

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

[RobertScheitlin__GISP]

Ash,

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

[aishvaryvardhan]

Exactly Robert.. 

[RobertScheitlin__GISP]

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
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Ash,

   Did you try this solution?

[aishvaryvardhan]

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