Thingworx extensions are a great place to explore UI ideas and get that special feature you want.
Here is a quick primer on Widgets (Note: there is comprehensive documentation here which explores the complete development process ).The intention is not to explain every detail but just the most important points to get you started. I will explore more in additional posts. I also like images rather than lost of words to read. I have attached the simple Hello Word example as a start point and I'm using Visual Code as my editor of choice.
The attached zip when unzipped will contain a folder called ui and metadata xml file. Within the ui folder there needs to be a folder that has the same name as the widget name. In this case its helloworld.
Metadata file - The 3 callouts are the most import.
Package version: is the current version and each time a change is made the value needs to be updated.
name: a unique name used through out the widget definition
UIResources: The source locations for the widget definition.
In this very simple case the renderHtml in the runtime is the same as in the ide
Hopefully you can see that the HTML is pretty easy just some div and span tags with some code to get the Property called Salutation.
So we have the very basics and we are not worried to much about all the other things not mentioned. So to get the simple extension into Thingworx we use the Import -> Extensions menu option.
The UI and metadata.xml file needs to be zipped up (as per attachment). Below is a animated gif that shows how to import and use the widget