top of page
  • Writer's pictureMarc Sigrist

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

Updated: Sep 21, 2023


Table of contents:


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.

Risk Management with Microsoft Power Apps

Step 1: Configure the OnSelect of a gallery record

Gallery in Power Apps

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):

Collection











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

Power Fx



Step 2: Insert the arrow icons and the label

Back and next record control

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.

Power Apps Spezialist


Marc Sigrist (Powerfully GmbH, Switzerland)

LinkedIn Marc Sigrist




1 Comment


Guest
May 31

Hello Marc, Amazing post! Thanks for sharing. How did you link the text input fields "Responsible", "Risk title", Category" etc to the arrow icons?

Like
bottom of page