Contrary to ESRI documentation, custom group icons can be defined

LefterisKoumis — Sun, 12 Dec 2021 10:24:54 GMT

According to the "Controller widget" post posted at Controller widget—Web AppBuilder for ArcGIS | ArcGIS, developers cannot define custom group widget icons.

"Tip:

If you want to change a group widget name, go back to the group widget and click the samll edit icon to change it. The group widget icon however cannot be changed currently."

However, this is not accurate. There are two ways to define your own icon for a group widget. I tried both ways in the Lauchpad and foldable themes with success.

The easier way is to edit the app config and simply define the image to be used for the group widget.

Just add line 4 below.

"groups": [
      {
        "label": "Layers Info",
        "icon":"images/tools.png",
        "widgets": [
          {
            "uri": "widgets/Legend/Widget",
            "version": "2.4",
            "id": "widgets_Legend_Widget_17",
            "name": "Legend",
            "index": 2
          },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Or you can modify the ConfigManager.js that resides under app#\jimu.js and add the else conditions at line 19 for as many group icons you may want to use.

 _addDefaultOfWidgetGroup: function(config){
      //group/widget labe, icon
      jimuUtils.visitElement(config, lang.hitch(this, function(e, info){
        e.isOnScreen = info.isOnScreen;
        if(e.widgets){
          //it's group
          e.gid = e.id;
          if(e.widgets.length === 1){
            if(!e.label){
              e.label = e.widgets[0].label? e.widgets[0].label: 'Group';
            }
            if(!e.icon){
              if(e.widgets[0].uri){
                e.icon = this._getDefaultIconFromUri(e.widgets[0].uri);
              }else{
                e.icon = 'jimu.js/images/group_icon.png';
              }
            }
          }else{
               if (e.label === "my group"){
                    e.icon = 'jimu.js/images/mylogo.png';
               } else if (e.label === "my group1") {
               e.icon = 'jimu.js/images/mylogo1.png';               
               } 
               //add as many custom groups icons you wish....
               
               else {
                    e.icon = e.icon? e.icon: 'jimu.js/images/group_icon.png';
                    e.label = e.label? e.label: 'Group_' + info.index;
               }
          }
        }else{
          e.gid = info.groupId;
        }
      }));
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic Contrary to ESRI documentation, custom group icons can be defined in Web AppBuilder Custom Widgets Questions

Contrary to ESRI documentation, custom group icons can be defined