Thursday, August 19, 2021

How to Create Powerapps Gallery With Pagination

How to Create Powerapps Gallery With Pagination

1.     Add a Gallery (Gallery Name : galHidden)



2.     Set Visible Property for galHidden = false



3.     Create a New Dropdown by selecting Inputà Drop Down



4.     Items for Dropdown [5,10,15,20] (Note: Make Sure its Number]

5.     Add Four Icon Based on below snapshot



6.     On select of (Start of Record)  (ICON With round)

a.     Onselect = Set(varPageNumber,1)

b.     Display Mode = If(varPageNumber=1, Disabled,DisplayMode.Edit)

7.     On select of (icon Previous)(ICON without round)

a.     Onselect = Set(varPageNumber,varPageNumber-1)

b.     Display Mode = If(varPageNumber=1, Disabled,DisplayMode.Edit)

8.     On Select of (icon Next)(ICON without round)

a.     Onselect = Set(varPageNumber,varPageNumber+1)

b.     Display Mode= If(drpPaginationSize.Selected.Value*varPageNumber<=CountRows(galHidden.AllItems),Edit,Disabled)

9.     On Select of (icon End of Record)(ICON With round)

a.     OnSelect = Set(varPageNumber, RoundUp( CountRows(galHidden.AllItems) / drpPaginationSize.SelectedText.Value ,0) )

b.     Display Mode= If(drpPaginationSize.Selected.Value*varPageNumber<=CountRows(galHidden.AllItems),Edit,Disabled)

10.  On Page Load OnVisible

a.     OnVisible = Set(varPageNumber,1)



11.  Add Label between two icons



a.     Text = "Page "&varPageNumber&" of "&If(Mod(CountRows(galHidden.AllItems),100)=0,RoundUp(CountRows(galHidden.AllItems)/drpPaginationSize.SelectedText.Value,0)&"+ pages",RoundUp(CountRows(galHidden.AllItems)/drpPaginationSize.SelectedText.Value,0)&" page(s)")

12.  Add a new Gallery (Name : galMain)

a.     Items : If(icoNext.DisplayMode=Disabled,

LastN(FirstN(galHidden.AllItems,drpPaginationSize.Selected.Value*varPageNumber),drpPaginationSize.Selected.Value-(drpPaginationSize.Selected.Value*varPageNumber-CountRows(galHidden.AllItems))),LastN(FirstN(galHidden.AllItems,drpPaginationSize.Selected.Value*varPageNumber),drpPaginationSize.Selected.Value))


please find github link for sample msapp file

Further reference

No comments:

Post a Comment

Day 11 - Customizing Option Sets Dropdown Fields with JavaScript

  In this Blog, we will see how to Customizing Option Sets Dropdown Fields with JavaScript label1 = formContext.getAttribute( "bosch_op...