How to bind the ui.tab_panel's value to the app.storage.general

[weinibuliu]

Question

Hi everyone.

I was trying to bind the value of the ui.tab_panel to the app.storage.general in order to I can used it in other place.This is my code.

from nicegui import ui, app

STORAGE = app.storage.general

with ui.tabs().classes("w-full").props("no-caps") as tabs:
    adb = ui.tab("adb", "ADB")
    win32 = ui.tab("win32", "Win32")

with ui.tab_panels(tabs, value=adb).classes("w-full") as tab_panels:
    tab_panels.bind_value_to(STORAGE, "device", forward=lambda x: x) # the defalut value of forward is `lambda x: x`

ui.run()

I got an error.

Traceback (most recent call last):
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\background_tasks.py", line 52, in _handle_task_result 
    task.result()
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\client.py", line 305, in func_with_client
    await func
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\persistence\file_persistent_dict.py", line 50, in backup
    await f.write(json.dumps(self, indent=self.indent))
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\json\orjson_wrapper.py", line 40, in dumps
    return orjson.dumps(obj, option=opts, default=_orjson_converter).decode('utf-8')
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
TypeError: Type is not JSON serializable: Tab

The message of error told me the value of x is a Tab class,so I changed my code.

tab_panels.bind_value_to(STORAGE, "device", forward=lambda x: x._props["name"]) 
# By the way,why don't we provide a tab_panels.name interface?

But I got an error again.

Traceback (most recent call last):
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\events.py", line 436, in handle_event
    result = cast(Callable[[EventT], Any], handler)(arguments)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\elements\mixins\value_element.py", line 40, in handle_change
    self.set_value(self._event_args_to_value(e))
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\elements\mixins\value_element.py", line 108, in set_value
    self.value = value
    ^^^^^^^^^^
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\binding.py", line 183, in __set__
    _propagate(owner, self.name)
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\binding.py", line 103, in _propagate
    _set_attribute(target_obj, target_name, target_value)
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\binding.py", line 60, in _set_attribute
    setattr(obj, name, value)
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\binding.py", line 183, in __set__
    _propagate(owner, self.name)
  File "C:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\.venv\Lib\site-packages\nicegui\binding.py", line 101, in _propagate
    target_value = transform(source_value)
                   ^^^^^^^^^^^^^^^^^^^^^^^
  File "c:\Users\buliu\Desktop\Github\NiceGUI-For-Maa\test.py", line 10, in <lambda>
    tab_panels.bind_value_to(STORAGE, "device", forward=lambda x: x._props["name"])
                                                                  ^^^^^^^^
AttributeError: 'str' object has no attribute '_props'

The message of error told me the value of x is a str.
I am very confused.Is it something I did wrong?If i did,what is the correct way to bind the value of the ui.tab_panel to the app.storage.general ?

Thanks.

[falkoschindler]

Hi @weinibuliu,

Sorry for the confusion. You're not the first to experience trouble with binding tabs: #3592.

[weinibuliu]

I'm sorry I didn't see your mention of #3592 earlier.I fix my code according to this discussion.

from nicegui import ui, app

STORAGE = app.storage.general

with ui.tabs().classes("w-full").props("no-caps") as tabs:
    adb = ui.tab("adb", "ADB")
    win32 = ui.tab("win32", "Win32")

with ui.tab_panels(tabs, value="adb").classes("w-full") as tab_panels: # use the tab name instead of tab as value
    tab_panels.bind_value_to(STORAGE, "device", forward=lambda x: x)


ui.run()

Now,it works well.Thanks for your answer.