topic Re: Change a style for a programmatically created button in Web AppBuilder Custom Widgets Questions

Change a style for a programmatically created button

ZdeněkSoldán — Tue, 22 Nov 2016 12:30:38 GMT

Hello,

In my widget I have some buttons that are made in html and some buttons that are made programmatically in JS. And after that I have an inconsistent look. So I want to change theme for programmatically made buttons from claro to tundra.

In my css I imported the tundra.css like @import url("http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/tundra/tundra.css"); and in an empty div in html where buttons are made I put <div class="tundra" id="dropDownButtonContainer"></div> but the buttons look still different -in claro theme.
So how can I change the theme of these buttons?

Thanks for any answers

Re: Change a style for a programmatically created button

RobertScheitlin__GISP — Tue, 22 Nov 2016 14:18:47 GMT

Zdeněk,

It appears that the issue is that you are just adding a standard html button and not an actual dojo form button. I would have to see you code though.

Re: Change a style for a programmatically created button

ZdeněkSoldán — Sun, 12 Dec 2021 08:35:52 GMT

Hello Robert,

I think you have right. This is my code for two buttons that are made in html. One is for chose a file from local pc and one is for handle this file. The first is standart HTML for sure the second one is dojo button I think. But they both look the same.

<div class="attr" data-dojo-attach-point = "loadFile"> 
              <input class="load" type="file"  id="files" name="files[]" multiple data-dojo-attach-point = "files" data-dojo-attach-event="onchange:hadleFileSelect"/>
              <button class = "loadbutt" id=loadAddAtt data-dojo-type = "dijit/form/Button" type = "button" data-dojo-attach-event="onclick:_onPublishClick" > Nahrát doplňující přílohu </button>
</div>‍‍‍‍‍‍‍‍

And here is a code for my programmatically made button:

 <div class="tundra" id="dropDownButtonContainer"></div>

menu = new DropDownMenu({ style: "display: none;"});
var button = new DropDownButton({
          label: "Dostupné stavy",
          name: "programmatic",
          dropDown: menu,
          id: "progButton"
          })
          button.startup();
dom.byId("dropDownButtonContainer").appendChild(button.domNode);
},‍‍‍‍‍‍‍‍‍‍‍‍

and this one look like this

But in my css I have only imported tundra css. I dont know if I need to do something more in this file...

Re: Change a style for a programmatically created button

RobertScheitlin__GISP — Tue, 22 Nov 2016 15:14:59 GMT

Zdeněk,

So are you wanting the blue or the gray?

Re: Change a style for a programmatically created button

ZdeněkSoldán — Tue, 22 Nov 2016 15:23:20 GMT

Robert,

I want to all my buttons look the same. It doesn't even matter which style should it be. Maybe I would prefer the gray one.

Re: Change a style for a programmatically created button

RobertScheitlin__GISP — Wed, 23 Nov 2016 03:07:22 GMT

Zdeněk,

I am surprised you are not getting an error for this:

<button class = "loadbutt" id=loadAddAtt data-dojo-type = "dijit/form/Button" type = "button" data-dojo-attach-event="onclick:_onPublishClick" > Nahrát doplňující přílohu </button>

You have id without quotes around the value. Actually if that html code is in your Widget.html then you need to remove id attribute all together and use data-attach-point.

Re: Change a style for a programmatically created button

ZdeněkSoldán — Sun, 12 Dec 2021 08:35:54 GMT

Robert,

Thank you for your answer. But when I use data-dojo-attach-point instead of id I have a problem to connect to this div in Widget.js. I need to work with this div in a function inside a function. For example..

<div class="tundra" id="dropDownAutom"></div>

onReceiveData: function(name, source, params) {
   //some code
   resul=queryTask.execute(query,function(results){
      //some code
      button2 = new DropDownButton({
              label: "Výběr šablony",
              name: "programmatic2",
              dropDown: menuZpracAut,
              })
      button2.startup();
      dom.byId("dropDownAutom").appendChild(button2.domNode);
   });
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This way it works. When I have data-dojo-attach-point in my Widget.html and in Widget.js I use this.dropDownAutom.appendChild.... outside of the inner function it also works. But it didn't solve my problem. The button is still in the blue theme (claro) instead of gray (tundra).
And when I want to use data-dojo-attach-point in my Widget.html and this.dropDownAutom.appendChild inside the inner function it doesn't work. Because in the inner function "this" isn't an object of div but some kind of "window". So how can I connect this div with data-dojo-attach-point inside the inner function?
And how to solve my first problem if data-dojo-attach-point didn't help?

Re: Change a style for a programmatically created button

RobertScheitlin__GISP — Wed, 23 Nov 2016 14:02:04 GMT

Zdeněk,

The gray buttons do not denote tundra they are just standard html dom elements and not Dojo dijits. You are missing some of the core fundamentals of widget development that is why you are not able to use the data-attach-point. You need to be using lang.hitch in your querytask result function that way you can use this."your data-attach-point name".

If you attach your widget code I can point some things out to help you.