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.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Power Apps Ideas

Check out the New Ideas Site

We are excited to announce a new way to share your ideas for Power Apps!

Top Solution Authors
Top Kudoed Authors
Users online (3,943)