wave
wave copied to clipboard
Published
20 hours ago •
h2oai
h2oai
Dropdown value clearing
Wave SDK Version, OS
0.21.1
Actual behavior
I have two dropdowns and I need to clear the selected value of the second dropdown when the value of the first dropdown changes.
This works fine with form by setting the second dropdown value as None.
from h2o_wave import app, main, Q, ui
@app("/")
async def serve(q: Q) -> None:
if q.args.dropdown1:
if q.args.dropdown1 != q.client.dropdown1:
q.client.dropdown1_changed = True
else:
q.client.dropdown1_changed = False
q.client.dropdown1 = q.args.dropdown1
if q.args.dropdown2:
if q.client.dropdown1_changed:
q.client.dropdown2 = None
else:
q.client.dropdown2 = q.args.dropdown2
q.page["example"] = ui.form_card(
box="1 1 2 2",
items=[
ui.dropdown(
name="dropdown1",
label="Dropdown1",
value=q.client.dropdown1,
trigger=True,
choices=[
ui.choice(name="1", label="Choice 1"),
ui.choice(name="2", label="Choice 2"),
ui.choice(name="3", label="Choice 3"),
],
),
ui.dropdown(
name="dropdown2",
label="Dropdown2",
value=q.client.dropdown2,
trigger=True,
choices=[
ui.choice(name="a", label="Choice a"),
ui.choice(name="b", label="Choice b"),
ui.choice(name="c", label="Choice c"),
],
),
],
)
await q.page.save()
https://user-images.githubusercontent.com/29954570/183110581-37e9c894-6e90-415c-9391-51fdd2db78c3.mov
When the dropdowns are in a side panel, you need to set the value of the second dropdown as a value except None.
Scenario 1: Value as None - Not working.
from h2o_wave import app, main, Q, ui
@app("/")
async def serve(q: Q) -> None:
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
ui.button(name='show_side_panel', label='Open side panel', primary=True)
])
q.client.initialized = True
else:
if q.args.show_side_panel:
show_side_panel(q)
if q.args.dropdown1:
if q.args.dropdown1 != q.client.dropdown1:
q.client.dropdown2 = None
q.client.dropdown1 = q.args.dropdown1
show_side_panel(q)
if q.args.dropdown2:
q.client.dropdown2 = q.args.dropdown2
show_side_panel(q)
if q.args.cancel:
q.page['meta'].side_panel = None
q.client.dropdown1 = None
q.client.dropdown2 = None
await q.page.save()
def show_side_panel(q):
q.page["meta"].side_panel = ui.side_panel(
title="Side Panel",
items=[
ui.dropdown(
name="dropdown1",
label="Dropdown1",
value=q.client.dropdown1,
trigger=True,
choices=[
ui.choice(name="1", label="Choice 1"),
ui.choice(name="2", label="Choice 2"),
ui.choice(name="3", label="Choice 3"),
],
),
ui.dropdown(
name="dropdown2",
label="Dropdown2",
value=q.client.dropdown2,
trigger=True,
choices=[
ui.choice(name="a", label="Choice a"),
ui.choice(name="b", label="Choice b"),
ui.choice(name="c", label="Choice c"),
],
),
ui.button(name='cancel', label='Cancel')
],
events=["dismissed"],
closable=True,
)
https://user-images.githubusercontent.com/29954570/183111407-bde3cb22-b764-495d-91f4-e2fb001288b4.mov
Scenario 2: Value as an empty string - working.
from h2o_wave import app, main, Q, ui
@app("/")
async def serve(q: Q) -> None:
if not q.client.initialized:
q.page['meta'] = ui.meta_card(box='')
q.page['example'] = ui.form_card(box='1 1 2 1', items=[
ui.button(name='show_side_panel', label='Open side panel', primary=True)
])
q.client.initialized = True
else:
if q.args.show_side_panel:
show_side_panel(q)
if q.args.dropdown1:
if q.args.dropdown1 != q.client.dropdown1:
q.client.dropdown2 = ""
q.client.dropdown1 = q.args.dropdown1
show_side_panel(q)
if q.args.dropdown2:
q.client.dropdown2 = q.args.dropdown2
show_side_panel(q)
if q.args.cancel:
q.page['meta'].side_panel = None
q.client.dropdown1 = None
q.client.dropdown2 = None
await q.page.save()
def show_side_panel(q):
q.page["meta"].side_panel = ui.side_panel(
title="Side Panel",
items=[
ui.dropdown(
name="dropdown1",
label="Dropdown1",
value=q.client.dropdown1,
trigger=True,
choices=[
ui.choice(name="1", label="Choice 1"),
ui.choice(name="2", label="Choice 2"),
ui.choice(name="3", label="Choice 3"),
],
),
ui.dropdown(
name="dropdown2",
label="Dropdown2",
value=q.client.dropdown2,
trigger=True,
choices=[
ui.choice(name="a", label="Choice a"),
ui.choice(name="b", label="Choice b"),
ui.choice(name="c", label="Choice c"),
],
),
ui.button(name='cancel', label='Cancel')
],
events=["dismissed"],
closable=True,
)
https://user-images.githubusercontent.com/29954570/183111658-97f40304-f07e-4fd1-85d2-bd9cfed24ace.mov
Expected behavior
Expect to clear the value of a dropdown in a side panel, when it is set as None.
