Page Layout: how to add additional ui.footer content

[JS-Aibel]

How do I add additional labels in the footer of a layout page?

1. In the footer below, I have added a global variable rowData = ui.row().
2. Running the code with rowData: ui.label("This is working") inside the page_layout() method, is woring as expected.
3. Running the same code (2) outside the page_layout() produces the following error: NameError: name 'rowData' is not defined variable

from nicegui import ui

@ui.page('/')
async def page_layout():
    ui.label('CONTENT')
    with ui.header():
        ui.label('HEADER')
    with ui.left_drawer(top_corner=True, bottom_corner=True):
        ui.label('LEFT DRAWER')
    with ui.right_drawer(fixed=False):
        ui.label('RIGHT DRAWER')
    with ui.footer():
        ui.label('FOOTER')
        global rowData
        rowData = ui.row()

    with rowData:
        ui.label("This is working")


with rowData:
    ui.label("This is not working")


ui.run()

5. If I place the call on the rowData in a method where I yield, I do not get the error message, but the new label is not displayed in the footer.

def testing():
    with rowData:
        yield
        ui.label("This is not working")

testing()

ui.run()

[falkoschindler]

When should ui.label("This is not working") be added? rowData is only defined and initialized when a client accesses the page and page_layout() is evaluated for the first time. Before that rowData is undefined.

Triggering the new label from, e.g., a button on another site is working:

@ui.page('/other_page')
def other_page():
    def add():
        with rowData:
            ui.label('This is not working')
    ui.button('add another label', on_click=add)

[JS-Aibel]

Thank you for the reply. I got my example to work with a button on the same page. My problem also occurring when a method from another python file is calling on rowData. Error message: AttributeError: module 'test' has no attribute 'rowData'

test.py

global rowData

from nicegui import ui
import testB

@ui.page('/')
async def page_layout():
    ui.label('CONTENT')
    with ui.header():
        ui.label('HEADER')
    with ui.left_drawer(top_corner=True, bottom_corner=True):
        ui.label('LEFT DRAWER')
    with ui.right_drawer(fixed=False):
        ui.label('RIGHT DRAWER')
        ui.button('add another label', on_click=testB.add)
    with ui.footer():
        ui.label('FOOTER')
        global rowData
        rowData = ui.row()

    with rowData:
        ui.label("This is working")

testB.py

from nicegui import ui
import test

def add():
    with test.rowData:
        ui.label('This is not working')

[JS-Aibel]

Hi again,
I got it to work by placing the footer before the button declaration, and then pass rowData in as an argument to the method in the testB file.

It would be interesting to hear your solution for solving it by using modules as the example above shows.

Working solution by rearranging the footer and passing rowData as argument:
test.py

from nicegui import ui
import testB

@ui.page('/')
async def page_layout():
    
    ui.label('CONTENT')
    with ui.footer():
        ui.label('FOOTER')
        global rowData
        rowData = ui.row()
    with ui.header():
        ui.label('HEADER')
    with ui.left_drawer(top_corner=True, bottom_corner=True):
        ui.label('LEFT DRAWER')
    with ui.right_drawer(fixed=False):
        ui.label('RIGHT DRAWER')
        ui.button('add another label', on_click=lambda: testB.add(rowData))

testB.py

from nicegui import ui

def add(rowData):
    with rowData:
        ui.label('This is now working')

[falkoschindler]

Passing the container to testB.add is certainly a reasonable idea. You could also define something like

def addRowData():
    with rowData:
        testB.add()

in test.py and call it from the button like ui.button('add another label', on_click=addRowData). It depends on your architecture: Should testB.add need to know that it acts within a container? Or should test.py deal with all the layouting and testB only provides content. The latter more agnostic approach is probably the one I'd prefer.

Your previous example also doesn't work because of cyclic imports: test.py needs testB.py to call add; and testB.py needs test.py to access rowData. It's important to clarify who depends on whom. This is better in your latest example where testB.py doesn't need anything from test.py, except the container it is passed as an argument.