cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
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

document.getElementById only works for 3D objects, not 2D?

jmikesell
15-Moonstone

document.getElementById only works for 3D objects, not 2D?

For some reason "document.getElementById" is only working for me against 3D widgets not 2D widgets. Here is an example:

// this works
document.getElementById("3DImage-tech8"); //3D image wdg

// these do not
document.getElementById("button-1"); //button wdg
document.getElementById("image-1"); //2D image wdg

yes i have confirmed that those ID's do exist in the project. All i get back for the 2D widgets is null, but against 3D widgets i get a nice element array.

1 ACCEPTED SOLUTION

Accepted Solutions

I think  the reason is the current implementation of these different areas.

1.)So if you want to access a widget and set properties the default method should be :

 

...
//for some 2d elements
$scope.view.wdg['textArea-1']['text']='test text';
$scope.view.wdg['textArea-1']['visible']=true;
// but also for 3d elements
$scope.view.wdg['3DLabel-1']['text']="----";
$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/l-Creo 3D - TestFigure1.pvi';
...

 2.)another powerful method to set properties will be $scope method setWidgetProp - example:

 

...
//to set the currentStep of model-1 to 4
$scope.setWidgetProp('model-1', 'currentStep', 4);
...

3.) in some case as you mention, you can use getElementById() but there is no guarantee that it should work , because it depends to the object what you will get here. For 3d object seems this to work , but it is better to use the angular.element -> example:

//reseting the model sequence
angular.element(document.getElementById('model-1')).scope().reset();
...

4.) what always will work is a query using the querySelector:

// accessing the 3d model
var element = angular.element(document.querySelector('twx-widget[widget-id=\"model-1\"] twx-dt-model'));
element.scope().play();
...
//playing a audio -2d element
var wdg = angular.element(document.querySelector('twx-widget[widget-id=\"audio-1\"] audio'));
wdg[0].play();
...

So the question is now how to get the correct query for element where I do not know the elements name.

Lets check here to a 2d element text area

  • switch to preview mode
  • press Strg -Shift -I  keys to open the chrom debuging mode
  • follow the step according the picture below:2018-06-29_17-18-59.jpg
  • check of element with related object type name:2018-06-29_19-21-11.jpg
  • So now to set the text property of the textarea we can use some code like this:
    ...
    //find the element
    var textarea = angular.element(document.querySelector('twx-widget[widget-id=\"textArea-1\"] textarea'));
    //set the text value
    textarea[0].value="LLLLLLLAAAAAAAAAA"; 
    ...
    So hope helps!

thanks

-Roland

 

 

View solution in original post

2 REPLIES 2

I think  the reason is the current implementation of these different areas.

1.)So if you want to access a widget and set properties the default method should be :

 

...
//for some 2d elements
$scope.view.wdg['textArea-1']['text']='test text';
$scope.view.wdg['textArea-1']['visible']=true;
// but also for 3d elements
$scope.view.wdg['3DLabel-1']['text']="----";
$scope.view.wdg['model-1']['sequence'] = 'app/resources/Uploaded/l-Creo 3D - TestFigure1.pvi';
...

 2.)another powerful method to set properties will be $scope method setWidgetProp - example:

 

...
//to set the currentStep of model-1 to 4
$scope.setWidgetProp('model-1', 'currentStep', 4);
...

3.) in some case as you mention, you can use getElementById() but there is no guarantee that it should work , because it depends to the object what you will get here. For 3d object seems this to work , but it is better to use the angular.element -> example:

//reseting the model sequence
angular.element(document.getElementById('model-1')).scope().reset();
...

4.) what always will work is a query using the querySelector:

// accessing the 3d model
var element = angular.element(document.querySelector('twx-widget[widget-id=\"model-1\"] twx-dt-model'));
element.scope().play();
...
//playing a audio -2d element
var wdg = angular.element(document.querySelector('twx-widget[widget-id=\"audio-1\"] audio'));
wdg[0].play();
...

So the question is now how to get the correct query for element where I do not know the elements name.

Lets check here to a 2d element text area

  • switch to preview mode
  • press Strg -Shift -I  keys to open the chrom debuging mode
  • follow the step according the picture below:2018-06-29_17-18-59.jpg
  • check of element with related object type name:2018-06-29_19-21-11.jpg
  • So now to set the text property of the textarea we can use some code like this:
    ...
    //find the element
    var textarea = angular.element(document.querySelector('twx-widget[widget-id=\"textArea-1\"] textarea'));
    //set the text value
    textarea[0].value="LLLLLLLAAAAAAAAAA"; 
    ...
    So hope helps!

thanks

-Roland

 

 

@RolandRaytchev this is all really good information. Thanks for this. I ended up using $scope.setWidgetProp which as you mentioned works for all widgets.

Top Tags