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

Next & Back buttons to move through Gallery Records

Hi

I can't find a solution for this. I want a gallery that shows large pictures (1 at a time) and I would like the ability to add a Next button to move to the next gallery record (then this record is selected). Can anyone please explain how to do that?

 

Please let me know if you need more explanation. 

1 ACCEPTED SOLUTION

Accepted Solutions
Community Support Team
Community Support Team

Re: Next & Back buttons to move through Gallery Records

Hi @HallieG,

Could you please share a bit more about your large pictures data source?

I have made a test on my side, I think the Blank horizontal Gallery and a Image control (add a Image control within the Gallery control) could achieve your needs. Please take a try with the following workaround:
I have created a SP library on my side, which consists of many images files. The data structure as below:11.JPGApp's configuration:

8.JPG

 

9.JPG

 

10.JPG

Set the OnVisible property of the first screen of your app to following:

Set(StepIndex,1);ClearCollect(CurrentImage,First(MyLibrary1))

Set the Items property of the Gallery control to following:

CurrentImage

Set the Image property of the Image control within the Gallery to following:

ThisItem.'Link to item'

Set the OnSelect property of the "Prev" button to following:

Set(StepIndex,StepIndex-1);
ClearCollect(CurrentImage,Last(FirstN(MyLibrary1,StepIndex)))

Set the OnSelect property of the "Next" button to following:

Set(StepIndex,StepIndex+1);
ClearCollect(CurrentImage,Last(FirstN(MyLibrary1,StepIndex)))

The GIF screenshot as below:Test1.gif

 

 

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
4 REPLIES 4
OneThing
Level 8

Re: Next & Back buttons to move through Gallery Records

Hi @HallieG

 

The new Screen templates has a Tutorial Screen which contains most of the code you need to achieve this.Capture2.PNG

The long and the short of it is you need a variable to hold the index(number) of the current image. Arrow buttons which will increase or decrease the index, and the gallery using this index to decide which image to show.

 

If you need more help than this just let me know, but I think you learn more by playing around first.

 

Thanks,

Nicky

Super User
Super User

Re: Next & Back buttons to move through Gallery Records

Hi @HallieG,

To accomplish your goal you would use two built in gallery properties. Show Navigation and Navigation step.  Click on the gallery and in the dropdown on the left upper select the Show Navigation property and set it to true.  Then select the Navigation Step property and set it to 1.  ^ marks will appear on the top and bottom of the gallery. Clicking on them will advance the gallery by 1 step.  If this answers your question please mark the thread as solved.

 

*After reviewing @OneThing's suggestion, it is far better than this one.  
Capture.PNG

 

Community Support Team
Community Support Team

Re: Next & Back buttons to move through Gallery Records

Hi @HallieG,

Could you please share a bit more about your large pictures data source?

I have made a test on my side, I think the Blank horizontal Gallery and a Image control (add a Image control within the Gallery control) could achieve your needs. Please take a try with the following workaround:
I have created a SP library on my side, which consists of many images files. The data structure as below:11.JPGApp's configuration:

8.JPG

 

9.JPG

 

10.JPG

Set the OnVisible property of the first screen of your app to following:

Set(StepIndex,1);ClearCollect(CurrentImage,First(MyLibrary1))

Set the Items property of the Gallery control to following:

CurrentImage

Set the Image property of the Image control within the Gallery to following:

ThisItem.'Link to item'

Set the OnSelect property of the "Prev" button to following:

Set(StepIndex,StepIndex-1);
ClearCollect(CurrentImage,Last(FirstN(MyLibrary1,StepIndex)))

Set the OnSelect property of the "Next" button to following:

Set(StepIndex,StepIndex+1);
ClearCollect(CurrentImage,Last(FirstN(MyLibrary1,StepIndex)))

The GIF screenshot as below:Test1.gif

 

 

Best regards,

Kris

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
HallieG
Level: Powered On

Re: Next & Back buttons to move through Gallery Records

Thank you, that solution worked perfectly!!