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?
Solved! Go to 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
},
...
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
},
...
Thanks Robert. This is awesome