Using Next and Previous Buttons for Popup visibility

Hi Swapnil More,

One way to implement this scenario is as follows:

• In the Data panel, add application parameters such as popup1, popup2, popup3 and so on as per your requirement.
• Bind the popup1 application parameter to the visible property of popup-1 widget. 
• Bind the popup2 application parameter to the visible property of popup-2 widget. 
• Repeat the same for remaining popup widgets.
• Drag and drop 2 label widgets on to the 2D canvas. Uncheck the visible property and enter the desired inputs in the text fields of the label widgets. For example,
  • In the label-1 enter "No previous popups available. Please click Next button"
  • In the label-2 enter "No next popups available. Please click previous button"
• Add two application parameters such as PreviousLabel and LastLabel. Bind these two parameters to the visible property of the label widgets respectively
• Now write the js function for navigating through the popup widgets with Next and previous buttons. Below is the sample code for navigating among 3 popup widgets

  • $scope.nextPopup = function()
    {
    if($scope.app.params.nextPopup == 0)
    {
    $scope.app.params.PreviousLabel = false;
    $scope.app.params.popup1 = true;
    $scope.app.params.nextPopup = 1;
    }
    else if($scope.app.params.nextPopup == 1)
    {
    $scope.app.params.popup1 = false;
    $scope.app.params.popup2 = true;
    $scope.app.params.nextPopup = 2;
    }
    else if($scope.app.params.nextPopup == 2)
    {
    $scope.app.params.popup2 = false;
    $scope.app.params.popup3 = true;
    $scope.app.params.nextPopup = 3;
    }
    else if($scope.app.params.nextPopup == 3)
    {
    $scope.app.params.popup3 = false;
    $scope.app.params.LastLabel = true;
    $scope.app.params.nextPopup = 3;
    }
    }

    $scope.previousPopup = function()
    {
    if($scope.app.params.nextPopup == 3)
    {
    $scope.app.params.popup3 = false;
    $scope.app.params.popup2 = true;
    $scope.app.params.LastLabel = false;
    $scope.app.params.nextPopup = 2;
    }
    else if($scope.app.params.nextPopup == 2)
    {
    $scope.app.params.popup2 = false;
    $scope.app.params.popup1 = true;
    $scope.app.params.nextPopup = 1;
    }
    else if($scope.app.params.nextPopup == 1)
    {
    $scope.app.params.PreviousLabel = true;
    $scope.app.params.popup1 = false;
    $scope.app.params.nextPopup = 0;
    }
    else if($scope.app.params.nextPopup == 0)
    {
    $scope.app.params.PreviousLabel = true;
    $scope.app.params.nextPopup = 0;
    }
    
    }

•  Drag and drop 2 buttons and name them as 'Next' and 'Previous'.
• In the click event of button 'Next' call the nextPopup(); function
• In the click event of button 'Previous' call the  previousPopup; function
• Save and test the experience.

Hope this helps!