I spent yesterday taking a new run at this and a lot got changed in the process, I can now get the onInit to execute but the DOM elements seem to be missing. I have added a lot of console messages and from what I can see teh DOM references are never being created. I have run through a few different validators and nothing is really sticking out now and everything comes back and say the code is good; obviously it's not. I have questioned the structure and syntax but i cannot find anything to support re-orginizing. I have used the sampel code from the "how to create a sustom widget" tutorial as a reference and it seems to me that all of the similar functions of that project are also held within the onInit. The code in the attached project is going to look a lot different than what I supplied a few days ago.
here is the output of my console; that one error, best I can tell, is not related to the failure to create the DOM element references. I think it has something to do with my icon that displays in WebIQ and i cannot figure that out either, but i am less worried about it....unless i should be......
I also went through this moring and changed my DOM reference names from btn and svg to command and state. I thought maybe there was a confilict with existing names, but i am still getting the same problem. I am convienced this is a structure and syntax problem, but I cannot find examples of how I should change the structure.
The elements are not found because of two reasons:
1. You always have to use the "data-ui" attribute, not the "id" - in fact you should never use an "id" attribute at all in any widget HTML code because it makes the HTML invalid (though no browser complains), because "id" attributes have to be unique on the HTML page: https://www.w3schools.com/html/html_id.asp#:~:text=The%20id%20attribute%20specifies%20a,element%20wi....
Keep in mind that a widget can be included an unlimited amount of times on a single HMI at the same time. If you'd be using getElementById in JS you'd get the first one in the HTML code, not the one you expected probably.
2. Although you're using an "data-ui" attribute for one widget the name in the template and the code don't match, therefore it's not found.
As I stated before you should never use any "id" attributes in widgets as these make your HTML invalid (even though no browser cares) if the widget is inserted more than once on the same HTML page (i.e. HMI). Please see the link I posted before. You don't need to specify any id for any WebIQ widgets - it's also not documented that you should do that on purpose as it wouldn't make sense as any widget can be inserted multiple times into any HMI hence leading to invalid HTML if you'd use an "id" attribute in your widget HTML code.
Specifying the class(es) is not required either, but you probably want to set it to be able to style your widget using CSS.
For using shmi.getUiElement(elementName) you always have to specify the data-ui-attribute name you specified (hence it's called getUiElement). This is also specified in the documentation:
If you simply follow our tutorial for creating a custom widget exactly you should get to know all of these details - you should not use that manual when reading it for the first time to directly implement your own custom widget, instead you should follow the steps exactly to create the custom widget from the tutorial and only afterwards create your own custom widget:
https://www.smart-hmi.com/user/download/deliver/docs/documentation-how-to-simple-control-2.14-3d30/i...