Create a bulk action (BETA)

{
  isLoading: false,
  error: null,
  results: [
    {
      "objectId": 123456,
      "status": "SUCCESS",
      "properties": {
        "email": "john@example.com",
        "firstname": "John"
      }
    },
    {
      "objectId": 123457,
      "status": "ERROR"
    }
  ],
  total: 42,
  pagination: {
    "hasNextPage": true,
    "hasPreviousPage": false,
    "currentPage": 1,
    "pageSize": 25,
    "nextPage": () => {}, // function to fetch the next page
    "previousPage": () => {}, // function to fetch the previous page
    "reset": () => {} // function to reset to the first page
  },
  isRefetching: false,
  refetch: () => {} // function to refetch the current page
}

import {
  Button,
  ErrorState,
  Flex,
  LoadingSpinner,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
  Text,
  hubspot,
} from "@hubspot/ui-extensions";
import type { BulkActionsContext } from "@hubspot/ui-extensions";
import { useBulkSelectionRecords } from "@hubspot/ui-extensions/experimental";

hubspot.extend<"crm.bulkActions">(({ context }) => (
  <SelectedContacts context={context} />
));

const SelectedContacts = ({ context }: { context: BulkActionsContext }) => {
  const { results, total, isLoading, error, pagination } =
    useBulkSelectionRecords({
      selection: context.crm.selection,
      properties: ["firstname", "email"],
      pageSize: 25,
    });

  if (isLoading) {
    return <LoadingSpinner label="Loading records" />;
  }

  if (error) {
    return (
      <ErrorState title="Couldn't load the selected records.">
        <Text>Please try again in a few moments.</Text>
      </ErrorState>
    );
  }

  return (
    <Flex direction="column" gap="sm">
      {total !== undefined && <Text>{total} records selected</Text>}
      <Table>
        <TableHead>
          <TableRow>
            <TableHeader>First name</TableHeader>
            <TableHeader>Email</TableHeader>
          </TableRow>
        </TableHead>
        <TableBody>
          {results.map((record) => (
            <TableRow key={record.objectId}>
              {record.status === "SUCCESS" ? (
                <>
                  <TableCell>{record.properties.firstname ?? ""}</TableCell>
                  <TableCell>{record.properties.email ?? ""}</TableCell>
                </>
              ) : (
                <>
                  <TableCell>Record {record.objectId}</TableCell>
                  <TableCell>Unavailable</TableCell>
                </>
              )}
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Flex gap="sm">
        <Button
          onClick={pagination.previousPage}
          disabled={!pagination.hasPreviousPage}
        >
          Previous
        </Button>
        <Button
          onClick={pagination.nextPage}
          disabled={!pagination.hasNextPage}
        >
          Next
        </Button>
      </Flex>
    </Flex>
  );
};

{
  total: 250,
  succeeded: 200,
  failed: 50,
  aborted: false,
  failures: [
    {
      objectIds: [123456, 123457, ...], // the 50 IDs in the failed batch
      error: Error // the error thrown by your callback
    }
  ]
}

import { useState } from "react";
import { Button, Flex, Text, hubspot } from "@hubspot/ui-extensions";
import type { BulkActionsContext } from "@hubspot/ui-extensions";
import { useBulkSelectionAction } from "@hubspot/ui-extensions/experimental";

hubspot.extend<"crm.bulkActions">(({ context }) => (
  <SendNotes context={context} />
));

const SendNotes = ({ context }: { context: BulkActionsContext }) => {
  const { run, status } = useBulkSelectionAction(context.crm.selection);
  const [message, setMessage] = useState("");

  const sendNotes = async () => {
    let sent = 0;
    try {
      const summary = await run(
        async (records) => {
          const contacts = records.flatMap((record) =>
            record.status === "SUCCESS"
              ? [{ id: record.objectId, email: record.properties.email }]
              : []
          );
          const response = await hubspot.fetch("https://api.example.com/notes", {
            method: "POST",
            body: { contacts },
          });
          if (!response.ok) {
            throw new Error(`Request failed with status ${response.status}`);
          }
          sent += contacts.length;
        },
        { properties: ["email"], batchSize: 50, continueOnError: true }
      );
      setMessage(
        `Sent notes for ${sent} records. ${summary.failed} records failed.`
      );
    } catch {
      // run() rejects if HubSpot can't fetch a batch of records
      setMessage(`The run stopped after sending notes for ${sent} records.`);
    }
  };

  return (
    <Flex direction="column" gap="sm">
      <Button onClick={sendNotes} disabled={status.running}>
        Send notes
      </Button>
      {status.running && (
        <Text>
          Processed {status.processed} of {status.total ?? "the selected"} records
        </Text>
      )}
      {message && <Text>{message}</Text>}
    </Flex>
  );
};