Tree Widget in 2D View

[drieder]

Hello Everyone,

I realy need a Tree-like structure in the 2D View of my AR-Application. The Data comes from a Infotable which is already correctly structured (at least it shows the tree correctly in a Mashup tree)

I haven't found this particular widget but is there maybe a way to either create such a tree through javascript in "home.js" or to expand one of the existing Widgets with the needed functionality (maybe Repeater or similar)?

Any hints are appreciated very much!

Thank you in advance.

Best Regards,

Dominik

[RolandRaytchev · Accepted solution]

Hi @drieder ,

so far, I know currently there is no such widget available and I have no current information that such implementation is planed soon.  I know the possibility in Thingworx to use the Thingview widget with the tree widget (I documented my experience here  in the article "How to use ThingView Widget from Navigate to display CAD Model/Viewables in custom mashup- Concept") 

I do not think that such tree is possible with the current functionality.

You can try to display a tree in repeater or in dataGrid widget where it could looks like a tree or with couple of list  or select widget which have some binding with TWX services or javascript

But I think it will be difficult to implement it . We have for example listener for the repeater or for the selects which could be used to handle the selection on items interactively. So, you can then filter the data with some parameters from a service to change the displayed data but I have no idea how this should looks like:

And use the listener e.g.:

twx.app.fn.clickItemInRepeater = function(item,list,isMultiSelect)
{

   console.log("twx.app.fn.clickItemInRepeater item"); console.warn(item);
  console.log("twx.app.fn.clickItemInRepeater list"); console.warn(list);
  console.log("twx.app.fn.clickItemInRepeater isMultiSelect"); console.warn(isMultiSelect);

};  
  
$scope.app.fn.clickItemInSelect= function(list,isMultiSelect,value,valueField)
{

   console.log("$scope.app.fn.clickItemInSelect list"); console.warn(list);
  console.log("$scope.app.fn.clickItemInSelect isMultiSelect"); console.warn(isMultiSelect);
  console.log("$scope.app.fn.clickItemInSelect value"); console.warn(value);
  console.log("$scope.app.fn.clickItemInSelect valueField"); console.warn(valueField);
  

};    

So for example you could combine 3 select elements so that the first element will show the main branch of the tree, The second widget will display a data based on the selection in the first widget and so on...

[drieder]

Hi @RolandRaytchev ,

thank you for your detailed explanation. I will try out your suggested approach.

Best Regards,

Dominik