Skip to main content
A
AS_99625401-Visitor
1-Visitor
July 21, 2021
Solved

How to end playing sequence after steps are done.

  • July 21, 2021
  • 7 replies
  • 4066 views

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?

Best answer by ClayHelberg

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);
 }
});

7 replies

C
ClayHelberg18-OpalAnswer
18-Opal
July 22, 2021

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);
 }
});
    A
    AS_99625401-VisitorAuthor
    1-Visitor
    July 22, 2021

    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 

    C
    ClayHelberg18-Opal
    18-Opal
    July 22, 2021

    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);

     

    A
    AS_99625401-VisitorAuthor
    1-Visitor
    July 22, 2021

    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

    C
    ClayHelberg18-Opal
    18-Opal
    July 22, 2021

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

    $scope.$on('sequenceloaded', ()=>{
 $scope.setWidgetProp("playbutton", "visible", true);
});
    A
    AS_99625401-VisitorAuthor
    1-Visitor
    July 22, 2021

    It worked. Thanks a lot.

    A
    AS_99625401-VisitorAuthor
    1-Visitor
    July 22, 2021

    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?

    C
    ClayHelberg18-Opal
    18-Opal
    July 22, 2021

    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()
    A
    AS_99625401-VisitorAuthor
    1-Visitor
    July 22, 2021

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

    C
    ClayHelberg18-Opal
    18-Opal
    July 22, 2021

    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);
}
      A
      AS_99625401-VisitorAuthor
      1-Visitor
      July 22, 2021

      It worked. Thanks a lot.

      Terms & ConditionsAccessibility statement