How can I use binded data on Custom Widget?

[karnoia]

Good afternoon,

I have designed my own Chart following the specifications that a client asked me to have, but I am having problems with the bound data. For example, I have a "Title" which I have defined as         " 'isBindingTarget': true, " in the ide.js file, and I get that string using " var title= this.getProperty('Title'); " in the runtime.js file. If I write the title by hand (in the Title property after droping the chart in my mashup), it shows up perfectly; but if I bind it for example to a TextBox, it doesn't work. I have been checking the code of widgets like TextBox and NumericEntry to see how the binding is defined, but I can't find exactly what I am missing.

Regards.

[jamesm1]

Did you handle the Property Update event? There should be something like this in the runtime js:

// this is called on your widget anytime bound data changes
this.updateProperty = function (updatePropertyInfo) {
// validators may constantly being setting this to enabled/disabled based
// on other events in the system, before we take the action to 
// bind/unbind etc we should make sure we're in the appropriate state
if (updatePropertyInfo.TargetProperty === 'Disabled') {
if (updatePropertyInfo.RawSinglePropertyValue === true) {
if (isDisabled === false) {
isDisabled = true;
spanElement.unbind('click');
spanElement.addClass('disabled');
spanElement.removeClass('button');
}
} else {
if (isDisabled === true) {
isDisabled = false;
spanElement.removeClass('disabled');
spanElement.addClass('button');
spanElement.bind('click', buttonOnClick);
}
};
        } else if (updatePropertyInfo.TargetProperty === 'FontAwesome Class') {
        iElement.removeClass();
        iElement.addClass('fa ' + updatePropertyInfo.RawSinglePropertyValue);
        };
};

[karnoia]

Hello James. Thank you for answering so fast.

I have checked your code, but truth be told I don't really get what it does . I have the Property Update event, and what I do is that if the Data changes, reads the data, the limits, title and all that, and it redraws the chart. But the part that doesn't work is reading that data if I have bound it. I'll show you part of the code that it is inside that update, so you have a better idea of what I am doing. I have the same problem with those hihi, hi, lo and lolo as with the Title. They are bindable, if I write them in Thingworx by hand they work perfectly, but if I bind them, it's like they are zero.

Regards,

this.updateProperty = function (updatePropertyInfo) {
if (updatePropertyInfo.TargetProperty === 'Data') {
//Get the property values
     var markerType = this.getProperty('MarkerType');
     var valueField = this.getProperty('Value');
     var xAxisField = this.getProperty('xAxis');
     var labelField = this.getProperty('xAxisLabel');
     var bgColor = seriesStyle.backgroundColor;
     if (bgColor.length == 0) {bgColor = '#000000'; fillArea=false;}
     bgColor = convertHex(bgColor,40);
     var lineColor = seriesStyle.lineColor;
     if (lineColor.length == 0) {lineColor.length = '#ff0000';}
     var lineThickness = seriesStyle.lineThickness;
     if (lineThickness = 0) {lineThickness = 1;}
     var showMarkers = this.getProperty('ShowMarkers') ? (lineThickness + 3) : 0;
     var fillArea = true;
     //Get the data
     var dataRows = updatePropertyInfo.ActualDataRows;
     var nRows = dataRows.length;
     var hihi = this.getProperty('HiHi');
     var hi = this.getProperty('High');
     var lo = this.getProperty('Low');
     var lolo = this.getProperty('LoLo');

[sgreywilson · Accepted solution]

Inside the updatePropertty you need to check if the property you are interested changes and then set the property

this.updateProperty = function (updatePropertyInfo) {

        if (updatePropertyInfo.TargetProperty === 'MYPROPERTY') {

            this.setProperty('MYPROPERTY',updatePropertyInfo.SinglePropertyValue);

            // do some redraw or code here

        }

    };

[karnoia]

Thank you very much Steve, this is exactly what I was looking for.
I knew there had to be some kind of command to set the updated information, but I couldn't find it anywhere.

Regards