Navigate between SharePoint list items using next and previous arrows

[Johnane]

I'm trying to navigate between each item in a SharePoint list by using navigation buttons instead of having everything on one screen which would make it look cluttered.

I have this screen:

And this is the data source:

So what I'm trying to achieve is having the ability to move to the next item in the list when clicking on the forward arrow and move to the previous item in the list when clicking on the back arrow.

How can I achieve this?

[SebS]

@Johnane 

Are we talking about Edit Form or some random controls on a screen looking up to SharePoint list ?

[MarkBandR]

Hi @CH4646 ,

I am going to make some assumptions that you are using a Screen with an Edit Form on it.

For the Screen On Visible Property set it to something like:

If(
    IsBlankOrError(varCurrentItem),
    Set(
        varCurrentItem,
        First(YourList)
    );
    
)

where varCurrentItem is going to hold the current item selected. This will ensure that the variable varCurrentItem has a value.

Your list looked like it was small so Delegation might not be an issue. If it is a large list (>500 items) then you might need to go with something different that does not use the ">".

For your "Next" icon, set the OnSelect Property to:

    IsBlankOrError(
        First(
            Filter(
                YourList,
                ID > varCurrentItem.ID
            )
        )
    ),
    Notify("Last Record in List");
    ,
    SubmitForm(Form1);
    Set(
        varCurrentItem,
         First(
            Filter(
                YourList,
                ID > varCurrentItem.ID
            )
        )
    );
    
);

For your "Back" icon, set the OnSelect Property to:

If(
    IsBlankOrError(
        Last(
            Filter(
                YourList,
                ID < varCurrentItem.ID
            )
        )
    ),
    Notify("First Record in List");
    ,
    //If you want to save changes
    //SubmitForm(Form1);
    Set(
        varCurrentItem,
        Last(
            Filter(
                YourList,
                ID < varCurrentItem.ID
            )
        )
    );
    
);

This is probably not the most efficient way to do this. If you knew your IDs would be sequential you would be able to get Delegation and simplify the formulas by using "ID = varCurrentItem.ID +/- 1"

I added SubmitForm in the code when moving back and forth to show where that would go. You could do a check the Yes/No field and the Comments field to see if they changed to conditionally do a SubmitForm. You could also put in a button for the SubmitForm to let the users explicitly tell the App to Save updates.

-Mark

 If I've answered your question or solved your problem, please mark this question as answered. This helps others who have the same question find a solution quickly via the forum search. If you liked my response, please consider giving it a thumbs up. Thanks.

[CH4646]

Hello Mark. Wondering if you could help me further with this topic. I am trying to do the same thing as the original poster, but my form needs to stay in "view mode" (so no submission is necessary). I just want to navigate through the items (previous and next) for viewing only.

[MarkBandR]

Hi @CH4646 

I'm glad to help. In the future just create a new question and add a link to the other topic as reference. This way things are cleaner in the Community forum. One question and one solution.

In your Form OnVisible function, set it to:

If(
    IsBlankOrError(varCurrentItem),
    Set(
        varCurrentItem,
        First('Your List')
    )
)

Add a "Back" icon to the bottom of the form and set it's OnSelect function to:

Set(
    varPreviousID,
    LookUp(
        Sort(
            'Your List',
            ID,
            SortOrder.Descending
        ),
        //This line will show a delegation warning. 
        //This will not work for a list with many items > 2000 max
        ID < varCurrentItem.ID
    ).ID
);
If(
    IsBlankOrError(varPreviousID),
    Notify("First Record in List");
    ,
    Set(
        varCurrentItem,
        LookUp(
            'Your List',
            ID = varPreviousID
        )
    );
    
)

Add a "Next" icon to the bottom of the form and set it's OnSelect function to:

Set(
    varNextID,
    LookUp(
        Sort(
            'Your List',
            ID,
            SortOrder.Ascending
        ),
        ID > varCurrentItem.ID
    ).ID
);
If(
    IsBlankOrError(varNextID),
    Notify("Last Record in List");
    ,
    Set(
        varCurrentItem,
        LookUp(
            'Your List',
            ID = varNextID
        )
    );
    
)

Hope that helps you.

Please be aware of the delegation warning. What this means is the the filtering or lookup occurs on the client side instead of at the data source side. Since a Power App has a "Data Row Limit", this means that only a maximum number of items can be processed client side. This value is set in Settings-General-Data row limit with a maximum value of 2000.

Normally I would ask you to mark this as a Solution, but since this was not your question you will not be able to do that.

-Mark

[CH4646]

Hey Mark,

Thanks for the thorough instructions. I am not getting the solution I need however. I followed your instructions, and am not getting any errors (besides the delegation warnings). When I publish the App and go back to SP clicking the next and previous buttons do not do anything. If I click either a few times I can get to the message "Last Record in List" so I know it is definitely navigating. The details listed in the PowerApp do not change however and it seemingly stays on the record I started with. Any ideas?

-Chris

[MarkBandR]

Hi @CH4646 

I forgot to include a crucial setting. Sorry.

For the "Form" control on your Screen, set the "Item" property to "varCurrentItem".

If that works, can you give me a Thumbs Up?

Thanks,

Mark

[CH4646]

Right now the "Item" in my Form control carries the code:

If(IsBlank(SharePointIntegration.Selected),First([@'Talent in Motion']),SharePointIntegration.Selected)

If I remove it, my data becomes offline even if I refresh. 

How do I work this "varCurrentItem" code into this existing code. 

Thanks

Chris

[MarkBandR]

Hi @CH4646 ,

My original reply assumed the Power App was a Canvas App and not a SharePoint Integration App.

I re-did the example as a SharePoint Integration App. This was much more difficult to do when the user has the ability to "Edit" the item.

I am going to include the full instructions here:

1) Add "Back" and "Next" icons to your form.

2) For the "Back" icon, set the OnSelect property to (replace "Your List" with your list name datasource):

If(IsBlankOrError(varCurrentItem),
    Set(
        varCurrentItem,
        If(
            IsBlank(SharePointIntegration.Selected),
            First([@'Your List']),
            SharePointIntegration.Selected
        )
    )
);
Set(
    varPreviousID,
    LookUp(
        Sort(
            'Your List',
            ID,
            SortOrder.Descending
        ),
        ID < varCurrentItem.ID
    ).ID
);
If(
    IsBlankOrError(varPreviousID),
    Notify("First Record in List");
    ,
    Set(
        varCurrentItem,
        LookUp(
            'Your List',
            ID = varPreviousID
        )
    );
    
)

3) For the "Next" icon, set the OnSelect property to:

If(IsBlankOrError(varCurrentItem),
    Set(
        varCurrentItem,
        If(
            IsBlank(SharePointIntegration.Selected),
            First([@'Your List']),
            SharePointIntegration.Selected
        )
    )
);

Set(
    varNextID,
    LookUp(
        Sort(
            'Your List',
            ID,
            SortOrder.Ascending
        ),
        ID > varCurrentItem.ID
    ).ID
);
If(
    IsBlankOrError(varNextID),
    Notify("Last Record in List");
    ,
    Set(
        varCurrentItem,
        LookUp(
            'Your List',
            ID = varNextID
        )
    );
    
)

4) In the App - OnStart property, set it to:

If(
    IsBlankOrError(varCurrentItem),
    Set(
        varCurrentItem,
        SharePointIntegration.Selected
    )
)

5) For the SharePointform1 - "Item" Property, change it to:

Coalesce(varCurrentItem, SharePointIntegration.Selected,Defaults('Your List'))

Thanks to @RandyHayes for that piece of code from here:

Solved: SharePointIntegration - how to navigate to specifi... - Power Platform Community (microsoft....

6) For the SharePointForm1 - "OnSuccess" Property, change it to:

ResetForm(Self);
Set(
    varCurrentItem,
    Blank()
);
RequestHide();

7) For the FormScreen1 - "OnVisible" property, set it to:

Set(
    varCurrentItem,
    SharePointIntegration.Selected
)

Let me know if you run into any more issues.

Please consider giving this reply a Thumbs Up as it counts towards the ability for users to be recognized in the Community as contributing for everyone's benefit. As does marking an answer as a Solution.

-Mark

[CH4646]

Mark,

I appreciate you looking into this further for me. I think this is very close. Now when I open an item from my SP list it pulls up the correct item, and the prev and next buttons cycle through the inputs. 

Now though, when I click an item and initialize the PowerApp then cycle through the records using my new buttons all seems well until you click back to the SharePoint List (the PA goes away). If I click a new item in the SP list the PA re-initializes, but is showing the last item I was on when before I closed it and not the new item I selected. No matter what I click after that, it always shows the last item I was on in the PowerApp, and not the item I selected in the SP list. We are soooo close.....any ideas??

Thanks a million,

Chris