How to add widget to a tab after it is already composed on the screen

[MohamedElgamal]

having following scenario three tabs called ( submitted , in progress ,completed) each tab contain a set of items in the first tab i have a button that execute some operations but after the operation is completed the content of the second tab is changed i the database
I want to make the content of progress tab to be updated after the widget is composed on it

[davep]

You may find it useful to review the section of the Textual tutorial that covers adding and removing widgets in a dynamic way.

[TomJGooding]

I'm not sure it is clear from the docs how you might add/update content in an existing pane in TabbedContent though?

[TomJGooding]

Here's a very simple example. I'd like to think I'm fairly well-versed in Textual, but I honestly have no idea how you should update the content in the activated tab.

from datetime import datetime

from textual import on
from textual.app import App, ComposeResult
from textual.widgets import Label, TabbedContent, TabPane


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        with TabbedContent():
            with TabPane("Submitted", id="submitted"):
                yield Label("Last viewed: ...")
            with TabPane("In Progress", id="in-progress"):
                yield Label("Last viewed: ...")
            with TabPane("Completed", id="completed"):
                yield Label("Last viewed: ...")

    @on(TabbedContent.TabActivated)
    def on_tabbed_content_tab_activated(
        self, event: TabbedContent.TabActivated
    ) -> None:
        message: str = f"Last viewed: {datetime.now()}"
        ...


if __name__ == "__main__":
    app = ExampleApp()
    app.run()

[MohamedElgamal]

@davep i see it in the docs but i can't really figure out how the first tab will access the second tab to add element to it as I see in the picture should i have the reference to the object in the docs its use self keyword to refer to current tab

but i need to add elements to the second one

keep in mind i am inflating the tab dynamically using the database

[davep]

@TomJGooding Something like this?

from datetime import datetime

from textual import on
from textual.app import App, ComposeResult
from textual.widgets import Label, TabbedContent, TabPane


class ExampleApp(App):
    def compose(self) -> ComposeResult:
        with TabbedContent():
            with TabPane("Submitted", id="submitted"):
                yield Label("Last viewed: ...")
            with TabPane("In Progress", id="in-progress"):
                yield Label("Last viewed: ...")
            with TabPane("Completed", id="completed"):
                yield Label("Last viewed: ...")

    @on(TabbedContent.TabActivated)
    def on_tabbed_content_tab_activated(
        self, event: TabbedContent.TabActivated
    ) -> None:
        event.tabbed_content.query_one(f"TabPane#{event.tab.id} Label", Label).update(
            f"Last viewed: {datetime.now()}"
        )

if __name__ == "__main__":
    ExampleApp().run()

[MohamedElgamal]

yes, but in my case it is not sample label it custom static page that contain a group of widgets that should be added or updated

[davep]

My reply was to Tom's question about how he'd update the content of the tab panes when switching to them; I filled in the blank in his code.

More it's seeming like your question is "given an ID for a TabPane, how do I get that TabPane back?". That would be a simplified version of what I added above. so if you were doing this in a TabbedContent.TabActivated event you should be able to get the TabPane that was switched to line this:

pane = event.tabbed_content.query_one(f"TabPane#{event.tab.id}", TabPane)

then you have it to change the content.

[TomJGooding]

Sorry I thought my simple example would help clarify rather than confuse things here. Thanks Dave.

[davep]

Did for me: clarified the likely question.