Skip to main content

Routing / Hash / Parameters

Use the browser's location hash for routing using URLs, with parameters.

from h2o_wave import main, app, Q, ui, on, handle_on
air_passengers_fields = ['Year', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']air_passengers_rows = [    ['1949', '112', '118', '132', '129', '121', '135'],    ['1950', '115', '126', '141', '135', '125', '149'],    ['1951', '145', '150', '178', '163', '172', '178'],    ['1952', '171', '180', '193', '181', '183', '218'],    ['1953', '196', '196', '236', '235', '229', '243'],    ['1954', '204', '188', '235', '227', '234', '264'],    ['1955', '242', '233', '267', '269', '270', '315'],    ['1956', '284', '277', '317', '313', '318', '374'],    ['1957', '315', '301', '356', '348', '355', '422'],    ['1958', '340', '318', '362', '348', '363', '435'],    ['1959', '360', '342', '406', '396', '420', '472'],    ['1960', '417', '391', '419', '461', '472', '535'],]

def make_markdown_row(values):    return f"| {' | '.join([str(x) for x in values])} |"

def make_markdown_table(fields, rows):    return '\n'.join([        make_markdown_row(fields),        make_markdown_row('---' * len(fields)),        '\n'.join([make_markdown_row(row) for row in rows]),    ])

def add_links_to_cells(rows):    return [[f'[{cell}](#row{i + 1}/col{j + 1})' for j, cell in enumerate(row)] for i, row in enumerate(rows)]

@on('#row{row:int}/col{col:int}')async def print_clicked_cell(q: Q, row: int, col: int):    q.page['message'].content = f'You clicked on row {row}, column {col}!'

@app('/demo')async def serve(q: Q):    if not q.client.initialized:        q.client.initialized = True        q.page['table'] = ui.form_card(            box='1 1 4 7',            items=[                ui.text_l('Airline Passenger Counts'),                ui.text(make_markdown_table(                    fields=air_passengers_fields,                    rows=add_links_to_cells(air_passengers_rows),                )),            ],        )        q.page['message'] = ui.markdown_card(            box='1 8 4 1',            title='',            content='Click on a cell in the table above!',        )
    await handle_on(q)
    await q.page.save()

Tags: โ€‚routing