How to end playing sequence after steps are done.

[AS_9962540]

After all the steps are done playing, I don't want the steps to start from the beginning again. How should I stop playing after all the steps are played once?

[ClayHelberg · Accepted solution]

You can watch for stepcompleted event, and if it's the last step in the sequence, then disable the play button or take some other action to prevent repeating the sequence. Something like this:

$scope.$on('stepcompleted', ()=>{
  console.log("step " + $scope.getWidgetProp("model-1","currentStep") + " of " + $scope.getWidgetProp("model-1","steps") + " completed");
  if ($scope.getWidgetProp("model-1","currentStep")==$scope.getWidgetProp("model-1","steps")) {
    // end of last step, so hide play button to prevent repeating
	  $scope.setWidgetProp("playbutton","visible",false);
  }
});

[AS_9962540]

It worked for my first case. But my second case contains a dropdown and after steps are completed for first option I can't proceed for the second option from the dropdown as the button gets disabled. 

Thanks 

[ClayHelberg]

Right, then you need to set your menu handling script to re-enable the button when the user switches sequences (menu selections). Whatever code you use to do that, just add a line to make the play button visible again:

$scope.setWidgetProp("playbutton","visible", true);

[AS_9962540]

I am using the dropdown to view the sequence list. So I have bind the SequenceList of the model to the select widget so how can I use this code to make the button visible after selecting from the dropdown?

Thanks

[ClayHelberg]

In that case, you can probably use the "sequenceloaded" event to re-enable the button:

$scope.$on('sequenceloaded', ()=>{
  $scope.setWidgetProp("playbutton", "visible", true);
});

[AS_9962540]

It worked. Thanks a lot.

[ClayHelberg]

Excellent, glad to hear it!

[AS_9962540]

I had one more issue when I checked it now that the button gets disabled automatically after clicking the previous button and then I can't proceed. So is there a solution to enable the button as soon as I click the previous button to rewind the step?

[ClayHelberg]

Sure. You will probably need to replace your simple button binding on your Previous button to run some Javascript instead, so it can both a) rewind the step and b) ensure the Play button is visible. Something like this:

$scope.rewindStep = function() {
  // rewind the step
  $scope.app.fn.triggerWidgetService("model-1", "rewind");
  // make sure play button is visible in case they rewind the last step
  $scope.setWidgetProp("playbutton","visible",true);
}

Then remove the binding from your Previous button and open the "Click JS" window and insert:

rewindStep()

[AS_9962540]

I tried this but its not working. It rewinds after clicking on the previous button but next button gets disabled.

[ClayHelberg]

Apparently, the rewind service also generates a "stepcompleted" event, which causes the button to be re-hidden. You should be able to get around this by using a timeout. You also have to explicitly call $scope.$apply(), so Angular knows to trigger a screen update after the change, like so:

$scope.rewindStep = function() {
  // rewind the step
  $scope.app.fn.triggerWidgetService("model-1", "rewind");
  // make sure play button is visible in case they rewind the last step
  setTimeout(()=>{ $scope.$apply(()=>{$scope.setWidgetProp("playbutton","visible",true);}); console.log("setting playbutton to visible"); }, 100);
}

[AS_9962540]

It worked. Thanks a lot.