Skip to main content
1-Visitor
September 27, 2019
Solved

How to Implement Style to a widget through Eclipse?

  • September 27, 2019
  • 1 reply
  • 932 views

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? 

Best answer by jaswanth

Check the label widget extension(IDE,Runtime JS) 

1 reply

jaswanth1-VisitorAuthorAnswer
1-Visitor
October 9, 2019

Check the label widget extension(IDE,Runtime JS)