How to use the thingworx styles in an extension widget?

[efernandez1]

Hi all,

I am currently developing a responsive doughnut chart widget and I have finally managed to finish everything except the styles. I want to be able to set the colour of the chart from the Thingworx Composer, however I am no table to get the information available in the style I created on my runtime Javascript.

So my question is how are you able to use the style information in the development of an extension widget? How can I get the Background Color, Foreground Color, Line color, Line Thickness, etc... from the style to my runtime?

I have tried using this.getProperty('ChartStyle'), this.properties['ChartStyle'] both which return a simple String. I have also tried

if (updatePropertyInfo.TargetProperty === "ChartStyle"){

  var styleData = updatePropertyInfo.ActualDataRows;

}

And then use the Chrome developer tools to see if I could get a value an array out of it and I ended up with undefined. Any help would be appreciated, thank you!

Eric

[VladimirRosu · Accepted solution]

Hi Eric,

The styles require a different way of accessing the property, and it's through a helper function.

The following information is extracted from the ThingWorx Foundation Extension Development Guide (https://support.ptc.com/view?im_dbkey=170215):

"Formatting - if you have a property with baseType of STYLEDEFINITION, you can get the style information by calling var formatResult = TW.getStyleFromStyleDefinition( widgetProperties['PropertyName']);"

Best regards,

Vladimir

[efernandez1]

Thank you Vladimir! I feel so stupid for not finding it in the extension guide!

Regards,

Eric