4 Replies Latest reply on Sep 25, 2017 10:29 AM by karnoia RSS
    karnoia Newbie

    How can I use binded data on Custom Widget?

    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.

      • Re: How can I use binded data on Custom Widget?
        jamesm Creator

        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);
                };
                
        };
        
          • Re: How can I use binded data on Custom Widget?
            karnoia Newbie

            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');
            
              • Re: How can I use binded data on Custom Widget?
                stevegr Apprentice

                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

                        }

                      

                      

                    };