VVibeFlui

Custom Actions

Custom actions are app-specific commands.

Use custom actions for workflows beyond built-in create, edit, delete, and view.

Custom row action

TS
export const usersSchema = {
  resource: "users",
  actions: {
    row: [
      {
        key: "send-welcome-email",
        label: "Send welcome email",
        icon: "lucide:mail",
        handler: "users.sendWelcomeEmail",
        visibleWhen: {
          key: "status",
          operator: "equals",
          value: "active"
        }
      }
    ]
  },
  registry: {
    actionHandlers: ["users.sendWelcomeEmail"]
  }
} as const;

Custom toolbar action

TS
export const usersSchema = {
  resource: "users",
  actions: {
    toolbar: [
      {
        key: "import-users",
        label: "Import",
        icon: "lucide:upload",
        variant: "secondary",
        handler: "users.import"
      }
    ]
  },
  registry: {
    actionHandlers: ["users.import"]
  }
} as const;

Custom endpoint action

TS
export const approveAction = {
  key: "approve",
  label: "Approve",
  icon: "lucide:check",
  endpoint: { url: "/api/users/:id/approve", method: "POST" },
  visibleWhen: {
    key: "status",
    operator: "equals",
    value: "pending"
  },
  refreshOnSuccess: true
} as const;

Custom handler action

TS
import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  actionHandlers: {
    "users.sendWelcomeEmail": async ({ row }) => ({
      status: true,
      code: 200,
      message: `Welcome email sent to ${String(row?.email ?? "the user")}`
    }),
    "users.import": async () => ({
      status: false,
      code: 409,
      message: "Import requires a CSV file selection"
    })
  }
});

Custom action checklist

  • Use a stable key.
  • Use a clear label.
  • Use an Iconify icon.
  • Use handler or endpoint.
  • Add confirm for risky actions.
  • Add permission for restricted actions.
  • Add visibleWhen or disabledWhen when state matters.
  • Return backend-style responses from handlers.