topic Re: Customize widget title in Web AppBuilder Custom Widgets Questions

Customize widget title

GregRieck — Tue, 04 Apr 2017 18:00:44 GMT

Hello,

Is it possible to center the widget title? Then under the title add an image and the name of the selected feature? I am using this code to add the name of the feature to the title:

this.getPanel().titleLabelNode.innerHTML = NameOfFeature

But it shows up like this:

Widget Title : NameOfFeature

With no image and not centered or on separate lines. I would like it to display more like this:

Widget Title

IMAGE NameOfFeature

Thanks,

Greg

Re: Customize widget title

sapnas — Fri, 07 Apr 2017 15:40:48 GMT

code below should work:

this.getPanel().titleLabelNode.style.textAlign="center"

this.getPanel().titleLabelNode.innerHTML =

"<img src=\"widgets/widgetname/images/icon.png\"alt=\"image\" style=\"width:15px;height:15px;\">NameofFeature";

Re: Customize widget title

GregRieck — Fri, 07 Apr 2017 22:06:54 GMT

Hello Sapna, thank you for responding to my question. I've tried the above code. I have altered it slightly and this is the results I get.

this.getPanel().titleLabelNode.style.textAlign = "center"; //added semicolon
this.getPanel().titleLabelNode.innerHTML =
"Widget Title <img src=\"images/app-logo.png\"alt=\"image\" style=\"width:24;height:24;\">NameofFeature";

Added the title of the widget and a new line indicator.

This should accept a variable instead of hard coded text. The feature name will change based on the selected feature.

As you can see the widget header needs to be increased in height to accomodate the extra title. Also, it does not appear to be centered. To me it should be more to the right to be correctly centered.

Thank You,

Greg

Re: Customize widget title

sapnas — Mon, 10 Apr 2017 18:27:45 GMT

you have to increase the height of titlelabelnode and push down the container of the widget. The below code should cover it. regarding moving the title towards right add padding to align the text to further right which is again modifying the style of the elements

this.getPanel().titleLabelNode.style.textAlign = "center";
this.getPanel().titleLabelNode.style.height = "65px";
this.getPanel().containerNode.style.top = "70px";

var nameOfFeature = "test";
var innerHTML = "widget title<img src=\"widgets/widgetname/images/icon.png\" alt=\"image\" style=\"width:15px;height:15px;\">" + nameOfFeature + "";

this.getPanel().titleLabelNode.innerHTML = innerHTML;