Power Apps Gallery Pagination #PowerApps #PaginatedGallery #SharePoint

hey everyone welcome back so in today's video I'm going to show you possibly the simplest method to add a pagination to the power apps Gallery control so let's take a look I have this app that's showing me the travel request and I have around 1,000 requests right now in my SharePoint list so currently to see all the records what I need to do I need to keep scrolling so when I'm scrolling the power apps going to make call to my backend SharePoint list to get the next result so it's like 100 at a time now there's no way I can directly go to the last page or I can see a particular record there's no way I can do it so that's why the page ination is helpful because then you have page ination you can go to a particular page that you want to see so what we're going to do today we're going to learn how we can convert this app to something like this so now you can see at the bottom I have a good looking pagination I can see the total record is 1,1 I can click next first page to the second page but not only that now I have this entire page that I can actually click on any number and the app is going to take me directly to that page so I don't need to scroll and currently I have defined the 10 records in one page good so we're going to learn stay tuned you don't want to miss it [Music] [Music] welcome back so as I said we are going to add a pagination to an existing app you can always start with the new app but I'm going to show you how you can add this to an existing app that you are already using okay so what I'm going to do I'm going to edit this app that I already have okay so this is my app very simple app I have this Gallery control that is connected to travel request and this is my backend list okay nothing much I have applied some styling to it but more or less this app is very simple showing me the data from my backend SharePoint list okay so the first thing that we need to make our pation work if I go to the data currently as you can see this is directly connected to my SharePoint list but to pagination to work perfectly fine what we need to do instead of directly connecting to the SharePoint list we are going to use the power automate flow to get the data okay so what you need to do first thing go to this power automate icon and we're going to create a new flow okay I'm going to create a empty flow so create flow okay give it a name always a good practice then we you are going to get this power apps V2 we're going to add two input that we will require when we're going to call this power automate flow the first one is Page size okay and what this page size is going to be it's going to Define how many items you want to see in one page okay the second one is start item id this will help me to know the starting ID or start in uh row or starting item for a given page so when we're going to first time call it this will be zero that means start from the first item and then let's say if I have 10 or 20 as a p size then it's going to start plus 20 or plus 10 okay so we need these two input parameter for our flow to work the next step is very simple we going to query the SharePoint list and get the data according to our pce size okay so I'm going to go to SharePoint okay and then get I items this is the action that allow me to query the list item provide the site address okay list name so my list name is travel request Okay now click on the show Advance option this is where we're going to pass a filter query that will allow us to get these data or these items from the SharePoint list as for our page size okay the first one that we going to pass a filter query and what we going to going to say ID that's the ID column in our SharePoint list greater than the start item id okay and then the top count so if after filtering the query how many item you want and this is where we're going to use our past size okay once you click on the top top count you may not see anything here okay don't worry what you can do click on the filter query or let's say order by select the paste size copy it and paste it here okay simple approach just a quick tricks if you don't see it you can do this but this is nothing but if you look at the expression it's saying trigger body and text text is nothing but this name of this internal column okay so these are the two thing that you need to do that's it this will do the magic now next step is we're going to send this response back to the power app okay and and then we going to search respond and here power apps respond to power apps or flow what we are sending back response that's the variable name that we're going to use okay and what we are responding back we are responding back entire result that we are getting from get item so go to the expression okay you're going to say body and here saying action name our action name is get underscore items Okay click okay that's it we're going to save it okay so our flow is connected here now whenever we going to call this flow it's going to give us the results The Next Step what we're going to do we're going to go to the apps on start because what we are trying to do when the app is going to first time load we need to query the first setup result okay so we're going to write some uh logic here the first thing that we need is to uh set a variable that's going to define the number of items that we want in each P each page okay so set okay so what I'm saying here we we are defining one variable called where great page size and we are saying 10 that means in each page we need a 10 record semicolon the next thing that we need we need to call our flow that we just created okay I'm going to Define a variable called obj response this is our variable that's going to store the result we are going to use action called par Json this is again available in power app what it does it's going to take a response from the flow and pass it to the Json so that our Gallery can understand the results okay then after this we're going to type the name of the flow so the name of the flow if you start typing get items this was the flow name right so get get splist item hypen 2. run and as you can see here as soon as you reach here it's saying it's asking for two information text and text one and if I show you the flow that we have just created right so we have two input first one is the page size second one is the starting ID so the first one is Page size here we're going to pass our variable right that's the size that's the number of item on each page and the second one is starting item because we are starting this on app start that means we want to start from the first item so we're going to pass zero close this and then Dot and you will see our response already here close this bracket another one semicolon okay so what this is going to do this is going to call the flow right depending on the pce size and static item is going to respond us with the entire result from this get items and after we get this response the last thing that we need to do we need to collect all of this response to a collection so clear collect obj G data that's the name of my collection we going to say table table OB response dot okay so we are saying clear collect collect in this information into the scal data obj response. value now why I'm doing like this once you're going to get this response from the power automate the actual data that we are getting is going going to be under value and I'll show you in a while once we run it so you need to do object response. value and then table now let me show you this running so how you can run this without running the app I'm going to go to the app and say run on start okay this going to call this flow as you can see here right it's just run 5 second ago we will go and we will see how the response and everything is working so we passed the P size at 10 starting Item ID is zero that was perfect right then then we make the call ID is greater than zero and top 10 we got the response and you can see the response over here right so this is the response we got don't worry too much about it just make sure that you understand this one as I said the value because we are passing this entire thing back to the power app but the actual data is starting from here so that's why we use do value always remember this right okay so we got the response and as you can see here now what we're going to do we're going to go to our Gallery control here item is saying travel request instead of that what I'm going to say obj Gallery data okay once you do it your gallery control will fail of course but what you need to do here now if I go to the this item do title it is saying that this this doesn't exist you only need to add value. tile and and you will start seeing the results okay similarly if we go to the region request the only thing I need to add this item. value dot region for travel so remember in your gallery if you have this item dot your column name if you are using this method just add the value before it so this item. value do your column name okay we're going to repeat this for all of the column okay perfect so our app is working it's getting the data from the from the point list but it only going to show 10 record because that's what we are asking our flow to give us so now what we're going to do we're going to make some space for the pagination okay and we're going to insert two button here one for previous and one for next this is my next button this is my previous button right so on the next button what we want we want our power automate flow to send the next set of results that is next 10 results right so what we need to pass first we need to pass the page size that is 10 the second one we need to pass the ID that we need to use right that's more important this one ID is greater than so somehow we need to find out in here what is the maximum ID on this page because ID is sequential and we're going to pass that ID to the flow okay so on button on select we're going to say set obj response pass Json is going to remain the same no change here we are calling our flow the first parameter is our pce size that is also we not going to change because we have it the second parameter the starting ID that's going to change and how we going to get it so what we're going to do we're going to write a small logic here we're going to say if is empty Gallery data do all items okay so what we are checking this is the gallery data is the name of my gallery okay as you can see here so we are check checking that if gallery does have any record because if it doesn't have any record that's going to be zero because then you are on the page where nothing is showing up so if there is no item on the gallery that my starting index or starting item should be zero if not then we need to get the last item on this Gallery okay and get the ID of that so last okay so last item of this Gallery control do value do ID okay close this close this dot response because that's what we need and close it okay and once we have that response then we're going to just go to our app and this last point this this not going to change we're going to clear the collection that we have and assign the latest response that we got from the power automate flow that's it you're going to save it and run it okay now if I click on the next button look at this it's bringing me next record me click next it's going to get me the next set of result okay so we done with the next item now we're going to see how we can go to the previous page so what I'm going to do I'm going to copy this logic that we have used for next and go to the previous button on select I'm going to paste because most of it is going to remain the same for example we going to still still set the response object we still going to call the flow okay and we're going to check if the gallery is empty if it's empty that means we need to get the first item if it is not then on next we were trying to get the last item ID for the previous we should be getting the ID of the last item of the previous page okay so how we're going to get it so here what we going to do instead of last we're going to do first okay so what we are doing trying to get the first item of this Gallery the page where we are okay and then I'm going to do minus variable page size okay so if you look at this page let's say we are on this page and we want to go to the previous based on our logic here it's going to do first of gallery item so we will get the 31 that's the ID of the first item then we are doing minus the page size our page size is 10 so this will give me 21 right so based on the logic and the page size that we have the previous page should start from 21 so in the flow everything that is greater than 20 should be coming back okay so here this is going to give me 20 1 so what I'm going to do I'm going to use this and put into the bracket and do minus one so now if you look at this entire thing keeping me 20 and that's what we want because when when I'm going to press previous the index will go as a 20 and in our logic that we have is going to be greater than 20 so we will get the previous page fair enough next is going to remain the same let's run it okay I'm going to press previous perfect right so now I can keep going back it's going to bring me the previous page as I perfect so the navigation is working now let's do some more Logic on previous and next button like for example if I am on the first page the previous button should be disable and when I'm the last page the next button should be disabled so I'm going to do the previous button and if you go to the display mode for this button okay so currently this is an edit what we're going to do we're going to keep it edit if we are not on the first page and we're going to make it disable if we are on the first page as currently we are okay so what we're going to do the logic if the first item of this Galler dot value do ID equals to 1 then display mode disabled else keep it add it simple perfect so now if I play currently it's disabled because we are on the first page if I go next my previous button is enabled this part is done now let's work on the next button so to make the next button disable we need to know the total number of item that we have in our list currently we don't know that right currently we only in information that we have here is the 10 records that we are getting back from our power automate flow so what we need to do we need to also make some changes to our power automate flow to get the total number of item in a list and then use that number to disable this so I'm going back to my power automate here what we're going to do we're going to add another action this is just to get the total number of items in a list okay SharePoint and this time we're going to use send an s GTP request to SharePoint because what we are trying to do we trying to get the total number of item I'm going to select my site address okay and in the URI this is what we're going to use so I'm going to save it and I will show you I'll run this flow manually and then I will show you what response we going to get okay so we're going to test this just to see this particular API call so if you look at this one this is the result that we got so we have the D and if you scroll down item count okay so this item count is the total number of items so what we're going to do we're going to pass this information also back to the power app so I'm going to go to response and add another response variable total items and here what we're going to use so go to the expression and then we're going to say Body Action name Gore count question mark single code D question mark okay so body get count this is the action name replace it with whatever action name that you you have in your flow D item count click okay save okay so float change has been done now go back to your power app go to the flow and make sure you refresh it so that the latest flow change are reflected in here and then we going to go to app on start because what we want to do when the first time app load we want to get the total number of item and we will keep it or save it in a variable so what I'm going to do I'm going to create a variable total item and instead of response because response is all item we're going to use the total item this one right we just created and if I do run on start to see if I'm getting any value here or not okay so this variable should have some value now yes so now we go to the next button disable it go to the display mode and here what we're going to do we're going to type another if statement so if last because now we are trying to see whether we at the last of the item or not so Gallery data do all items dot value do ID equals to Total item display mode disable I'll keep it add it okay now you may get this because it's not a text ID is a text so we going to just convert this to the text okay so ID column is text we are just converting this total item to the text so we have our display mode now let's try to see if we are reaching to the last item or not and how I'm going to do it I'm going to change this to 500 so we're going to just run it for 500 item okay so we got all the 500 item here going to run it next should give me the next set of 500 one more and you see it's disabled and we are at the last item it 1,1 coming back to app I'm going to change it to 10 so we have done so far previous next everything is working fine but one thing that I also have in my app is these numbering right so how we going to get this numbering so let's do that as well so I'll go here and we going to insert a horizontal Gallery because we want the numbering right okay and what I'm going to do I'm going to delete anything that I don't want okay let's see the error here we don't need any of these logic I'm just keeping one single label inside this library because that's what we need for numbering and then we're going to move this library that we have created to the bottom okay now the item for this Library what we need to show we need to show the numbers starting from one so we're going to just do a quick logic here and that logic is going to be sequence so here what what I'm going to say the total item there the total number of items in the gallery that that we already got divided by the page size let's say we have page size of 10 total I divided by 10 plus one and one okay so what this is going to do as you can see here it's going to give me the number starting this is the starting where we're going to start we're going to start with one and we going to divide by the base size okay and here I'm going to do the edit this item dot value okay and because it's already overwriting so I'm going to move this Gallery here make it bigger because we need to reduce the template size so that it can look better right and currently it's showing only three pages you know why because if I go to the app I made this 500 and I never run it again so I'm going to run on start and here you go you can see all the numbers are popping in here right now the next thing if you don't want this hor horizontal scroller what you can do you can do show navigation and on scrolling so now you can have a navigation here okay let's run it and you can see all the numbers that we have are listed here now let's do the logic on what should happen when you click on any of these individual numbers right so on select of any of the item in this Gallery right what we're going to do we're going to do a logic we are going to do the same thing we are setting up our object response that we used we are going to make a call to our power automate flow okay the first one we're going to pass the our base size the next one is we're going to pass the starting index and how we're going to calculate this we're going to say this item do value so if I'm clicking on two it's going to give me two and then I'm going to do minus one so this will give me one into variable P size so if I'm on three it's going to be 3 - 1 2 it's going to give me 20 okay and then we're going to close it dot response done done and we're going to assign this to our collection that's it I'm going to save it run now I'm going to click on the second item it bring me second let me click on the sixth one 11th one it's going to keep moving right perfect right so everything is working the page in is perfectly working as expected okay yeah so this is all for this video I hope this will help you so you can also create this kind of navigation in any of your existing app or you can create a new app thank you thank you for watching and thank you for subscribing to my channel

Channel: Deepak Shrivastava

Views: 2,619

Keywords: powerapps gallery pagination, pagination powerapps, powerapps pagination, powerapps pagination power apps, powerapps, microsoft power apps, power apps gallery pagination, microsoft powerapps tutorial, pagination in powerapps gallery, pagination in powerapps, how to add pagination in powerapps, gallery pagination powerapps, add pagination gallery, power apps, powerapps tutorial, powerapps tutorial step by step, return data to powerapps from flow, flow data to powerapps, tutorial

Id: EXrSU5moKMU

Length: 24min 38sec (1478 seconds)

Published: Wed Mar 20 2024