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

Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X

Disabling Widgets with Javascript Code

Ahmed94
8-Gravel

Disabling Widgets with Javascript Code

Hello everyone,

 

Is there a way in to disable widgets (buttons, images,..) using JavaScript Code ?!

In my case i have for example many 3D-Images attached to 3D Models and i want that once i click on one of the images, all the other images become disabled so that their events are disabled. 

 

Thank you in advance!

best regards,

Ahmed

1 REPLY 1

Hi @Ahmed94 ,

so far, I understand the problem, here you want to disable the events when you make them invisible? Right? 

I tested in preview where I did set the property of 3DImages widget to not visible (visibility = false) . In this case in preview mode the 3D-Images widgets are not visible, but when I click on the area of it, there was still the event fired.

I tested it on mobile Android and on IOS devices but this problem seems to occurs only in Preview mode. On IOS and on Android devices seems that you can not click a 3D-Images if they are not visible - means visible property is false/ this are my observations.

In generally to blank, or to make visible of list of widgets you need  to :

-to have a widget list which should be considered for changing of the visibility

- or you need to specify the type of the widget which have to be set. To identify a widget type we can check if a widget has a specific property which is specific for this widget

Example:

 

 if(hasWdgProp(wdgs[wdg],'idpath')) {
      console.log("this widget ::"+wdgs[wdg]['widgetName']+" is a modelitem");}
 if(hasWdgProp(wdgs[wdg],'placeholder_img')) {
      console.log("this widget ::"+wdgs[wdg]['widgetName']+" is a 3DImages");
if(wdgs[wdg]['widgetName']==wdgName) 
             {$scope.setWidgetProp(wdgs[wdg]['widgetName'],  'visible',true);}
      else   {$scope.setWidgetProp(wdgs[wdg]['widgetName'],  'visible',false);}

 

The following code will blank all 3DImage  widgets and it will display the 3dImages widget passed by the function argument:

 

//========================================================
$scope.widgetBlank=function(wdgName){
//wdgName should be visible
  var wdgs=$scope.app.view.Home.wdg; 
  for(wdg in wdgs)
  { 
    if(hasWdgProp(wdgs[wdg],'placeholder_img')) {
      console.log("this widget ::"+wdgs[wdg]['widgetName']+" is a 3DImages");
      if(wdgs[wdg]['widgetName']==wdgName) 
             {$scope.setWidgetProp(wdgs[wdg]['widgetName'],  'visible',true);}
      else   {$scope.setWidgetProp(wdgs[wdg]['widgetName'],  'visible',false);}
    $scope.$applyAsync()
    }   
  }
//========================================================
function hasWdgProp(widget,property)
{
 	for (wp in widget)	{
            //console.log("property="+property+" | wp="+wp);
           if(wp==property) return true;
           else continue;
return false;					}
}
 /========================================================

 

Here the 3DImage widget with widget ID == wdgName will be set to visible and all other 3DImage widgets will be set to invisible

Top Tags