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

Tree chart menu in Thingworx

SOLVED
Visitor

Tree chart menu in Thingworx

treewidjet.jpg

 

How to create the Tree chart menu in Thingworx as the above picture .

Last week ,I found the a exercise in the TW developer website for this one  .

But Unfortunately, TW developer website was update last weekend and this exercise is disappear .

 

Do you have any tutorial or document or the links for this one ?

 

 

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Tree chart menu in Thingworx

In order to create something like this, you'll need to create a Network and create a service that has JavaScript similar to the below functionality.

 

Example Network Structure:

 

Screen Shot 2019-03-27 at 12.44.07 PM.png

 

Example Javascript:

 


var connections;

connections = Networks['AcmeVending'].GetNetworkConnectionsWithTemplate();




var params = {
dataShapeName : "ExampleNetwork",
infoTableName : "AssetHierarchy"
};


var assets = Resources['InfoTableFunctions'].CreateInfoTableFromDataShape(params);

var connection;



for each(connection in connections.rows) {
  var data = new Object();
  data.to = connection.to;
  data.from = connection.from;
  data.connectionType = connection.connectionType;
  var thing = Things[connection.to];




 if (thing.StatusCode != 0) {
   data.description = thing.description;
   data.location = thing.Location;

if (connection.thingTemplate == 'Site') {
   data.inService = "";
   data.zoom = 16;
} else if (connection.thingTemplate == 'Corp') {
   data.inService = "";
   data.zoom = 6;
} else if (connection.thingTemplate == 'Region') {
   data.inService = "";
   data.zoom = 9;
} else {
   data.outOfStockPct = thing.PercentTimeOutOfStock;
   data.inServicePct = thing.PercentTimeInService;
   data.complaints = thing.TotalComplaints;
   data.salesVgoal = thing.SalesVsGoal;
   data.inService = thing.InService;
   data.zoom = 18;
}

   data.assetType = connection.thingTemplate + ":" + data.inService;
   assets.AddRow(data);
  }
}



var result = assets;
4 REPLIES 4

Re: Tree chart menu in Thingworx

Here's link to realize the tree menu https://www.ptc.com/en/support/article?n=CS251574&posno=6&q=tree%20menu&source=search, but it does not include adding a image in front of each title.

Re: Tree chart menu in Thingworx

The developer.thingworx.com website has a couple of guides showing how to link a selection on a side panel to the information shown in the main part of the website, but does not cover all the steps required to create the mashup:

https://developer.thingworx.com/en/resources/guides/customizable-responsive-ui/master-menu-create-me...

 

https://developer.thingworx.com/en/resources/guides/reusable-components-how-

 

Re: Tree chart menu in Thingworx

In order to create something like this, you'll need to create a Network and create a service that has JavaScript similar to the below functionality.

 

Example Network Structure:

 

Screen Shot 2019-03-27 at 12.44.07 PM.png

 

Example Javascript:

 


var connections;

connections = Networks['AcmeVending'].GetNetworkConnectionsWithTemplate();




var params = {
dataShapeName : "ExampleNetwork",
infoTableName : "AssetHierarchy"
};


var assets = Resources['InfoTableFunctions'].CreateInfoTableFromDataShape(params);

var connection;



for each(connection in connections.rows) {
  var data = new Object();
  data.to = connection.to;
  data.from = connection.from;
  data.connectionType = connection.connectionType;
  var thing = Things[connection.to];




 if (thing.StatusCode != 0) {
   data.description = thing.description;
   data.location = thing.Location;

if (connection.thingTemplate == 'Site') {
   data.inService = "";
   data.zoom = 16;
} else if (connection.thingTemplate == 'Corp') {
   data.inService = "";
   data.zoom = 6;
} else if (connection.thingTemplate == 'Region') {
   data.inService = "";
   data.zoom = 9;
} else {
   data.outOfStockPct = thing.PercentTimeOutOfStock;
   data.inServicePct = thing.PercentTimeInService;
   data.complaints = thing.TotalComplaints;
   data.salesVgoal = thing.SalesVsGoal;
   data.inService = thing.InService;
   data.zoom = 18;
}

   data.assetType = connection.thingTemplate + ":" + data.inService;
   assets.AddRow(data);
  }
}



var result = assets;
Highlighted

Re: Tree chart menu in Thingworx

Hi @Oak23.

 

If one of the previous responses answered your question, please mark the appropriate one as the Accepted Solution for the benefit of others with the same question.

 

Regards.

 

--Sharon