Infotable Source on Widget Development

Question

Hi everybody,
 
I have been stuck on this for a while. I had developed several widgets before but I had never needed an infotable as output/source. I have found an small example as answer on another topic of this forum, but I can´t seem to make it work. I tried to use the Grid widget that Thingworx has an example, but I am still stuck.
 
On the .ide file, I have the infotable defined as this:
'EditedTable': { 'isBindingSource': true, 'baseType': 'INFOTABLE', 'description': 'Infotable where all the modifications are getting saved' },
 
And on the .runtime file I have it like this:
var outputTable = TW.InfoTableUtilities.CloneInfoTable({ "dataShape" : { "fieldDefinitions" : infoTableDataShape}, "rows" : item_Data_array }); this.updateProperty('EditedTable',outputTable);
 
I think I am using the correct syntax and that the format of the item_data_array is the right one since I compared it to the infotable that I use as input on the widget (the datashape is directly read from the input one). I have even tried to break the code on the developer mode on Chrome just before setting it, and set this outputTable as the response that I have on the service that send the input infotable.
 
If it is not so clear, I could add some screenshots.
 
Regards,
JNanin

jamesm1 · Accepted Answer

Hey @karnoia,

I have done this before in a widget and just took a look at the differences, and the only thing I see is that I am using setProperty instead of updateProperty;

First, I have a global variable valled clonedRows that I set when the bound data is refreshed:

 this.updateProperty = function (updatePropertyInfo) {
 // TargetProperty tells you which of your bound properties changed
 if (updatePropertyInfo.TargetProperty === 'Data') {
 dataRows = updatePropertyInfo.ActualDataRows;
 clonedRows = TW.InfoTableUtilities.CloneInfoTable({ "dataShape" : { "fieldDefinitions" : updatePropertyInfo.DataShape}, "rows" : updatePropertyInfo.ActualDataRows });

 if(thisWidget.getProperty("IsEditable") === true) {
 thisWidget.setProperty('EditedTable', clonedRows);
 }

 updateWidget();
 } else if (updatePropertyInfo.TargetProperty === 'ErrorIndex') {
 errorRow = parseInt(updatePropertyInfo.SinglePropertyValue);
 console.log('errorRow = ' + errorRow);
 thisWidget.updateErrorRow();
 }
 };

Then, whenever I update the widget I change the corresponding row in the clonedRows table and set the EditedTable property again:

 // called whenever we need to redraw the widget
 var updateWidget = function() {
 $('#' + thisWidget.jqElementId + '> .ruleviz-segment').remove();
 if (dataRows && dataRows.length > 0) {
 for (var i = 0; i < dataRows.length; ++i) {
 var row = dataRows[i];

 var html = '';

 if (isEditable && row.Type === 'PROPERTY' ) {
 html = '<input class="ruleviz-segment ruleviz-segment-' + row.Type + '" placeholder="' + row.RulePart +'">'
 + '</input>';
 } else { 
 html = '<div class="ruleviz-segment ruleviz-segment-' + row.Type + '">'
 + row.RulePart
 + '</div>';
 }
 thisWidget.jqElement.append(html);
 }
 }

 // If the table is editable then only to selection/on click on the inputs and not the divs.
 if (isEditable) {
 $('#' + thisWidget.jqElementId + '> input.ruleviz-segment').bind('click', segmentOnClick);
 thisWidget.jqElement.find('input').bind('change', function() {
 var index = $(this).index() - 1;
 clonedRows.rows[index].RulePart = $(this).val();
 thisWidget.setProperty('EditedTable',clonedRows);
 });
 } else {
 $('#' + thisWidget.jqElementId + '> .ruleviz-segment').bind('click', segmentOnClick);
 }

Let me know if this helps.

Thanks!

' + row.RulePart + '

'; } thisWidget.jqElement.append(html); } } // If the table is editable then only to selection/on click on the inputs and not the divs. if (isEditable) { $('#' + thisWidget.jqElementId + '> input.ruleviz-segment').bind('click', segmentOnClick); thisWidget.jqElement.find('input').bind('change', function() { var index = $(this).index() - 1; clonedRows.rows[index].RulePart = $(this).val(); thisWidget.setProperty('EditedTable',clonedRows); }); } else { $('#' + thisWidget.jqElementId + '> .ruleviz-segment').bind('click', segmentOnClick); }Let me know if this helps. Thanks!

slangley · Answer

Hi @karnoia. Have you checked the logs for error messages?  That may shed some light on the cause of the problem. Regards. --Sharon

Sign up

Please use your PTC eSupport account.

Welcome to the PTC Community

Please use your PTC eSupport account.