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

Community Tip - New to the community? Learn how to post a question and get help from PTC and industry experts! X

enhancement request: make Component Occurrence accessable in js


enhancement request: make Component Occurrence accessable in js

In Creo View, you can click on a model and see the model attributes, like the part number.

If I want to use a Fuvoria Studio experience where the user can tap on a modelItem, I can manually set a text label to the part number of that modelItem. If the experience is larger than just a couple of modelItems, it's a lot of work to add the info to each individual modelItem.

We noticed that the Component Occurrence of each ModelItem matches the pathnames in Creo View.

It would be great if it was possible to auto create modelItems by means of the Component Occurrence path in the pvz. And if the name of the modelItem would be identical to this path, we could probably map the attributes of this part to the modelItem.

The result would be an experience where e.g. the service engineer would see disassembly sequences, but also the part numbers of each modelItem.




If you have a look at the model helicopter experience in the gallery, it does something just like this.  I've asked about it and it's using JS to read values from a JSON file that is setup and structured in a similar way to the PVZ file.


Studio recognises the structure as you can see when you create model items.  I think the ideal solution would be that the JS could just directly read the PVZ structure and attribute information contained in there.




I looked into the (zipped) contents of a random c3di-Creo Illustrate file. There's a file manifest.3di that contains the Component Occurrence and the name of the part. So, once we know the component occurrence, we could map the name to that 🙂

The contents of the sub-files in a pvz (ol and pvs) are compressed, so that doesn't seem to be an easy path...


@AllanThompson i did figure out how to read data JSON from a file if you need that.

Awesome, I'd be interested in that code,too 🙂


Just to document it, here is the code I'm using to import JSON


		function loadJSON(file, callback) { 
		var xobj = new XMLHttpRequest();
		xobj.overrideMimeType("application/json");'GET', file, true);
		xobj.onreadystatechange = function () {
		if (xobj.readyState == 4 && xobj.status == "200") {
		// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
		function load() {
		loadJSON("app/components/en.json", function(response) { // this is the file to load
		var actual_JSON = JSON.parse(response); //your JSON data is loaded to the var "actual_JSON"
		load(); //this call loads the JSON

Thanks @jmikesell.  I've actually got the code to read the JSON and show the pop-up tag on click (see below).  The problem is how to generate the JSON from the PVZ structure.  Ideally, it would be reat is this code could work directly on the PVZ file.  IT's something I'm planning to ask about this week while I"m at LiveWorx.


Anyway, here's the code:


// select.js
// map userpick event to 1 or mode modelitems, linking a json structure
// which provides attribute lookup information (name etc)
// map your json file the model name
var MODEL_JSON = {
$scope.modelData = new Array();
var PICK_COLOR = "rgba(0,255,0,1)";
//load MODEL_JSON files
angular.forEach(MODEL_JSON, function(value, key) {
$http.get('app/resources/Uploaded/' + value).
success(function(data, status, headers, config) {
.error(function(data, status, headers, config) {

$timeout(function() {
angular.forEach($element.find('twx-dt-model'), function(value, key) {
angular.element(value).scope().$on('userpick',function(event,target,parent,edata) {
var data = $scope.modelData[target];
if (data != undefined) {
if($scope.currentSelection!=undefined) {
vuforia.setColor($scope.currentSelection, undefined);
var pathid = JSON.parse(edata).occurrence;
$['debug'] = pathid;
$scope.currentSelection = target + "-" + pathid;
var partNumber = data.components[data.idmap[pathid]].properties['epmdoc_number'];
var template = '<ion-popover-view><ion-content>&nbsp;' + partName + '&nbsp;</ion-content></ion-popover-view>';
vuforia.setColor($scope.currentSelection, PICK_COLOR);
$ = partName;
$ = partNumber;
var popover = $ionicPopover.fromTemplate(template, {
scope: $scope
var customEvent = {
target: {
getBoundingClientRect:function () {
return {
'left' :$scope.lastClick.x,
'top' :$scope.lastClick.y,
'width' :1,
var dismissF = function(modelItem,popover) {
var modelItemId = modelItem;
var thePopover = popover;
return function() {
$scope.currentSelection = undefined;
vuforia.setColor(modelItemId, undefined);
// auto-close the popover after 3 seconds
$timeout(dismissF(target + "-" + pathid,popover), 3000);
} ,0);

document.addEventListener('click', function(event) {
$scope.lastClick = {
x: event.pageX, y: event.pageY};



And attached is the JSON file.





cool, thanks!


Top Tags