Alternate for if-else statement

[Karthik]

Hi,

In an experience I've 20 3D labels visibility to control on each step(total steps 7). 

 

$scope.checkStep = function(){

        console.log($scope.app);

           if($scope.view.wdg["model-1"].currentStep == 1){

              $scope.app.view.Home.wdg["3DImage-1"].visible = true;

              $scope.app.view.Home.wdg["3DImage-2"].visible = true;

              $scope.app.view.Home.wdg["3DLabel-1"].visible = true;

              $scope.app.view.Home.wdg["3DLabel-2"].visible = false;

              $scope.app.view.Home.wdg["3DLabel-3"].visible = false;

              $scope.app.view.Home.wdg["3DLabel-4"].visible = false;

              $scope.app.view.Home.wdg["3DLabel-5"].visible = false;

              $scope.app.view.Home.wdg["3DLabel-6"].visible = false;

          }

          else {

              if ($scope.view.wdg["model-1"].currentStep == 2){

                  $scope.app.view.Home.wdg["3DImage-1"].visible = false;

                  $scope.app.view.Home.wdg["3DImage-2"].visible = false;

                  $scope.app.view.Home.wdg["3DLabel-1"].visible = false;

                  $scope.app.view.Home.wdg["3DLabel-2"].visible = true;

                  $scope.app.view.Home.wdg["3DLabel-3"].visible = false;

                  $scope.app.view.Home.wdg["3DLabel-4"].visible = true;

                  $scope.app.view.Home.wdg["3DLabel-5"].visible = false;

                  $scope.app.view.Home.wdg["3DLabel-6"].visible = false;

              }

              else {        

                  if ($scope.view.wdg["model-1"].currentStep == 3){

                      $scope.app.view.Home.wdg["3DImage-1"].visible = false;

                      $scope.app.view.Home.wdg["3DImage-2"].visible = false;

                      $scope.app.view.Home.wdg["3DLabel-1"].visible = false;

                      $scope.app.view.Home.wdg["3DLabel-2"].visible = false;

                      $scope.app.view.Home.wdg["3DLabel-3"].visible = true;

                      }

                  else {        

                      if ($scope.view.wdg["model-1"].currentStep == 4){

                          $scope.app.view.Home.wdg["3DImage-1"].visible = false;

                          $scope.app.view.Home.wdg["3DImage-2"].visible = false;

                          $scope.app.view.Home.wdg["3DLabel-1"].visible = false;

                          $scope.app.view.Home.wdg["3DLabel-2"].visible = false;

                          $scope.app.view.Home.wdg["3DLabel-3"].visible = false;

                        if ($scope.app.params.step == 4){

              $scope.app.params.step = 1;

          }

          else {

              $scope.app.params.step = $scope.app.params.step + 1;

              }    

                          }

                      }

                  }

              }

          }

Like the above code I've to do this for 20 3DLabels. Anyone please suggest any other way to achieve this, Rather than using IF-Else statements for all the steps.

Thanks

[Mohit_Kabra27]

Hi @Karthik ,

You can try using switch-case, you can refer this link for more details : https://www.w3schools.com/js/js_switch.asp 

BR,

Mohit

[Karthik]

Hi Mohit,

For that too I need to change visibility properties to true or false for all 20 labels in each case right?

$scope.setWidgetProp('model-1', 'currentStep', 'stepnr');
$scope.playStep = function (stepnr) {

switch (stepnr) {
case 1:
{
$scope.view.wdg['3DLabel-1'].visible=false;
$scope.view.wdg['3DLabel-2'].visible=true;
$scope.view.wdg['3DLabel-3'].visible=true;
}
break;

case 2:
{
$scope.view.wdg['3DLabel-1'].visible=false;
$scope.view.wdg['3DLabel-2'].visible=false;
$scope.view.wdg['3DLabel-3'].visible=false;
$scope.view.wdg['3DLabel-4'].visible=true;
}
break;
case 3:
{
$scope.view.wdg['3DLabel-1'].visible=false;
$scope.view.wdg['3DLabel-2'].visible=false;
$scope.view.wdg['3DLabel-3'].visible=true;
$scope.view.wdg['3DLabel-4'].visible=false;
$scope.view.wdg['3DLabel-5'].visible=true;
}
 }
  }

Regards
Karthik

[Mohit_Kabra27]

Hi @Karthik ,

In that case, you can define a function in which you set the visibility of all 20 labels as false for once, and then in each case instead of setting the visibility to false for each label you can simply call the above function, and then only set the visibility true for the required ones in each scenario .

This way you won't need to set the visibility every time for all the 20 labels

I hope this will help, let me know your reviews 

BR,

Mohit 

[Karthik]

Hi @Mohit_Kabra27 , If I'm not wrong, I think it will work as a function within a function.

Could please share some VFS example code for this.

Regards
Karthik

[Mohit_Kabra27 · Accepted solution]

Hi @Karthik ,

So basically what i mean is, you can define a function like below:

$scope.hide = function(){
$scope.view.wdg['3DLabel-1']['visible'] = false;
$scope.view.wdg['3DLabel-2']['visible'] = false;
$scope.view.wdg['3DLabel-3']['visible'] = false;
$scope.view.wdg['3DLabel-4']['visible'] = false;
}

$scope.playStep = function () {
let stepnr = $scope.view.wdg['model-1']['currentStep']
switch (stepnr) {
case 1:
{
$scope.hide();
$scope.view.wdg['3DLabel-2'].visible=true;
$scope.view.wdg['3DLabel-3'].visible=true;
}
break;

case 2:
{
$scope.hide();
$scope.view.wdg['3DLabel-4'].visible=true;
}
break;

}}

Let me know if this works for you 

Thanks 

BR,

Mohit

[Karthik]

Thanks Mohit,

that works for me. 

[RolandRaytchev]

Hello @Karthik ,

if you want  to set  many widgets e.g. to visible  and let say they have some common string in the name you can use a construct like this:

//================================
$scope.setWdgsVisibility=function(str,value){
 
  var wdgs=$scope.app.view.Home.wdg; 
  for(wdg in wdgs)
  {  
   
      if( wdg.indexOf(str) !=-1) {  
                           $scope.setWidgetProp(wdg,'visible',value);
                                     $scope.$applyAsync();
                                   }
    }
  
 
};
//================================================================

and let say you need this function to call for all widgets with name containing "3DLabel" you can call

$scope.setWdgsVisibility("3DLabel",true);
// or to false -> not visible
$scope.setWdgsVisibility("3DLabel",false);

to set all 3DLabel to visible. You can further then enhance it  for example if you want to have all 3DLabel widget with names range e.g.  "3DLabel-4 ....  3DLabel-15 you can use some construct like this:

//================================
$scope.setWdgsVisibility=function(str,fromNr, toNr,value){
 
  var wdgs=$scope.app.view.Home.wdg; 
for (let wdgNr=fromNr; wdgNr <= toNr; wdgNr++) {
  for(wdg in wdgs)
  {  
   
      if( wdg.indexOf(str+wdgNr) !=-1) {  
                           $scope.setWidgetProp(wdg,'visible',value);
                                     $scope.$applyAsync();
                                   }
    }
 }//for wdgsNr 
 
};
//================================================================
// and later call
$scope.setWdgsVisibility("3DLabel-",1, 4,false);
$scope.setWdgsVisibility("3DLabel-",5, 15,true);
$scope.setWdgsVisibility("3DLabel-",16, 20,false);

So this will set all 3DLabel-1 ..4 and 3DLabel-16 ..20 to not visible and all 3DLabel-5 ..15 to visible

[RolandRaytchev]

so e.g. the code below :

$scope.setWidgetProp('model-1', 'currentStep', 'stepnr');
$scope.playStep = function (stepnr) {

switch (stepnr) {
case 1:
{
$scope.view.wdg['3DLabel-1'].visible=false;
$scope.view.wdg['3DLabel-2'].visible=true;
$scope.view.wdg['3DLabel-3'].visible=true;
}
break;

case 2:
{
$scope.view.wdg['3DLabel-1'].visible=false;
$scope.view.wdg['3DLabel-2'].visible=false;
$scope.view.wdg['3DLabel-3'].visible=false;
$scope.view.wdg['3DLabel-4'].visible=true;
}
break;
case 3:
{
$scope.view.wdg['3DLabel-1'].visible=false;
$scope.view.wdg['3DLabel-2'].visible=false;
$scope.view.wdg['3DLabel-3'].visible=true;
$scope.view.wdg['3DLabel-4'].visible=false;
$scope.view.wdg['3DLabel-5'].visible=true;
}
 }
  }

could be transformed to some code like this:

$scope.setWidgetProp('model-1', 'currentStep', 'stepnr');
$scope.playStep = function (stepnr) {

switch (stepnr) {
case 1:
{
$scope.setWdgsVisibility("3DLabel-",1, 1,false);
$scope.setWdgsVisibility("3DLabel-",2, 3,true);
}
break;

case 2:
{
$scope.setWdgsVisibility("3DLabel-",1, 3,false);
$scope.setWdgsVisibility("3DLabel-",4, 4,true);
}
break;
case 3:
{
$scope.setWdgsVisibility("3DLabel-",1, 4,false);//set 1 ... 4 to false
$scope.setWdgsVisibility("3DLabel-",3, 3,true);//reset 3 as visible
$scope.setWdgsVisibility("3DLabel-",5, 5,true);// set 5 as visible
}
 }
  }

Ok in this example is such function is not so  sufficient and it will be more sufficient when you have a longer list of contiguous widgets - e.g. 3DLabel-1....3D_Label-20. But the function could be further enhancement where you can use a list (json containing all widget which should be set- also usable for any property name (here in the example : visibility)

[Karthik]

Thanks Roland