Page Action | Modal

The page.modal() method is a drop-in replacement for page.add() that automatically wraps the content inside a modal.

It also provides minor additions on top of the page.add() interface for configuring aspects of the modal's appearance and behavior.

Node.js

const users = await db.users.selectAll();

page.add(() => ui.table("users-table", users, {
    columns: ["name"],
    actions: [{
        label: "View Details",
        onClick: (row) => {
            page.modal(() => ui.json(row), { title: "User Details" })
        }
    }]
}))

Python

users = db.select_all_users()

page.add(lambda: ui.table(
    "users-table",
    users,
    columns=["name"],
    actions=[
        ui.action(
            label="View Details",
            on_click=lambda row: page.modal(
                lambda: ui.json(row),
                title="User Details"
            )
        )
    ]
))

Closing the modal

By default, every modal renders a small close icon in the top-right corner that can be used to close the modal.

Alternatively, you can close the modal manually by calling the included resolve method, which will both close the modal and resolve the promise with the value you pass to it.

Node.js

const response = await page.modal(({ resolve }) => ui.stack([
    ui.text("Is three slices of bread a sandwich?"),
    ui.button("yes", { label: "Yes", onClick: () => resolve(true) }),
    ui.button("no", { label: "No", onClick: () => resolve(false) }),
]))

// Modal was closed with the "x" icon in the top right corner
if (response === undefined) {
    page.add(lambda: ui.text("You didn't answer the question!"))
}

if (response === true) {
    page.add(lambda: ui.text("You answered correctly!"))
}

if (response === false) {
    page.add(lambda: ui.text("You answered incorrectly :("))
}

Python

response = await page.modal(lambda resolve: ui.stack([
    ui.text("Is three slices of bread a sandwich?"),
    ui.button("yes", label="Yes", on_click=lambda: resolve(True)),
    ui.button("no", label="No", on_click=lambda: resolve(False)),
]))

# Modal was closed with the "x" icon in the top right corner
if response is None:
    page.add(lambda: ui.text("You didn't answer the question!"))

if response is True:
    page.add(lambda: ui.text("You answered correctly!"))

if response is False:
    page.add(lambda: ui.text("You answered incorrectly :("))

API reference

Function signature

Node.js

type Component = ReturnType<typeof ui.textInput> | ReturnType<typeof ui.button> | /* more components */ | ReturnType<typeof ui.stack>
type Resolve = (value: Any) => void

page.modal(
    content: (() => Component) | (({ resolve }: { resolve: Resolve }) => Component),
    properties?: Partial<{
        title: string;
        width: "sm" | "md" | "lg" | "xl" | "2xl";
    }>
): Promise<Any>

Python

# Return type of all ui components
Component = ui.stack | ui.button | ui.text_input | /* more components */ | ui.markdown
Resolve = Union[Callable[[], None], Callable[[Any], None]]

page.modal(
    content: Callable[[], Component] | Callable[[Resolve], Component],
    *,
    title: str | None = None,
    width: Literal["sm", "md", "lg", "xl", "2xl"] = "md"
) -> Awaitable[Any]

Parameters

Node.js

content

required RenderContent

A function that returns the component to render inside the modal. Accepts the same content format as page.add(). See that page for more details.

Python

content

required RenderContent

A function that returns the component to render inside the modal. Accepts the same content format as page.add(). See that page for more details.

---

Node.js

properties.title

optional string

Specify a custom title for the modal. If not provided, the title will be left blank.

Python

title

optional str

Specify a custom title for the modal. If not provided, the title will be left blank.

---

Node.js

properties.width

optional string literal

Specify the width of the modal. Defaults to "md".

Options:

• "sm": 448px
• "md": 512px
• "lg": 576px
• "xl": 768px
• "2xl": 1024px

Python

width

optional Literal

Specify the width of the modal. Defaults to "md".

Options:

• "sm": 448px
• "md": 512px
• "lg": 576px
• "xl": 768px
• "2xl": 1024px

---

Returns

Node.js

Promise<Any>

A promise that resolves to undefined or the value of whatever is passed to the resolve callback.

Python

Awaitable<Any>

An awaitable that resolves to None or the value of whatever is passed to the resolve callback.