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

How to end playing sequence after steps are done.

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?

ClayHelbergAnswer
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);
 }
});
View in thread

12 replies

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

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

     

    Translate
    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

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

    It worked. Thanks a lot.

    Translate
    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?

    Translate
    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()
    Translate
    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.

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

      It worked. Thanks a lot.

      Translate
      Terms & ConditionsAccessibility statement