2 Replies Latest reply on Jan 15, 2017 1:57 AM by pjoly RSS
    pjoly Apprentice

    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



      • Re: creating widget from external API widget
        avaleanu Newbie


        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.


        Valeanu Andrei.