cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to use List in ThingWorx Studio

Newbie

How to use List in ThingWorx Studio

Hi,

     I have a list widget, i want to populate data on it. I don't know the format of data. i want to get the data from any function(let's say getData()). when a button is clicked it should call the function, get the data and populate the list.

Thanks and Regards,

Qadir

6 REPLIES 6

Re: How to use List in ThingWorx Studio

Qadir, The data format can be of infotable or json type. Please follow the tutorial video on how to use List widget - Studio - Using List Widget - YouTube.

FYI, here is the complete playlist of tutorials - ThingWorx Studio - YouTube

Thanks,

Giri

Re: How to use List in ThingWorx Studio

Hi Giri, I have created an application parameter listval which holds  [{"val":"test1"},{"val":"test2"},{"val":"quadir"},{"val":"umar"}] values in json format. I bind it with my list and choose binding target property as list. I save and preview the project, Nothing is appearing in my list. list.PNG

binding target.PNG

Re: How to use List in ThingWorx Studio

Hello, 

 

I had the same issue too.

 

Select Widget doesn't accept json list format.

It uses only INFOTABLE format provided by ThingWorx.

 

So, the solution is to create a Thing and a Property with an INFOTABLE Base Type.

 

Please refer to this article to have the steps to apply this solution :

 

Best regards

 

Re: How to use List in ThingWorx Studio

Hi Samuel,

 

I have an example where I am using a json list and it is working fine for the select widget

So I have in a project in the Home.js the following code :

...
//funciton which writes the the the json list into the select widget 
$scope.populateModelList = function() {
$scope.view.wdg['select-1']['list'] = [
// here sellect-1 is a select widget / list element
  {
    display: "Ventil_3_sequneces",
    value: "app/resources/Uploaded/Ventil_3_sequneces_publish.pvz"
  },
  {
    display: "Anim Door",
    value: "app/resources/Uploaded/anim_door2.pvz"
  },
  {
    display: "777777",
    value: "app/resources/Uploaded/777777_TT_GG_FFF.pvz"
  }
  ]; 
};
 ...

Where I will call the populate function then e.g. in one of the following events

...
//after model is loaded
$rootScope.$on('modelLoaded', function() {$scope.populateModelList();});
...
// or 
//after the view was entered
$scope.$on('$ionicView.afterEnter', function() {$scope.populateModelList();});
// here I could acces e.g. list items in the modelLoaded event because this event
//occurs earler
...

 

Now testing the list  in the preview  so it will work fine:

 2018-07-06_16-14-59.jpg

So I think the original problem is that you will try to add the list to an select element before is was loaded. So the solution is the use e.g. one of the event which I mentioned  above.

 

Re: How to use List in ThingWorx Studio

This will work, but you are missing one important piece: you need to add a filter to the binding, to convert the JSON string into a Javascript object. In your binding, add a filter, and in the filter include the following:

return JSON.parse(value)

For full details of how this works, see this post: https://community.ptc.com/t5/Studio/What-is-the-format-for-quot-List-quot-in-the-Select-widget/m-p/5...

Re: How to use List in ThingWorx Studio

Yes , this is  a  good point!

So when we set  the property list it stil a string and we need to be converted to JSON as mention above:

2018-07-09_14-13-29.jpg

 

Otherwise when we fill the list attribute from java script we do not need to use a  filter because we can assignee there directly a JSON object.

...
[{"display":"aaaa","value":"aaaaa"},{"display":"bbbb","value":"bbbb"},{"display":"ccccc","value":"ccccc"}]


$scope.populateModelList = function() {  
  var my_json=[
  {
    display: "Ventil_3_sequneces",
    value: "app/resources/Uploaded/Ventil_3_sequneces_publish.pvz"
  },
  {
    display: "Anim Door",
    value: "app/resources/Uploaded/anim_door2.pvz"
  },
  {
    display: "777777",
    value: "app/resources/Uploaded/11406550_CR4_VM_ILL.pvz"
  }
  ];
  
  console.warn(my_json);
$scope.view.wdg['select-1']['list'] =my_json; 
};
 
/////////////////////////////////
$scope.$on('$ionicView.afterEnter', function() $scope.populateModelList();});
...

2018-07-09_14-27-04.jpg