Can I auto refresh a page based on things done on another page?

[Anindya088]

Question

Hi All,

I am trying to think how to connect the workings of multiple pages. So imagine I have 2 pages, and based on some settings selected in pageA, pageB should have some things shown or hidden. (using a config file to save the changes, lets say)

So if I change the settings in pageA, and then refresh the browser tab for pageB it works. But is there a way to make this connected? Like the change in pageA settings will auto-trigger a refresh for the pageB?

Below is what I am trying to do:

@ui.page('/pageA')
def pageA():
    switch = ui.switch(on_change=lambda: button_switch())
    def button_switch():
        config_file = os.path.join(sys.prefix, 'app', 'settings.yaml')
        with open(config_file, 'w') as f:
            yaml.safe_dump({'switch': switch.value}, f)

@ui.page('/pageB')
def pageB():
    label = ui.label('')
    config_file = os.path.join(sys.prefix, 'app', 'settings.yaml')
    with open(config_file, 'r') as f:
        config = yaml.safe_load(f)
        switch_value = config['switch']
    if switch_value:
        label.text = 'PageA switch is on'
    else:
        label.text = 'PageA switch is off'

So my target is when I change the switch in pageA, automatically pageB refreshes and the text changes. Is there a way to do that? Please let me know if this is possible.

Thanks a lot,
Anindya

[rodja]

If you are not required to use yml to save your config you could do a combination of app.storage and binding:

@ui.page('/pageA')
def pageA():
    ui.switch(on_change=lambda e: app.storage.user.update({'switch': e.value}))


@ui.page('/pageB')
def pageB():
    def get_text(value: bool):
        return 'PageA switch is on' if value else 'PageA switch is off'

    ui.label(get_text(False)).bind_text_from(app.storage.user, 'switch', get_text)

[Anindya088]

Hi @rodja ,

Thanks so much, this is such a brilliant solution! I have few items in my actual page, but I think I can manage using the bind_text and bind_visibiliy options and link them with app.storage as you shown. This is great.

Thanks so much for the quick help,
Anindya

[Anindya088]

Hi @rodja , quick question on this, is there a way to bind to opposite of the boolean value generated from the switch?
I mean if the switch is on, then some items need to be hidden.
I am trying the storage method now like this test_note.bind_visibility_from(app.storage.general, 'test_mode')

How do I make it work for the opposite case? Do I need to save another dict value in the app.storage and use that?

Thanks,
Anindya

[rodja]

bind_visibility_from has an optional lambda function to transform the incoming value to anything you like.

[Anindya088]

Great, thanks so much 🙏🏼