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

Left Navigation Component

Hello everyone,

I am using the left navigation component that is created by the best @RezaDorrani  you can get it from here:

https://github.com/rdorrani/PowerApps/tree/master/Components/Left%20Navigation

This component has the hamburger icon that will expand/collapse the navigation upon selection by using the below variable:

Set(varOpenMenu,!varOpenMenu);

And it has an output property MenuWidth that will increase the width of the navigation whenever the above variable is true.

My question is how can I know that the Navigation Component is expanded in the app screen?

Based on the below screenshot what I am trying to do is whenever the component is expanded I want to shrink and decrease the size of the Data cards to make them look better.

Capture.PNG
In the above screenshot, you see that the cards are moved to the right outside the screen.

What will be the solution to shrink the cards whenever the left nav component is expanded?

Any help will be highly appreciated.

Thank you!

 

8 REPLIES 8
CNT
Community Champion
Community Champion

@Julien2 Use the horizontal container and place the Left Nav on the Left and your Edit Form on the right side of the Container. Adjust the Container properties to suite your taste. These containers are Responsive by design and re-arrange very well.

CNT_0-1622495537463.png

 

Hello @CNT ,

Thanks for your reply and for mentioning the containers.

I followed what you mentioned by placing the left Nav on the left inside a horizontal container.

The EditForm is outside the container and on the right side but it's not getting shrink whenever the Left nav is expanded.

What would be the condition to decrease the size of the cards whenever the width of the nav is increased?

The condition should be set on the width of the form or the width of the cards?
Capture.PNG

On the cards I am using the below cond:

Switch(Screen1.Size, 1,Parent.Width/App.ActiveScreen.Size, 4, 1300)
On the form:
Parent.Width

Looking forward to your response,
Regards,
Julien

Ethan_R
Responsive Resident
Responsive Resident

Hi @Julien2 ,

@CNT  meant to say that you have to place the remaining controls inside the container apart from Left Nav Component.

What happens is you have to adjust the width of container as Parent.Width - LeftNavComp.Width  this will adjust all controls residing inside container.

Hope this helps.

CNT
Community Champion
Community Champion

@Julien2 Put the Edit Form in the right side (inside) of the container.

Hello @CNT @Ethan_R ,

I placed the EditForm within the Container and I changed the width of the container to be Parent.Width.

The form width inside the container Parent.Width - LeftNavigation_4.MenuWidth.

And the Width of the cards within the form is Switch(Screen2.Size, 1,Parent.Width/App.ActiveScreen.Size, 4, 1300)

But when the Left nav is collapsed the form is showing one column, knowing that when the form is on the extra-large screen I need to show 2 columns.

In addition, in the mobile, some of the cards are outside the screen after changing their width.

Please have a look at what's happening:
Animation.gif

What I am doing wrong with the form?

Looking forward to your response,

Thanks!

CNT
Community Champion
Community Champion

@Julien2 I did some tests and want to share a few things,

1. Make this change in the settings,

CNT_0-1622554107765.png

 

2. Rather than inserting a Horizontal container into an existing screen, start with the pre-built screen (you can later remove the bits you don't need).

CNT_1-1622554273127.png

 

3. Insert a Gallery in the left portion and an EditForm in the right portion and wire them together (below is my example),

CNT_2-1622554488349.png

4. Set the Fill Portions property for the Form to 2. I left all the other settings as default.

 

CNT_3-1622554558368.png

 

5. Now you'll see the Form being responsive as seen below.

CNT_4-1622555497790.png

 

CNT_5-1622555559220.png

 

Also there is a cool video from Reza, https://www.youtube.com/watch?v=bND8yN4jng0

 

Hope this helps!

 

 

 

 

Hello @CNT,

Thanks for your reply and for providing a detailed example.

1. For settings changes I already have the same as yours.

2. The app I am working on is created using the mobile layout and not the tablet so I don't have those pre-built screen options.
Capture1.PNG

I believe that there is something unexpected happening with the width calculation of the data cards inside the container. Knowing that I changed their Width properties to be Screen.Width/Screen.Size and not the parent (EditForm).

In addition, some data cards cards are moving outside the screen knowing that I am using the right formula.
Capture2.PNGCapture3.PNG

What do you think the problem is?

Best regards,
Julien

CNT
Community Champion
Community Champion

@Julien2 To be honest, I'm yet to master these responsive containers as they haven't been around for so long. I haven't tried it in mobile at all.

It is more of playing around with the settings and its not easy as they are at different levels (Screen, Container, Form, DatacCards etc.,).

To get used to it, I would suggest you to start a Fresh App, with a Fresh Container, Form etc., and see if it works and start tweaking it from inside out.

Hope you'll get it done soon!

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (1,173)