cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
akbarmahfuzalam
Post Prodigy
Post Prodigy

Expand/Collapse Gallery from right to left

I have a gallery (GalUpdates) and want to expand and collapse with a click of a button. And it should be expand in the Right to Left direction and Collapse left to right when button clicked.

How would I achieve that, help is appreciated

4 REPLIES 4
phipps0218
Super User
Super User

Hi @akbarmahfuzalam , you will find an example in the PowerApps Creator Kit:

phipps0218_0-1658126873544.png


Essentially make the rest of the page transparent and act like you have a pane window is what you are trying to achieve? Like the above picture? If so please have a look at the Creator Kit.

Please Accept as Solution if it solves your question. Or just give it a Thumbs Up if it is helpful as can help others.

LinkedIn: https://www.linkedin.com/in/charlie-phipps-%F0%9F%91%A8%E2%80%8D%F0%9F%92%BB-91338715b/
YouTube: https://www.youtube.com/channel/UChmFBGU1YKIU91sNMQ7buGg
Twitter: https://twitter.com/phipps0218

@phipps0218 

Thanks for your prompt reply, but unfortunately this is not what I wanted.

I want to click a button, And then the Galley need to start expanding from Right to Left and again when button click, it need to collapse from left to right.  

Hi @akbarmahfuzalam ,

 

Nice thought, and I managed to create a demo for your reference:

Expand-Collapse.gif

Is above what you need?

 

If so, steps are as follows:

1. Add a Vertical Container, cut your Gallery and paste into the Container.

2. Add one Button, 2 Timer controls.

3. OnVisible of the Screen:

 

UpdateContext({'E/C':true,TimerStart1:false, TimerStart2:false})

 

4. Duration of the two Timers set to 1000 or how long/quick will you like the Gallery being expanded/collapsed.

5. OnTimerStart of Timer1 to as below and vise versa.

 

Reset(Timer2)

 

6. Start of Timer1 to TimerStart1Timer2 to TimerStart2

7. Width of Container:

 

If(!TimerStart1 && !TimerStart2, 650, If('E/C', 650*(Timer3.Value/Timer3.Duration), 650*((1000-Timer1.Value)/Timer1.Duration) ))

650 is the default width of the Container, change to what you want.

 

8. OnSelect of Button:

 

UpdateContext({'E/C':!'E/C', TimerStart1: If('E/C', true, false), TimerStart2: If('E/C', false, true)})

 

9. After everything tested fine, set Visible of the two Timers to false to hide them.

 

Best regards,

Community Support Team _ Jeffer Ni

If this post helps, then please consider Accept it as the solution to help the other members find it.

@v-jefferni 

Will definitely give a try as per your solution.

Thanks a ton 

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Top Solution Authors
Top Kudoed Authors
Users online (1,498)