Skip to main content
K
karnoia1-Visitor
1-Visitor
September 21, 2017
Solved

How can I use binded data on Custom Widget?

  • September 21, 2017
  • 1 reply
  • 3121 views

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.

    Best answer by sgreywilson

    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

            }

          

          

        };

    1 reply

    J
    jamesm15-Regular Member
    5-Regular Member
    September 21, 2017

    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);
            };
            
    };
    K
    karnoia1-VisitorAuthor
    1-Visitor
    September 22, 2017

    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');
    S
    sgreywilson16-PearlAnswer
    16-Pearl
    September 23, 2017

    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

            }

          

          

        };

      Terms & ConditionsAccessibility statement