cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you know you can set a signature that will be added to all your posts? Set it here! X

Using Next and Previous Buttons for Popup visibility

Swapnil_More
14-Alexandrite

Using Next and Previous Buttons for Popup visibility

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

 

 

Regards,
Swapnil More
1 ACCEPTED SOLUTION

Accepted Solutions
dongxf
6-Contributor
(To:Swapnil_More)

Attached is the project.

View solution in original post

10 REPLIES 10

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
14-Alexandrite
(To:ytella)

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. 

Regards,
Swapnil More
Swapnil_More
14-Alexandrite
(To:ytella)

Can you help me with this once
Regards,
Swapnil More
dongxf
6-Contributor
(To:Swapnil_More)

Is this what you are looking for?

 

dongxf
6-Contributor
(To:dongxf)

 Please ignore the video I uploaded on 10/12. 

 

Here is the video I intended to upload.

Swapnil_More
14-Alexandrite
(To:dongxf)

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.

Regards,
Swapnil More
dongxf
6-Contributor
(To:Swapnil_More)

Is this what you need?

Swapnil_More
14-Alexandrite
(To:dongxf)

Can you send me JS code use for that ?

Regards,
Swapnil More
dongxf
6-Contributor
(To:Swapnil_More)

Attached is the project.

Swapnil_More
14-Alexandrite
(To:dongxf)

Thanks

Regards,
Swapnil More
Top Tags