The VisibleIndex Property Demystified – Part 1

Exactly 1 month ago I discovered a new gallery property named VisibleIndex. In my eagerness to learn more about this update, I immediately unleashed this tweet onto the world:

Since then, I have build the logic in several solutions around this property. But what does this property actually do? At the time of this writing, the official PowerApps documentation did not cover this property. Thus, I will try my best to explain the functionality of this property.

Let’s start by looking at a sample vertical gallery with next to it a text label which refers to the gallery’s VisibleIndex property and some other properties:

This gallery contains 4 records, all viewable at once. When all records are viewable at once, the VisibleIndex counter shows “1”. So, what does this number actually depict? This number represents the current view position in a “row of views”. As all records are viewable at once, the index will always show position 1. When I divide the gallery height with the template height it matches exactly the 4 records shown at each view position.

Let’s see what happens if I resize the gallery in such a way that it only displays 3 records at full size and a 4th record partially.

As you can see, as I scroll between the top and bottom of the gallery, nothing changes in the Visible Index. That’s because I can still see all 4 records at once. Even if one of the records is being shown partially. And yet again the number 3.4625 matches the numbers of records being displayed, which are 3 fully displayed and the 4th (0.4625) partially.

Let’s go one step further. Let’s modify the height of the gallery in such a way, that exactly 3 records are displayed at each view position.

As I move up and down in the gallery, the Visible Index moves between position 1 and position 2. At each position I can see exactly 3 records. The number 3 is equal to the the gallery height divided by the template height. At position 1 records 1, 2 and 3 are displayed. At position 2 records 2, 3 and 4 are displayed. Thus it takes, 2 positions to scroll through all the records.

Lets take it up a notch. I will set the gallery height in such a way that only 2 records can be fully displayed at once.

As you may guess, the Visible Index adapts to the new situation. 2 records are shown at each position. And a total of 3 positions are available:

  • Position 1 : record 1 and 2
  • Position 2: record 2 and 3
  • Position 3: record 3 and 4

Can you guess the maximum Visible Index number if I set the gallery to show only 1 record at each position?

If you calculated the number 4, you are correct! And if we divide the gallery height with the template height, the outcome states that only 1 record should be visible at each position.

Now that you have a grasp of the VisibleIndex property, be on the lookout for Part 2. In Part 2 I will take some Use Case scenario’s under the loop. Also keep in mind that I have not tested this property in a Flexible Height Gallery (yet). So, I cannot say if this approach works or is even present (!) in this type of gallery.