cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

creating widget from external API widget

pjoly
11-Garnet

creating widget from external API widget

I would like to create new widgets to display existing widget available on the web  such as Air Quality (Breezometer's Widget - BreezoMeter)

I have just an API key and a location to put as parameter.

1/ is it possible ( html code with jquery ) ?

2/ is there some similar examples to follow ?

I have installed Eclipse and I am able to generate Thingworx extensions (zip files) and import, but I have not found where to put the html script code to have the rendering in Thingworx IDE and runtime

Thanks a lot for help

Pascal

2 REPLIES 2
avaleanu
5-Regular Member
(To:pjoly)

Hello,

First of all yes this is possible.

If you take a look at the Extension Deveopment Guide, here http://support.ptc.com/WCMS/files/170215/en/thingworx_extension_development_user_guide.pdf​. There is a section for developing custom widgets for the Composer environment.

I have attached to this response an example of a simple widget done with JavaScript and JQuery.
When developing an extension there is a folder named ​ui​ in the package that you import into the ThingWorx platform.

This folder should contain the following files:

    1. <NameOfWidget>.ide.js

    2. <NameOfWidget>.ide.css

    3. <NameOfWidget>.runtime.js

    4. <NameOfWidget>.runtime.css

    5. An optional icon that would be displayed along with the widget name in the list of widgets in the composer.

The files that have *.ide ​are used for defining the behavior and style of the widget in the Mashup Builder and the files with *.runtime ​are what define the behavior and style for the widget when displaying the mashup.

One more important aspect is that you have to manage the lifecycle of the widget, in the sense that Mashups are dynamically generated and so are the elements of the mashup.

My approach would be to generate a html ​<div> ​ element in the renderHtml ​function of the widget and in the afterRender ​function to actually instantiate the Breezometer widget and bind it to the container you previously defined.

If there are other questions don't hesitate to ask.

Regards,
Valeanu Andrei.

pjoly
11-Garnet
(To:avaleanu)

Thanks Andrei

I'll follow carefully your recommandations & example to try to produce my first widget extension

Regards

Top Tags