cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
RosalindK
Frequent Visitor

Making navigation appear/disappear based on screen size, content, and on demand

Hi,

 

I'm currently using the responsive "sidebar" screen layout in my canvas app. On the left sidebar is a gallery that contains data that is stored in SharePoint.  The SharePoint list is set up in such a way that users only see their own entries.  So, when they go into the app for the first time, the gallery is empty.  This is one scenario where I'd like the app to load with the left sidebar hidden.  The other two conditions are as follows:

- Hide the left side bar when the user presses a button (so they can maximize screen real estate if they are working on a laptop)

- Hide the left side bar when the screen size is less than 3 (but allow the user to click a button to bring the side bar back when needed)

 

Any ideas as to how to accomplish this?  Thank you in advance for your help!

1 ACCEPTED SOLUTION

Accepted Solutions
StalinPonnusamy
Super User
Super User

Hi @RosalindK 

 

1. Set Onscreen visible property to

 

If(ScreenName.Size>3,UpdateContext({ctxSideBar:true}),UpdateContext({ctxSideBar:false}))

 

2. Icon Onselect Property to

 

UpdateContext({ctxSideBar:!ctxSideBar})

 

3. Set SideBarContainer Visible property to

 

ctxSideBar && CountRows(GalleryName.AllItems) > 1

 

 

View solution in original post

4 REPLIES 4
SharePointDev12
Helper I
Helper I

I suggest you create a custom component it meets your requirement well. Go through the below video from Reza Dorrani it helps you a lot.

 

SharePointDev12_0-1630128259626.png

 



https://youtu.be/dP74npyyvGc

RosalindK
Frequent Visitor

Thank you for the reference to that video by Reza Dorrani.  He's always a source of excellent tutorials.  However, that particular functionality demonstrated in the video only supports one of my requirements (on demand showing/hiding of a gallery).  I'm looking to combine this functionality with two others.  I would like the left sidebar to disappear if there is no content (that is, when someone is opening the app for the very first time).  I would also like it to disappear when the screen size is less than 4. However, with both of those options, I would like the user to be able to override this behaviour with a button.   I have that part working okay but when I try to implement the other two functionalities, it just doesn't work.   Below is the code used in the main screen OnVisible event and in the sidebar container visible property.   The button used to control the sidebar manually has the expected OnSelect content:  UpdateContext({ctxSideBar: !ctxSideBar})Main_OnVisible.pngSidebar_Visible.png

 

I've tried many variations above the above but to no avail.  Any suggestions would be welcome!  Thanks!

StalinPonnusamy
Super User
Super User

Hi @RosalindK 

 

1. Set Onscreen visible property to

 

If(ScreenName.Size>3,UpdateContext({ctxSideBar:true}),UpdateContext({ctxSideBar:false}))

 

2. Icon Onselect Property to

 

UpdateContext({ctxSideBar:!ctxSideBar})

 

3. Set SideBarContainer Visible property to

 

ctxSideBar && CountRows(GalleryName.AllItems) > 1

 

 

That did it! Thanks!  

Helpful resources

Announcements
Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Top Solution Authors
Top Kudoed Authors
Users online (4,758)