Skip to main content

Page Action | Add

page.add() is the foundational method for adding UI components to the page.

page.add(() => ui.text("Hello World"));

page.add(() => ui.button('btn', {
label: "Click me!",
onClick: () => console.log("Clicked!")
}));

Multiple Components

Multiple components can be nested into a single page.add() call by using ui.stack.

page.add(() => ui.stack([
ui.text("Choose an action"),
ui.stack(
[
ui.button("view-btn", { label: "View" }),
ui.button("edit-btn", { label: "Edit", appearance: "outline" }),
ui.button("delete-btn", { label: "Delete", appearance: "danger" })
],
{ direction: "horizontal" }
)
]))

Async / Await

Normally, page.add() calls are non-blocking. The added components will immediately render without blocking function execution.

But, it can be useful to sometimes await a user event (e.g. filling out a form) prior to continuing execution of your app.

In this case, page.add() calls can be awaited, and then resolved with the included callback.

import { Compose, Page, UI } from "@composehq/sdk"
import db from "../db"

async function handler({ page, ui }: { page: Page, ui: UI }) {
// This will wait until the 'resolve' callback is called before returning,
// and return with whatever data is passed into the callback.
const formData = await page.add(({ resolve }) => ui.form(
[
ui.textInput("firstName"),
ui.textInput("lastName"),
],
{
onSubmit: (formData) => resolve(formData)
}
))

db.user.insert(formData.firstName, formData.lastName)

page.add(() => ui.text("Success!"))
}

const app = new Compose.App({ name: "Create User", handler })

API reference

Function signature

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

page.add(
argument: (() => Component) | ({ resolve }: { resolve: Resolve }) => Component
): Promise<Any>

Parameters

argument

required RenderContent
A function that returns the component to add to the page. The function passes a resolve callback that can be used to resolve the page.add() method with whatever value is passed into the callback. See the Async / Await section for more details.

Returns

Promise<Any>

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