Is there a way for the page’s code to control the sidebar’s visibility?
Use case 1: I want the sidebar to hide when the user has clicked one of its buttons. They can still bring it back via the “hamburger” button above it, but I don’t want it showing and distracting them from the task they selected.
Use case 2: When the user logs in, I want them to resume exactly where they left off. So if the sidebar was hidden when they quit, it should still be hidden when they next log in.
As things stand, the sidebar always starts out visible (when the browser window is wide enough). It’s the “always” part I’m trying to address.
1 Like
Yes, but it’s probably a bit of trial and error. Here’s a rough way …
You can call JS functions from within Anvil, so when a link is clicked you should be able to call
function toggleSidebar()
which is in the dashboard.html asset file. Use :
self.call_js("toggleSidebar")
There are plenty of examples on the forums for that function.
To save the status, I would add a new column to the Users table (for example “menu_visible”), and every time the toggle function is called I would also toggle this column’s value (True/False).
In the “Show” event of the main form I would read this table value and, knowing that the sidebar is visible to start with, call the toggleSidebar() function if your saved value is False.
That’s a very rough way to do it and it’s off the top of my head. Down side is the sidebar will slide away when first loaded if the table value for that user is False, rather than just not appear at all, but it’s a start 
Yeah, that’s a great start!
But now I find that the sidebar does NOT always start out as visible, e.g., when the browser window is very narrow. So an unconditional toggleSidebar() won’t work, either: it would make the sidebar appear when I want it to disappear!
I’d have to be able to find out whether the sidebar is showing, or not, first.
toggleSidebar() is great for the end-user, but for this use-case we really need explicit “hide” and “show” functions.
Ah, good point.
Need to create a new function that checks either the sidebar status (or screen width). I’m frazzled today - I’ll look at it with fresh eyes after some sleep.
You probably need to check the “left” property of the sidebar is negative (which would mean it was hidden), or something like that.
Forgive my ignorance. I tried self.call_js("showSidebar")
from ._anvil_designer import Form1Template
from anvil import *
class Form1(Form1Template):
def init(self, **properties):
# Set Form properties and Data Bindings.
self.init_components(**properties)
self.call_js(“showSidebar”)
and I got this error:
NameError: Could not find global JS function ‘showSidebar’. This form is not currently visible - to call functions defined in its HTML on load, use call_js in the form ‘show’ event handler. at [Form1, line 9](javascript:void(0))
I am trying to make the sidebar show on mobile devices when the app starts.
Thank you.
move the self.call_js into the form show event
You can’t call self.call_js until after the form is visible
3 Likes