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

How to Implement Style to a widget through Eclipse?

SOLVED
Highlighted
Gravel

How to Implement Style to a widget through Eclipse?

I have created example widget provided from ptc developer site and i would like to add a Style property to it and I have gone through documentation of ptc and was not quite getting along so could any one suggest any way.

this is IDE code (taken from widget creation in ptc developer page)

TW.IDE.Widgets.simplewidget = function () {
    this.widgetIconUrl = function() {
        return "../Common/extensions/MyAwesomeExtension/ui/simplewidget/SimpleWidget.ide.png";
    };

    this.widgetProperties = function () {
        return {
            name : "SimpleWidget",
            description : "A simple example of Widget creation.",
            category : ["Common"],
            properties : {
                DisplayText: {
                    baseType: "STRING",
                    defaultValue: "Hello, Awesome User!",
                    isBindingTarget: true
                }
            } 
        }
    };

    this.renderHtml = function () {
        var mytext = this.getProperty('SimpleWidget Property');

        var config = {
            text: mytext
        }

        var widgetTemplate = _.template(
            '<div class="widget-content widget-simplewidget">' +
            '<span class="DisplayText"><%- text %></span>' +
            '</div>'
        );

        return widgetTemplate(config);
    };

    this.afterSetProperty = function (name, value) {
        return true;
    };
};

 and here is the runtime js

TW.Runtime.Widgets.simplewidget = function () {
    var valueElem;

    this.renderHtml = function () {
        var mytext = this.getProperty('SimpleWidget Property');

        var config = {
            text: mytext
        }

        var widgetTemplate = _.template(
            '<div class="widget-content widget-simplewidget">' +
            '<span class="DisplayText"><%- text %></span>' +
            '</div>'
        );

        return widgetTemplate(config);
    };

    this.afterRender = function () {
        valueElem = this.jqElement.find(".DisplayText");
        valueElem.text(this.getProperty("DisplayText"));
    };

    this.updateProperty = function (updatePropertyInfo) {
        if (updatePropertyInfo.TargetProperty === "DisplayText") {
            valueElem.text(updatePropertyInfo.SinglePropertyValue);
            this.setProperty("DisplayText", updatePropertyInfo.SinglePropertyValue);
        }
    }; 
};

 So please tell the necessary code to be implemented so the property gets reflected in IDE and during runtime and can we make the Style as IsEditable and if we can what changes are to be made? 

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to Implement Style to a widget through Eclipse?

Check the label widget extension(IDE,Runtime JS) 

View solution in original post

1 REPLY 1

Re: How to Implement Style to a widget through Eclipse?

Check the label widget extension(IDE,Runtime JS) 

View solution in original post

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum! ______________________________