bind_visibility_from unclear

[masterjg]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

with ui.link().bind_visibility_from(app.storage.user, "auth.uri") as link:
        binding.bind_to(app.storage.user, "auth.uri", link.props, "href")
        ui.button(
            "JOIN US",
            icon = "fa-brands fa-x-twitter",
            color = "blue-grey-7"
        )

Description

Hey guys, not really clear how to use bind_visibility_from. In my case I want link to be visible ONLY if auth.uri is set in user storage. This example code will always show link with button for some reason

NiceGUI Version

3.3.1

Python Version

3.13

Browser

Firefox

Operating System

Linux

Additional Context

No response

[falkoschindler]

Hi @masterjg,

The problem is that binding does not work if there is no "auth.uri" in app.storage.user. The update function cannot read this value and will ignore it (unless you use strict=True) and will not default to None.

I recommend binding visibility from link.props['href'] and using events for updating the target:

link = ui.link('Link')
link.bind_visibility_from(link.props, 'href')

app.storage.user.on_change(lambda: link.props.update(href=app.storage.user.get('auth.uri', '')))
app.on_connect(lambda: link.props.update(href=app.storage.user.get('auth.uri', '')))

ui.button('Remove URI', on_click=lambda: app.storage.user.pop('auth.uri', None))
ui.button('Google', on_click=lambda: app.storage.user.update({'auth.uri': 'https://www.google.com'}))
ui.button('YouTube', on_click=lambda: app.storage.user.update({'auth.uri': 'https://www.youtube.com'}))

Note that I added app.on_connect to initialize the link target. This might not be necessary in your case.

[masterjg]

in the end I've also hadto add backward as it looks like by default href is "#"

link.bind_visibility_from(link.props, "href", backward = lambda href: "" if href == "#" else href)