topic Re: How do I re-size an individual widget icon? in Web AppBuilder Custom Widgets Questions

How do I re-size an individual widget icon?

MikeAndres1 — Thu, 19 May 2016 21:47:52 GMT

I need to re-size the icon of an individual widget. By default, the size is 40px by 40px, but I need it to be 150px by 75px. I would like all of the remaining widget icons to be 40px by 40px.

Thanks

Re: How do I re-size an individual widget icon?

RobertScheitlin__GISP — Fri, 20 May 2016 00:03:55 GMT

Mike,

This is going to a difficult task either way but I need to know what theme you are using before I even know where to begin.

Re: How do I re-size an individual widget icon?

MikeAndres1 — Fri, 20 May 2016 13:30:17 GMT

Robert,

Thanks for the response. I am using the jewelry box theme. My goal is to place the about widget in the bottom-left corner of the screen and have the icon of that widget be an image that is 150px by 75px. So far I have inserted and placed the widget in the config.js file.

Re: How do I re-size an individual widget icon?

RobertScheitlin__GISP — Sun, 22 May 2016 20:30:18 GMT

Mike,

Well this will take some effort. I will outline the step below:

1. Add the about widget to one of the widget place holders

2. Modify the apps main config.json to use bottom parameter instead of top:

{

"position": {

"left": 55,

"bottom": 45,

"relativeTo": "map"

"id": "About_24",

"name": "About",

"label": "About",

"version": "2.0.1",

"uri": "widgets/About/Widget",

"config": "configs/About/config_About.json",

"icon": "configs/About/icon_About.jpeg"

3. go into the configs/About/ folder and replace the small resized icon image with your desired size image (icon_About.jpeg in my case).

4. Next go to the [install dir]\server\apps\[app#]\jimu.js\OnScreenWidgetIcon.js and add this bold code to the postCreate function:

postCreate: function(){

this.inherited(arguments);

this.iconNode = html.create('img', {

src: this.widgetConfig.icon

}, this.domNode);

html.setAttr(this.domNode, 'title', this.widgetConfig.label);

html.setAttr(this.domNode, 'data-widget-name', this.widgetConfig.name);

this.own(on(this.domNode, 'click', lang.hitch(this, function(){

this.onClick();

})));

if(this.widgetConfig.label === "About"){

html.addClass(this.domNode, "myAbout");

}

5. Now open the [install dir]\server\apps\[app#]\jimu.js\css\jimu.css and add these new css rules bolded below to the

/*css for PreloadWidgetIcon dijit*/ section:

/*css for PreloadWidgetIcon dijit*/

.jimu-widget-onscreen-icon{

position: absolute;

cursor: pointer;

border-radius: 4px;

}

.jimu-widget-onscreen-icon img{

width: 20px;

height: 20px;

margin: 10px;

}

.jimu-widget-onscreen-icon.myAbout{

position: absolute;

cursor: pointer;

border-radius: 0;

width:150px!important;

height:75px!important;

}

.jimu-widget-onscreen-icon.myAbout img{

width: 150px;

height: 75px;

margin: 1px;

}

That should take care of it.

Re: How do I re-size an individual widget icon?

MikeAndres1 — Mon, 23 May 2016 15:31:29 GMT

Robert,

This worked perfectly. Thanks for the help. I have to figure out a way to send you a virtual 6-pack.

Re: How do I re-size an individual widget icon?

RobertScheitlin__GISP — Mon, 23 May 2016 15:43:32 GMT

Mike,

Glad to help. Please mark this thread as answered by clicking on the "Correct Answer" link on the reply that answered your question.

Re: How do I re-size an individual widget icon?

Anonymous User — Wed, 23 May 2018 19:10:41 GMT

Thanks for this, Robert. This was helpful.

I just want to point out that if you're localizing in your widget, you'll need to make sure you trap for the different widgetConfig.label languages. I got caught on this.

if(this.widgetConfig.label === "About" || this.widgetConfig.label === "AboutInDifferentLang"){

html.addClass(this.domNode, "myAbout");

}