link navbar

[rmfjd78]

Hi
I'm starting to use H2O Wave to develop a web app do analyse information. I've builded a simple home page with tree zones (header, body, footer), and in the header zone i have two nav groups. My question is when i select one of the options on the menu how do i replace the content zone?

This is the code of my app
`import os
from h2o_wave import Q, app, ui, main

sample_markdown = '''
xxxxx- Dataknoeldge Application

Esta aplicação serve de apoio á análise dados'''

example_dir = os.path.dirname(os.path.realpath(file))
_app_host = '127.0.0.1'
_app_port = '10102'

async def showpage(q: Q):
q.page['meta'] = ui.meta_card(box='', layouts=[
ui.layout(
breakpoint='m',
zones=[
ui.zone('header', size='80px'),
ui.zone('body', direction=ui.ZoneDirection.ROW, zones=[
ui.zone('content'),
], size='700px'),
ui.zone('footer', size='80px'),
]
)
])

q.page['header'] = ui.header_card(
	# Place card in the header zone, regardless of viewport size.
	box='header',
	title='UTopIA 2.0 - Dataknowledge',
	subtitle='Ferramenta de análise de dados',
	nav=[
		ui.nav_group('Menu', items=[
			ui.nav_item(name='#menu/Home', label='Página Inicial'),
			ui.nav_item(name='#menu/Importacao', label='Importação ficheiro'),
		]),
		ui.nav_group('Help', items=[
			ui.nav_item(name='#about', label='About', icon='Info'),
			ui.nav_item(name='#support', label='Support', icon='Help'),
		])
	],
)

q.page['Home'] = ui.markdown_card(
	box=ui.boxes('content', 'sidebar', 'sidebar'),
	title='',
	content=sample_markdown,
)

q.page['footer'] = ui.footer_card(box='footer', caption='(c) 2021 xxxxx. All rights reserved.')

await q.page.save()

@app('/Dataknowledge')
async def serve(q: Q):
if not q.client.initialized:
q.client.initialized = True
await showpage(q)

route = q.args['#']
if not route:
	route = 'Home'

print('----------------------------------------')
print(' Welcome to DataKnowledge')
print('')
print(' Go to http://localhost:10101/Dataknowledge')
print('----------------------------------------')
`

[lo5]

Instead of replacing the zone, replace the cards in the zone.

In your case, you can del q.page['Home'] and then do:

q.page['some_other_content`] = ui.markdown_card(
	box=ui.boxes('content', 'sidebar', 'sidebar'),
	title='',
	content=some_other_markdown,
)

The idea is to keep the zones (the layout of the page) fixed, and add/remove cards to the various zones.

[rmfjd78]

When i click on my Home option it changes the Browser to the following link "http://localhost:10101/Dataknowledge#menu/Home"

i've declared the following route and it's not working:
@app('/Home')
async def serve(q: Q):
hash = q.args['#']
if hash:
if hash == 'menu/Home':
del q.page['Home']

		q.page['Home'] = ui.markdown_card(
			box=ui.boxes('content', 'sidebar', 'sidebar'),
			title='',
			content='TESTE',
		)
await q.page.save()

[lo5]

You changed the root url to /Home (using @app('/Home')). The app will be now be accessible at http://localhost:10101/Home. You probably want to leave that unchanged (@app('/Dataknowledge')).

[rmfjd78]

I've seen what i'm doing wrong thanks for the help

[rmfjd78]

can i replace a markdown_card by a form_card? because i'm doing that and it's not working

del q.page['Home']

		q.page['Home'] = ui.form_card(
			box='1 1 4 10'
			, items=[ui.text(f'file_upload={q.args.file_upload}'),
					 ui.button(name='show_upload', label='Back', primary=True),
		])

[rmfjd78]

forget it the box created should be in the zone named content, in the upload option can i specify the folder to upload it?