Custom Widgets offer flexibility in creating the perfect widget with some coding required.
You can pass any complex object to your custom widgets. See in the download tab an exemple of a complex object payload.json for use in this example. You need to integrate into your object a property called "flatten", and set it to "false".
See in the download tab an example of Custom Widget code of the CSS, HTML and JS code to paste in the custom widget for doing simple tasks with the received object:
Paste the code in step 3 "Write code" in the custom widget creation. Nothing needs to be added in the "Define widget properties" step.
The important part is the payload = {{value}} statement in the script. That is where the object coming from the payload is assigned to a variable in the Custom Widget Script.
The object and parts of the objects are displayed via the el.textContent statements. The first statement just displays the whole object in a human-readable form, the second one accesses a sub-object : payload.myObject.anotherString
This is the end result for the example:
When using JQuery, keep the following in mind depending on method:
- Recommended: download a version of the library, host it on the IoT Server, and serve it (via the "File Server" Subflow for example) to the custom widgets (<script src="..."). That way you have a single version that you can update from time to time once and for all for any custom widgets that would be using it
- Less recommended: Copy-paste the contents of the script in your Custom Widget. This is going to be very tedious to maintain and update on all your widgets
- Not recommended: Hotlinking to the script on an external site: If the IoT Server shortly loses connection to the Internet the widget could stop working. If the remote library changes you could have things breaking or becoming insecure.