Custom Gallery Navigate Buttons

[Anonymous]

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.

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!

[rebeccas]

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.--

[Anonymous]

@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".

[rebeccas]

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.

[Anonymous]

@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.

[rebeccas]

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

[Anonymous · Accepted solution]

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.

[LearnDevil]

Thanks, I owe you an hour of my life.

[DataWhisperer]

@Anonymous thanks for sharing your find, I was in search of something similar. I am thinking that we may also be able to use your formulas/variables in the Visible property of the buttons so that they appear and disappear only when needed. I wouldn't want to have the back button showing all the time if there's no need. Did you do that? and if so, how did you go about it? 

[Prakash05]

Hi, how to work on this  onselect of the image in Gallery.