The VisibleIndex Property Demystified – Part 2

Hello and welcome to Part 2 in this series. In Part 1 I introduced the recently released gallery property named VisibleIndex. In this part I will dwell further on this foundation by showing you examples of how this property can be consumed as part of the logic in your solutions.

Let’s say I want to send out a survey. From a Microsoft-centric perspective, Microsoft Forms will be the tool to accomplish this task. However, if I’m not mistaken, Microsoft Forms does not provide the rich animation and visualization capabilities that PowerApps provides. Therefore I will build a survey solution from scratch in PowerApps using 2 SharePoint lists.

  • Questions List
  • Answers List containing Multiple Choice answers.

Each Question has been assigned a QuestionID. The Multiple Choice answers are associated to the related questions via the Question Title metadata property. As a Best Practice you would normally associate via the QuestionID, but for the sake of simplicity I choose this approach.

††

††Next I went on to build the survey screen, which consists of a horizontal gallery control. Within the gallery control I’ve added a radio control, a label and a rectangle shape. The radio control holds the MC answers. Together the label and shape will function as question header. I’ve also added an extra label to show the Visible Index of the current gallery item.

Furthermore I’ve resized the gallery template in such a way that only one record item is displayed on the screen. Once all of these components are in place and the underlying SharePoint lists are linked to these controls, the result is as follows:

As you can see, as I scroll through the gallery the Visible Index updates to reflect the current visible record item.

One of the most sought after options is the possibility to disable the option to go back to a previous question. I could do that by applying logic based on the VisibleIndex property. I simply place a small rectangle shape shpHideLeftNav on top of the left navigation button, and set the Visible property of this shape to show only if the VisibleIndex is greater then 1. I’ve also given the shape the same fill color as the gallery fill for seamless ‘integration’ with its background. I have however given the shape a colored border, just so you can recognize the behavior as stated here.

As you can see, the left navigation control is hidden behind the rectangle shape, if the Visible Index of the current item is greater then 1. I could also have set the visible property of shpHideLeftNav to a static “true”, resulting in shpHideLeftNav to always be sitting on top of the left navigation button. But that would mean that I’m not using any logic, which would not make any sense in the context of this article.

Let’s take it up a notch. Now I want to disable the possibility to go to the next question if no answer has been selected for the current question. To accomplish this I will make the following modifications:

  • Add another shape shpHideRightNav, which will conditionally hide the right navigation button by appearing on top.
  • Define a global variable gloQuestionComplete which will be populated with the current gallery item’s VisibleIndex value, once a answer has been selected.

First things first. To make sure that the right navigation button starts in a hidden state every time we run the solution, we set the global variable to “0”. This results the right shape to appear in a visible state on top of the right navigation button.

Once that is done, I set the OnSelect property of the radio control to update the global variable with the current Visible Index. So in fact the global variable is updated each time an answer is selected.

The last step is setting the Visible property of the shpHideRightNav shape to be hidden only if the value of the global variable matches the value of the current gallery item’s VisibleIndex. When these values match, it means that the answer for this question has been selected.

Once we’ve gone through all these steps, the solution should behave as depicted below:

As predicted, the right navigation button is hidden as long as an answer has not been selected. Once you select an answer, the navigation button is shown and you can continue to the next question and so on.

As the last answer is selected, I would want to make a button visible which executes some follow-up action. In this example it will take me to a “Survey Complete” screen.

First I add the Complete Screen, then I add the Finish button on the Survey Screen. And then I set the Visible property of the Finish button to show only once the last question has been answered.

To establish the last part I count number of rows in the gallery. The total count should be equal to the Visible Index highest value. Once these are equal, it means that I have reached the last record item in the gallery.

Once that is done, the result should be like this:

Let’s add some finishing touches by removing the colored border from the shpLeftNav and shpRightNav shapes, and hiding the Visible Index label in the header. This results in a clean User Experience:

And with this article I have tried to delve into the What and How of the PowerApps Gallery VisbleIndex property. Go ahead and have some fun with this! Over the last month I have build some quite complex solutions, exploiting this property. So, I’m very exited and looking forward to your ideas, remarks, questions and comments.