Running function from lambda, but adding non-child element

[Normanras]

Question

I may be misunderstanding NiceGui, but here's the issue I'm facing. I have a few ui.buttons that on click, I'm passing the button info to the function and running it. In that function, I want it to show (or hide) something on the page. But when doing it this way, the new elements always appear as children of the buttons, when i would like them to be their own parent elements (or children of body). Is that possible?

Here's a really small example:

from nicegui import ui

with ui.grid():
   data = ui.button("Text", on_click=lambda: show_element(data))

def show_element(data):
    with ui.row():
        ui.input(label="Add Text")

ui.run()

I'd like to have that row and input not show up as a child of the previous grid, but be it's own parent element. I can confirm in inspecting that it shows up as a child as well. Is this possible or have I missed something fundamental about Nicegui?

Edit: cleaned up some syntax errors as I was just writing this out quickly. Thanks for the correct @python-and-fiction !

[Nfirminhac]

hi,
If you just want to hide/show objects, you may want to have a look at method set_visibility or bind_visibility

from nicegui import ui


# Example 1: Binding visibility to a dictionary (object is hidden by default as the initial value is False)
# --------------------------------------------------------------------------------------------

# Dictionnary  used to hold the value
ls_state = dict(row_visibility = False)

with ui.grid():
    data = ui.button(text = "Text example 1",
                     on_click = lambda: show_hide_element_example1(data)
                     )

with ui.row().bind_visibility(target_object = ls_state, target_name = 'row_visibility'):
    ui.input(label = "Add Text Example 1")


def show_hide_element_example1(data):
    print(data)
    ls_state["row_visibility"] = False if ls_state["row_visibility"] else True


# Example 2: changing visibility of the object
# --------------------------------------------------------------------------------------------
with ui.grid():
    data = ui.button(text = "Text example 2",
                     on_click = lambda: show_hide_element_example2(data)
                     )
with ui.row() as example2:
    ui.input(label = "Add Text - Example 2")

# hide the row
example2.set_visibility(False)


def show_hide_element_example2(data):
    print(data)

    example2.set_visibility(False if example2.visible else True)


ui.run()

Regards,
Nicolas

[Normanras]

Ahh super helpful!! Just did some quick testing using what you suggested in my app and it looks like it is in the right direction. I don't know if it is just the way my brain works, but I feel like I would have never found this in the docs. Appreciate the help, @Nfirminhac !

[python-and-fiction]

Your example has too many syntax errors, here is right:

from nicegui import ui

with ui.grid():
   data = ui.button("Text")

def show_element(data):
    with ui.row():
        ui.input(label="Add Text")

data.on_click(lambda: show_element(data))

ui.run()

[Normanras]

Thanks. I haven't tested out your comment yet, but what is the point of separating data.on_click instead of having it within the ui.button line?

[python-and-fiction]

In python, you should difine it then use it.
So, if you try to use a function in lambda, you need to add it in on_click after function definition.

[Normanras]

I'll remember that. Thank you!