Skip to main content
1-Visitor
October 23, 2015
Solved

Events and output for custom widgets

  • October 23, 2015
  • 3 replies
  • 5380 views

Are there any instructions or examples on how to create a custom widget that generates events and/or modified data? For example, I want to generate an event when some part of the widget is clicked, and I also want to output some data that depends on what the user did.

Best answer by CarlesColl

Sure?

Did you looked at this embedded PDF: http://support.ptc.com/cs/help/thingworx_hc/thingworx_6.5_hc/Supporting%20files/Creating%20UI%20Widgets%20for%20ThingWorx.pdf

It talks about how to trigger an Event from within Javascript, a part of this to define one that you want to trigger as I can read on it, you should define it on this.widgetEvents as you use it this.widgetProperties to define properties.

Then, just look at the Google Extension and you will see something like this:

Defining it for the IDE

this.widgetEvents = function () {

        return {

            'Changed': {},

        'DoubleClicked': {},

            'BoundsChanged': {}

        };

    };

Triggering the event on the Runtime:

this.dblclickEventListener = function (e) {

       

        thisWidget.jqElement.triggerHandler('DoubleClicked');

    };

Best Regards,

3 replies

1-Visitor
October 25, 2015

Hi David,

Go to documentation http://support.ptc.com/cs/help/thingworx_hc/thingworx_6.5_hc/ on the section "ThingWorx Extensibility", and to see real world examples, go to Marketplace and download for instance  "Google Widgets" http://marketplace.thingworx.com/downloads/google-widgets/​ or any other widget, as it's al HTML5 and XML you can look into the code and the widget definition.

Best Regards,

Carles.

1-Visitor
October 26, 2015

The ThingWorx extensibility document doesn't seem to cover this aspect of widgit writing.

1-Visitor
October 26, 2015

Sure?

Did you looked at this embedded PDF: http://support.ptc.com/cs/help/thingworx_hc/thingworx_6.5_hc/Supporting%20files/Creating%20UI%20Widgets%20for%20ThingWorx.pdf

It talks about how to trigger an Event from within Javascript, a part of this to define one that you want to trigger as I can read on it, you should define it on this.widgetEvents as you use it this.widgetProperties to define properties.

Then, just look at the Google Extension and you will see something like this:

Defining it for the IDE

this.widgetEvents = function () {

        return {

            'Changed': {},

        'DoubleClicked': {},

            'BoundsChanged': {}

        };

    };

Triggering the event on the Runtime:

this.dblclickEventListener = function (e) {

       

        thisWidget.jqElement.triggerHandler('DoubleClicked');

    };

Best Regards,

1-Visitor
October 27, 2015

Thanks, that's what I'm looking for. Is the object after the event name in widgetEvents used for anything?

1-Visitor
October 27, 2015

I don't know, maybe to specify Event Payload... or it's just a boilerplate otherwise the JSON specification won't be correct.