How to toggle between Gallery rows in Canvas Apps

Overview

In this tutorial, we will walk through how to toggle between gallery rows in a canvas app. If your gallery has minimal records returned, this is an ideal solution to allow users to quickly traverse between records.

YouTube

Gallery – Add Row Number

Go to your gallery:

Add the following logic that will add a row number as a column:

With(
    {
        contactList: Contacts
    },
    ForAll(
        Sequence(CountRows(contactList)),
        Patch(
                Last(FirstN(contactList, Value)),
                {rowNumber: Value}
        )
    )
)

Highlights of what this logic does:

• With function allow you to apply a formula to the data set
• ForAll will look through all the records based on the sequenced count of records ex) If you have 10 records, the sequence will be 1, 2, 3 … until 10.
• Patch will look for the last row based on the sequence number and will add the Sequence value to a new column called rowNumber

Toggle Icons

Add the Arrow Up and Arrow Down icon to your app:

Go to the down arrow icon and add the following logic:

If(gallery_ContactList.Selected.rowNumber < gallery_ContactList.AllItemsCount,
    UpdateContext({nextRow: gallery_ContactList.Selected.rowNumber + 1});
    Select(gallery_ContactList, nextRow);
);

This formula will check to see if you’re on the last row of the record set. If you are, no action will be performed. Otherwise, it will update a variable (increment by 1) and select the next row in the gallery list.

Go to the up arrow icon and add the following logic:

If(gallery_ContactList.Selected.rowNumber > 1,
    UpdateContext({nextRow: gallery_ContactList.Selected.rowNumber - 1});
    Select(gallery_ContactList, nextRow);
);

This formula will check to see if you’re on the first row of the record set. If you are, no action will be performed. Otherwise, it will update a variable (decrement by 1) and select the previous row in the gallery list.

At this point the solution should be working for you!