Expand & Collapse Sidebar

[AS16]

Hi all,

I have a 2D project and I want to use a feature of expanding and collapsing the sidebar when user click on "☰ List of Instruction" button. The sidebar containing a list of instructions for assembly process using checkbox. 

The idea is, after the first step being played, user have to click on "☰ List of Instruction" button to check on the checkbox for the step that has been done. After that, the sidebar will automatically collapse and the next step will automatically play the assembly process. Then the user must repeat the same step as before which is checking the checkbox and next step automatically being played. 

Is it possible to do this?

Thank you in advance. 

[sebben]

Hi,

an easy way to do that would be to just show and hide the gridLayout. You can write two functions like this:

$scope.showPanel = function(){
  $scope.view.wdg["gridLayout-1"].visible = true;
}

$scope.hidePanel = function(){
  $scope.view.wdg["gridLayout-1"].visible = false;
}

Then call showPanel(); from the button Click event and hidePanel(); from the Selected event of the checkboxes.

Also link the Selected event to the Play and Forward service of your model.

I hope this helps.

[AS16]

@sebben Thank you for your help. But I want the checkbox being displayed only when user click on the "List of Instruction" button. 

For now, it being displayed from beginning. The checkbox will collapse when I click on the checkbox. 

Thank you. 

[sebben · Accepted solution]

You can just uncheck the visible property of the gridLayout and it will not show up in the beginning.

[AS16]

@sebben Thank you so much for your help 🙂

[RolandRaytchev]

Additonally to solution provided by  @sebben  I want to mention the option to use popup widget. I remember that I used in an old project for similar task  different numbers of  popus as conainer for different checkbox lists.

Also , it  is possible to use an repeat widget where the data is commming from a service - but this requires a service to collect or to generate data (only in javascript).  The most simple solution is to use static list of checkbox widget added to the popup as shown on the picture :

The popup could be shown via call like:

$timeout($scope.$root.$broadcast('app.view["Home"].wdg["popup-1"].svc.showpopup'),100);
//or hide it
$timeout($scope.$root.$broadcast('app.view["Home"].wdg["popup-1"].svc.hidepopup'),100);

[AS16]

@RolandRaytchev Thank you so much for your explanation. Really appreciate it!  

[dsgnrClarK]

And I really want to know how this sophisticated animated sidebar be done. (around 4s and 28s) 😃

With Ionic? or CSS?

Note: https://community.ptc.com/t5/Vuforia-Studio/Showing-animation-in-select-widget/m-p/643465 found this afterward.