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

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

How to Implement Style to a widget through Eclipse?

jaswanth
9-Granite

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

Check the label widget extension(IDE,Runtime JS) 

View solution in original post

1 REPLY 1

Check the label widget extension(IDE,Runtime JS) 

Top Tags