NiceGUI webapp switching tabs /u/KungFuDugong101 Python Education

Hello, I’m trying to make a desktop webapp with NiceGUI. The basic idea is to search a name which will then query from a database and display a list of people with that name in a table. Each table has a button to select the person in that row and it will take the user to another page will display information about that person.

The problem I am running into right now is that I can successfully select a person from the table and the page will switch to display the PersonKey. However, once I hit the back button (in the browser),the table from the previous search does not persist. Additionally, the search function no longer will display a table after searching. I put in some print statements and it does seem to save and have access to the previous Table object, but the table just won’t display.

The code I have is as follows (minus personal info). Would someone be able to explain how to fix this? I would really appreciate it. Thank you!

from nicegui import ui, app import psycopg from psycopg import sql import random import pandas as pd conn = psycopg.connect("dbname=#### port=#### user=postgres host='localhost' password=####") cursor = conn.cursor() id_table = None id_table_df = None async def fetch_people(name): global id_table, id_table_df rows = # postgresql query by name id_table_df = pd.DataFrame(rows, columns=['Name', 'Age', 'PersonKey']) update_table() def update_table(): global id_table, id_table_df if id_table is None: id_table = ui.table.from_pandas(id_table_df) else: id_table.columns = [{'name': col, 'label': col, 'field': col} for col in id_table_df.columns] id_table.rows = id_table_df.to_dict('records') id_table.add_slot('body-cell-Name', """ <q-td :props="props"> <q-btn @click="() => $parent.$emit('person_selected', props.row)" :label="props.row.Name" flat dense color='primary'/> </q-td> """) id_table.update() id_table.on('person_selected', lambda msg: ui.navigate.to(f'/person/{msg.args["PersonKey"]}')) @ui.page('/person/{person_key}') async def graph_page(person_key: str): ui.label(person_key) @ui.page('/') async def main_page(): await ui.context.client.connected() search_input = ui.input(label='Enter name...', placeholder='Type a name...') search_input.on('keypress.enter', lambda e: fetch_people(search_input.value)) global id_table, id_table_df print(id_table) if id_table_df is not None: update_table() ui.run() 

Hello, I’m trying to make a desktop webapp with NiceGUI. The basic idea is to search a name which will then query from a database and display a list of people with that name in a table. Each table has a button to select the person in that row and it will take the user to another page will display information about that person.

The problem I am running into right now is that I can successfully select a person from the table and the page will switch to display the PersonKey. However, once I hit the back button (in the browser),the table from the previous search does not persist. Additionally, the search function no longer will display a table after searching. I put in some print statements and it does seem to save and have access to the previous Table object, but the table just won’t display.

The code I have is as follows (minus personal info). Would someone be able to explain how to fix this? I would really appreciate it. Thank you!

from nicegui import ui, app import psycopg from psycopg import sql import random import pandas as pd conn = psycopg.connect("dbname=#### port=#### user=postgres host='localhost' password=####") cursor = conn.cursor() id_table = None id_table_df = None async def fetch_people(name): global id_table, id_table_df rows = # postgresql query by name id_table_df = pd.DataFrame(rows, columns=['Name', 'Age', 'PersonKey']) update_table() def update_table(): global id_table, id_table_df if id_table is None: id_table = ui.table.from_pandas(id_table_df) else: id_table.columns = [{'name': col, 'label': col, 'field': col} for col in id_table_df.columns] id_table.rows = id_table_df.to_dict('records') id_table.add_slot('body-cell-Name', """ <q-td :props="props"> <q-btn @click="() => $parent.$emit('person_selected', props.row)" :label="props.row.Name" flat dense color='primary'/> </q-td> """) id_table.update() id_table.on('person_selected', lambda msg: ui.navigate.to(f'/person/{msg.args["PersonKey"]}')) @ui.page('/person/{person_key}') async def graph_page(person_key: str): ui.label(person_key) @ui.page('/') async def main_page(): await ui.context.client.connected() search_input = ui.input(label='Enter name...', placeholder='Type a name...') search_input.on('keypress.enter', lambda e: fetch_people(search_input.value)) global id_table, id_table_df print(id_table) if id_table_df is not None: update_table() ui.run()