I just wrapped up my first custom widget, for generating HTML tables that have advanced interaction controls (pagination, keyword searching, sorting, and more). It uses the DataTables jQuery Javascript library ( https://www.datatables.net/ ) to enhance the HTML table.
You can either pass the widget a fully-formed HTML table, or a JSON array. When you pass an array, the widget automatically generates an HTML table for you.
The widget supports a “Link Clicked” event, so you can add a trigger and take action based on the click. For example, you might grab the ID of the row that was clicked, navigate to another step, and show more detailed information, present a form, etc.
You’re totally right. As a little bit of context, Custom widgets came out of a long line of widget asks that really only fit the needs of 1 or 2 customers (we aren’t going to make a hyper specific gauge to match your machine hmi, because very quickly there would be hundreds of native widgets). Instead the approach was to enable users to make their own very specific widget for their very specific problem.
We are watching closely what people are making, and when custom widgets get traction with more than 1 use-case, that is a trigger for us to evaluate natively supporting that functionality. Many of these limitations are understood (like a lack of looping natively) and are being addressed currently with a lot of engineering work behind the scenes, while others (like disable-able widgets) have come up in the past, but we didnt realize how many users would be interested in using.
If we let you make it, we can see what you make, and then natively support it. Triggers on Checkboxes and single selects (and soon more input types) are the first examples we are seeing of custom widgets driving us to improve the native widgets.
Hi Tim, this is a great widget and I am starting to use it in one of my apps. One issue I am having is getting the data loaded into the custom widget. I can load a variable just fine but it seems to be a timing issue in getting the variable set and passed to the widget with data. Have you had success in using it and if so, how did you set the variable that contains the json array (e.g. step enter trigger)?
@kirons Thanks for the feedback on the DataTable widget.
I have also occasionally run into timing issues, especially when the data being used by the widget needs to be loaded from an API. One of the techniques that I am exploring is to load the data in one step, then move to a second step that actually presents the data using the widget. That should help to ensure that the data is loaded before trying to use it with the DataTable widget.
Just changing the value of the variable doesn’t necessarily trigger the custom widget to update. You can implement the custom widget so that it does respond to updates from a variable though, using the code below:
