On Screen header widget panel modify allignment

213
7
11-08-2017 10:45 PM
aishvaryvardhan
New Contributor III

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

0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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? 

0 Kudos
aishvaryvardhan
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ash,

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

aishvaryvardhan
New Contributor III

Exactly Robert.. 

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
      },
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Ash,


   Did you try this solution?

0 Kudos
aishvaryvardhan
New Contributor III

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

0 Kudos