cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
JosephOS
Level: Power Up

Multiple Buttons in Carousel

Hi all, we are creating an app for a university project (we are somewhat new to powerapps), we need a carousel where users can select a movie in a list, we have successfully created the carousel with images etc., however we are unsure how to have each of the items direct to a different page in the app, we have only been able to set navigation to one page for all the buttons within the carousel so far.

Any help would be much appreciated

1 ACCEPTED SOLUTION

Accepted Solutions
Community Support Team
Community Support Team

Re: Multiple Buttons in Carousel

Hi @JosephOS ,

How do you achieve your carousel within your app? Using Image control directly or using Gallery control consists of Images?

 

Based on the needs that you mentioned, I think the combination of Gallery control and Timer control could achieve your needs. You could consider set up a Excel table to store the image data and the screen info (Screen1, Screen2, Screen3, ...) the corresponding image needs to navigate to. The Excel table structure may look as below:

2.JPG

The App's configuration should as below:

3.JPG

 

4.JPG

Set the OnStart property of App to following:

Set(CurrentIndex, 1)

 

Add a Horizontal Layout Gallery in your app, set the Items property to above Excel Table data source. Set the Image property of Image control within the Gallery to following:

ThisItem.Image

Set the OnSelect property of the Gallery to following:

If(
   ThisItem.TargetScreen = "Screen1",
   Navigate(Screen1),
   ThisItem.TargetScreen = "Screen2",
   Navigate(Screen2),
   ThisItem.TargetScreen = "Screen3",
   Navigate(Screen3),
   ...
)

Set the Default property of the Gallery to following:

LookUp('Excel Table', Id = CurrentIndex)  // Id is recognized as Number type value in your app

or

LookUp(FlooringEstimates, Id =Text(CurrentIndex))  // Id is recognized as Text type column in your app

 

Add a Timer control, set the Duration property to following:

2000

set the Repeat property and AutoStart property to following:

true

set the OnTimerEnd property to following:

Set(CurrentIndex, CurrentIndex + 1);
If(
    CurrentIndex > CountRows(FlooringEstimates),
    Set(CurrentIndex, 1)
)

Set the Visible property of the Timer property to following:

false  // Hide the Timer control

Please check the following GIF screenshot for more details:

Test.gif

Please also check and see if the following thread would help in your scenario:

https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-add-an-image-carousel/td-p/236172

Best regards,

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.

View solution in original post

4 REPLIES 4
dynamicsedge
Level 8

Re: Multiple Buttons in Carousel

@JosephOS 

 

First to clarify are you inquiring about PowerApps Canvas App?

 

If so:

 

 

If the Button is in a Gallery you can have the Button OnSelect contain a Formula that takes an element from ThisItem and uses it as a basis to decide what screen to navigate to. You may need a Collection to map values of ThisItem to values of what Screen to Navigate to, and your actual solution may be depending on your specific requirement regarding the "different page" (known as a Screen in PowerApps Canvas App) of the app.

Highlighted
PavanKumar
Level 8

Re: Multiple Buttons in Carousel

Hi Joseph, Could you please elaborate on how you implemented Carosel, that helps me to solutionize. Regards, Pavan Kumar Garlapati

Re: Multiple Buttons in Carousel

I would use a variable in this situation.

 

Set the OnSelect in the item to set the variable to the value of the corresponding screen.

 

Set(varScreen, ScreenName)

 

Set your button on select to navigate to the screen contained in the variable.

Navigate(varScreen)

Community Support Team
Community Support Team

Re: Multiple Buttons in Carousel

Hi @JosephOS ,

How do you achieve your carousel within your app? Using Image control directly or using Gallery control consists of Images?

 

Based on the needs that you mentioned, I think the combination of Gallery control and Timer control could achieve your needs. You could consider set up a Excel table to store the image data and the screen info (Screen1, Screen2, Screen3, ...) the corresponding image needs to navigate to. The Excel table structure may look as below:

2.JPG

The App's configuration should as below:

3.JPG

 

4.JPG

Set the OnStart property of App to following:

Set(CurrentIndex, 1)

 

Add a Horizontal Layout Gallery in your app, set the Items property to above Excel Table data source. Set the Image property of Image control within the Gallery to following:

ThisItem.Image

Set the OnSelect property of the Gallery to following:

If(
   ThisItem.TargetScreen = "Screen1",
   Navigate(Screen1),
   ThisItem.TargetScreen = "Screen2",
   Navigate(Screen2),
   ThisItem.TargetScreen = "Screen3",
   Navigate(Screen3),
   ...
)

Set the Default property of the Gallery to following:

LookUp('Excel Table', Id = CurrentIndex)  // Id is recognized as Number type value in your app

or

LookUp(FlooringEstimates, Id =Text(CurrentIndex))  // Id is recognized as Text type column in your app

 

Add a Timer control, set the Duration property to following:

2000

set the Repeat property and AutoStart property to following:

true

set the OnTimerEnd property to following:

Set(CurrentIndex, CurrentIndex + 1);
If(
    CurrentIndex > CountRows(FlooringEstimates),
    Set(CurrentIndex, 1)
)

Set the Visible property of the Timer property to following:

false  // Hide the Timer control

Please check the following GIF screenshot for more details:

Test.gif

Please also check and see if the following thread would help in your scenario:

https://powerusers.microsoft.com/t5/Building-Power-Apps/How-to-add-an-image-carousel/td-p/236172

Best regards,

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.

View solution in original post

Helpful resources

Announcements
thirdimage

Power Platform 24

Check it out!

thirdimage

New Badges

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

Top Solution Authors
Top Kudoed Authors
Users online (5,567)