Power Apps: "Next record control" on a detail screen

Table of contents:

1. The goal: Create a "next and previous control"

2. Step 1: Configure the OnSelect of a gallery record

3. Step 2: Insert the arrow icons and the label

4. Step 3: Improve the user experience (UE) of the Power App

5. Conclusion and limitations of this solution

The goal: Create a "next / previous control" in Power Apps

Imagine coming from a gallery to a detail screen where a single record is displayed based on a variable (VarCurrentRecord).

Now we want to create an arrow menu (in the right corner) that allows us to go to the next or previous record, from the gallery's point of view.

Step 1: Configure the OnSelect of a gallery record

When we click on a record in the gallery we define the following 4 actions.

//1: Save the selected record to a variable.
Set(VarCurrentRisk,ThisItem);

//2: Collect all record ids and an ascending row number
ClearCollect(collCurrentRiskList,ForAll(Sequence(CountRows(ShowColumns(Gallery_Identify.AllItems,"powerful_riskid"))),Patch(Last(FirstN(ShowColumns(Gallery_Identify.AllItems,"powerful_riskid"),Value)),{RowNumber:Value})));

//3: Save the row number of the selected record
Set(VarCurrentRiskRowNumber,LookUp(collCurrentRiskList,powerful_riskid=VarCurrentRisk.Risk,RowNumber));

//4: Navigate to the detail screen
Navigate(Risk_DetailScreen);

Of course you should replace the blue values with your own. "powerful_riskid" is the column name of the Dataverse GUID of the table used in this example.

Steps 2 and 3 are the essential ones for our goal.

With step 2 such a collection is created with row numbers and the according id (here: Dataverse GUID):

And step 3 saves the row number of the selected record:

Step 2: Insert the arrow icons and the label

Insert the next arrow icon and add the following formula on the OnSelect property

//1: Lookup GUID of the next record
Set(VarNextRiskGUID,
LookUp(collCurrentRiskList,RowNumber=
VarCurrentRiskRowNumber+1,powerful_riskid));

//2: Set the the next record as the VarCurrentRecord
Set(VarCurrentRisk,LookUp(Risks,Risk=VarNextRiskGUID,ThisRecord);

//3: Increase VarCurrentRiskRowNumber +1
Set(VarCurrentRiskRowNumber,VarCurrentRiskRowNumber+1);

Insert the previous arrow icon and add the following formula on the OnSelect property

//1: Lookup GUID of the previous record
Set(VarNextRiskGUID,
LookUp(collCurrentRiskList,RowNumber=
VarCurrentRiskRowNumber-1,powerful_riskid));

//2: Set the the previous record as the VarCurrentRecord
Set(VarCurrentRisk,LookUp(Risks,Risk=VarNextRiskGUID,ThisRecord);

//3: Decrease VarCurrentRiskRowNumber -1
Set(VarCurrentRiskRowNumber,VarCurrentRiskRowNumber-1);

Insert a label and add the following

$"No {VarCurrentRiskRowNumber} of {CountIf(collCurrentRiskList,true)}"

Step 3: Improve the user experience (UE) of the Power App

To improve the user experience we set the visible properties of the arrows and the label as follows:

Back arrow:

If(VarCurrentRiskRowNumber>1,true)

Next Arrow:

If(VarCurrentRiskRowNumber<CountIf(collCurrentRiskList,true),true,false)

This way we can make the next arrow appear only if we are not yet at the last record and the previous arrow appear only if we are not at the first record.

Conclusion and limitations of this solution

Gallery.AllItems would probably not be used in practice, since otherwise only a maximum of 100 records would be loaded into the collection. But even if you store for example a whole or filtered Dataverse table in a collection, you have to watch out for delegation issues.

I'm sure there are very different preferences in terms of the number of variables used. You could certainly set fewer variables or display more columns in the auxiliary collection.

But isn't that the beauty, there are always several ways to get there.

Do you like this article?

Please write a comment or leave a like below and follow me on LinkedIn.

If you have any questions, I'm happy to help.

Marc Sigrist (Powerfully GmbH, Switzerland)