Can I change the icon of the widget group in Launch Pad theme?

3521
6
04-12-2016 03:08 PM
JakeCliffton
New Contributor III

I would like to change the icon of the widget group: need to change the folder icon to the query icon.

194656.png

But the Develop Edition does not provide any options for that. Can I change it from the source code somewhere? Thanks a lot!

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Emeritus

Jake,

  Sure just change or edit the group_icon.png:

[install dir]\server\apps\[app #]\themes\LaunchpadTheme\widgets\AnchorBarController\images\group_icon.png

C_EHoward
Occasional Contributor III

Is there any way to change the folder icon if you a have more than one group? I'd like to have a few widget groups with different icons for each group if possible so its easier to distinguish types of tools.

also- is there a place to see the images used for each widget? I started my app in AGOL and then imported to the dev edition so I am not sure where to look for this stuff

thanks

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

C E,

  You would have to do some extensive development to have a specific icon for individual groups (I have not had a need to attempt this so I don't have any code for this). The icons for each widget are inside the widgets folder in the images folder (called icon.png).

C_EHoward
Occasional Contributor III

Thanks Robert-- that's kinda what I thought in terms of the amount of effort it would take. I'll stick with my original plan to make unique-looking custom icons for each type of tool to differentiate and save the folder for something more generic. thanks for the quick response.

0 Kudos
LefterisKoumis
Occasional Contributor III

You can change the icon of groups by adding the code after line 20.

    _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;
        }
      }));
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
AldwinGregorio
New Contributor III

Have you tried adding icon and your icon location in your main config? Something like this.

0 Kudos