Pages & UI

Pages define the user interface for each step in your app.

Page Hierarchy

Page
├── Section (1+)
│   ├── Card (1+)
│   │   └── Element (1+)
│   │       ├── Table
│   │       ├── Plot
│   │       ├── Dropdown
│   │       └── ...

Creating Pages

from virtualitics_sdk import Page, Section, Card, Table, PlotlyPlot

page = Page(
    title="Analysis Results",
    sections=[
        Section(
            title="Data",
            cards=[
                Card(
                    title="Dataset",
                    content=[Table(data=df)]
                )
            ]
        ),
        Section(
            title="Visualizations",
            cards=[
                Card(
                    title="Trends",
                    content=[PlotlyPlot(figure=fig)]
                )
            ]
        )
    ]
)

Sections

Sections organize related content:

section = Section(
    title="Analysis Results",
    cards=[card1, card2, card3]
)

Cards

Cards are containers for elements:

card = Card(
    title="Summary Statistics",
    content=[
        Table(data=stats),
        PlotlyPlot(figure=dist_plot)
    ]
)

Dynamic Updates

Update pages based on user interaction:

def action(self, flow_metadata):
    # Get user input
    selection = self.page.get_element_by_id("dropdown").value

    # Update data based on selection
    filtered_data = filter_data(selection)

    # Return new page
    return Page(
        title="Filtered Results",
        sections=[
            Section(
                title=f"Results for {selection}",
                cards=[Card(title="Data", content=[Table(data=filtered_data)])]
            )
        ]
    )

Best Practices

• Logical Grouping: Group related content in sections
• Clear Titles: Use descriptive titles for sections and cards
• Not Too Dense: Don't overcrowd pages
• Consistent Layout: Maintain similar structure across steps

See Also

• Page API Reference
• Elements
• Steps