cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
skowalski
Level: Powered On

Custom Gallery Navigate Buttons

I have a small horizontal gallery as part of my UI which can have a variable number of items in it. When a large number of items are in this gallery, it exceeds the width of the gallery which is fine and as I expect.

I don't want to display the scroll bar as this is intended to be a small item, and horizontal scrolling can be awkward depending on device. Gallery Navigation would work, but the default navigation buttons cover portions of my templates I would prefer they did not.

tabs.png

 

My question is: Can I use OnSelect for an Icon outside the Gallery (or something similar) to replicate the functionality of the Gallery Navigate buttons? Is there another way to customize these buttons so they do not cover Gallery Items without setting enormous gallery template padding?

 

I'm aware of the Gallery.VisibleIndex value, but as far as I can tell, this is only a value I can read from the gallery. I can't set it to a variable, or change it through any means other than the built in Gallery Navigation buttons.

 

I would appreciate any insight you could provide! Thanks!

1 ACCEPTED SOLUTION

Accepted Solutions
skowalski
Level: Powered On

Re: Custom Gallery Navigate Buttons

Okay, I think I actually figured it out.

 

I set the Gallery.Default to:

 

Last(FirstN(Collection,Variable))

 

I added this line to Screen.OnVisible:

 

UpdateContext({Variable:1})

 

Then for my ButtonNext.OnSelect

 

UpdateContext({Variable:Min(Variable + 5,CountRows(Collection.AllItems))})

 

And ButtonBack.OnSelect.

 

UpdateContext({Variable:Max(1,Variable - 5)})

 

 

Obviously, replace "Collection" with the name of your collection and "Variable" with whatever you want to name the variable. You can change the "5" in the Next and Back to whatever number of items you want to scroll per click.

View solution in original post

6 REPLIES 6
Super User
Super User

Re: Custom Gallery Navigate Buttons

I use buttons and make them look like tabs and sometimes I change which shows off of different criteria or make certain ones disabled if the current user doesn't have access to that data. I just use the UpdateContext({showTab1:true}) and then when they click the button I make the button disabled (which changes the color) and the control what shows on my screen off that selection. 

 

Looks kinda like this if I have a gallery on the left and details on the right...or can do the whole length of screen.--

 

Capture.JPG

skowalski
Level: Powered On

Re: Custom Gallery Navigate Buttons

@rebeccas, thanks for your response, but you may be misunderstanding what I'm trying to do.

 

In my case, my "tabs" are records in a collection that I am displaying with a gallery. Users can add any number of records to this collection. At any time they can click the "x" to remove that record from the collection, and they will select each of these "tabs" to bring up details related to that person in various contexts. It's not really feasible to create each possible "tab" as a button or any other static element.

 

My setup allows users to add any number of items, and to quickly swap between them to make comparisons or check progress. So when the number of tabs exceeds the available space, the user needs to be able to easily scroll through the tabs they've added.

 

In theory the Gallery Navigation buttons fulfill my need. I just don't like how they cover the "tabs". I essentially want to move the gallery navigation buttons outside the edges of my gallery so they cannot cover any "tabs".

Super User
Super User

Re: Custom Gallery Navigate Buttons

Have you tried turning off the scroll bars for the gallery and adding a higher wrapcount? 

 

I don't use that WrapCount often but I have had a few that I used it for to make my information layout better.

skowalski
Level: Powered On

Re: Custom Gallery Navigate Buttons

@rebeccas I've already turned off the scrollbar. I want this element to take up as little vertical space as possible, so I'm not interested in using wrap count.

Super User
Super User

Re: Custom Gallery Navigate Buttons

Okay...that is the only other thing I can think of. Best of luck!

skowalski
Level: Powered On

Re: Custom Gallery Navigate Buttons

Okay, I think I actually figured it out.

 

I set the Gallery.Default to:

 

Last(FirstN(Collection,Variable))

 

I added this line to Screen.OnVisible:

 

UpdateContext({Variable:1})

 

Then for my ButtonNext.OnSelect

 

UpdateContext({Variable:Min(Variable + 5,CountRows(Collection.AllItems))})

 

And ButtonBack.OnSelect.

 

UpdateContext({Variable:Max(1,Variable - 5)})

 

 

Obviously, replace "Collection" with the name of your collection and "Variable" with whatever you want to name the variable. You can change the "5" in the Next and Back to whatever number of items you want to scroll per click.

View solution in original post

Helpful resources

Announcements
thirdimage

Power Apps Super User Class of 2020

Check it out!

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

SecondImage

Difinity Conference

The largest Power BI, Power Platform, and Data conference in New Zealand

Top Solution Authors
Top Kudoed Authors (Last 30 Days)
Users online (4,542)