Customising Header Controller?

[GarethYoung1]

Robert Scheitlin, GISP‌

Is there a way I can group my widgets on the header controller to distinguish tasks?

Ideally like 4 widgets, then a white line, then 9 widgets and a line, and then 4 widgets?

[RobertScheitlin__GISP · Accepted solution]

Gareth,

  Sure. In the HeaderController widget.js _createIconNode function make this change (add lines 21-23):

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

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

        if(iconConfig.hasOwnProperty('newGroup') && iconConfig.newGroup){
          html.addClass(node, 'newGroup');
        }
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the HeaderController\css\style.css, make this addition (Lines 8-10):

...
.jimu-widget-header-controller .icon-node{
  cursor: pointer;
  opacity: 0.6;
  text-align: center;
  border-right: 1px solid #323e4f;
}
.jimu-widget-header-controller .icon-node.newGroup{
  border-right: 2px solid #fff;
}
...‍‍‍‍‍‍‍‍‍‍‍

In your apps main config.json Add line 22 newGroup property to any widget that you want to mark the end of one group and the start of a new group.

"widgetPool": {
    "panel": {
      "uri": "themes/FoldableTheme/panels/FoldablePanel/Panel",
      "position": {
        "top": 5,
        "right": 5,
        "bottom": 5,
        "zIndex": 5,
        "relativeTo": "map"
      }
    },
    "widgets": [
      {
        "name": "introJS",
        "uri": "widgets/introJS/Widget",
        "index": 2,
        "id": "widgets_introJS_Widget_21",
        "version": "2.9",
        "position": {
          "relativeTo": "map"
        },
        "newGroup": true
      },
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[GarethYoung1]

Thanks Robert.  This is awesome