Using Next and Previous Buttons for Popup visibility

[Swapnil_More]

Hi, 

I want to change the popup on the click of the next and the previous button.For example: If I am on the first popup/panel and when I click on previous then it will not work and when I click on next then it will go the second popup and similarly to the third and consecutive popups and when I am on the last popup and click on the next then it must give me message and when I click on previous pages from either of the pages or from the last popup it will perform accordingly.Here is my code snippet.Please help me in performing the same functionality.

Thanks & regards,

Swapnil More

$scope.getPrev = function() {
if ($scope.app.params.panelVisible > 0) {
$scope.app.params.panelVisible --;
}
};

$scope.getNext = function() {
if ($scope.app.params.panelVisible < 2) {
$scope.app.params.panelVisible ++;
}
}

[ytella]

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!

[Swapnil_More]

I tried this code as you told me but it's not working actually i tried same one before few days but it doesn't work

if you have any other way pl. tell me. 

[Swapnil_More]

Can you help me with this once

[dongxf]

Is this what you are looking for?

[dongxf]

 Please ignore the video I uploaded on 10/12. 

Here is the video I intended to upload.

[Swapnil_More]

I know this method but this method not useful in Realwear HMT 1.

If you can do it with single Next and Previous buttons then tell me.

[dongxf]

Is this what you need?

[Swapnil_More]

Can you send me JS code use for that ?

[dongxf · Accepted solution]

Attached is the project.

[Swapnil_More]

Thanks