UI extensions SDK reference

hubspot.extend(({ context, actions }) => <Extension context={context} sendAlert={actions.addAlert} />);

// Define the extension to be run within HubSpot
hubspot.extend(({ context, actions }) => (
  <Extension
    context={context}
    sendAlert={actions.addAlert}
  />
));
// Define the Extension component, taking in context, and sendAlert as props
const Extension = ({ context, sendAlert }) => {
  ...
};

hubspot.extend(() => <Extension />);
const Extension = () => {
  ...
};

hubspot.extend(({ actions }) => <HelloWorld fetchProperties={actions.fetchCrmObjectProperties} />);

const HelloWorld = ({ fetchProperties }) => {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");

  useEffect(() => {
    fetchProperties(["firstname", "lastname"]).then(properties => {
      setFirstName(properties.firstname);
      setLastName(properties.lastname);
    });
  }, [fetchProperties]);

  return (
    <Text>
      Hello {firstName} {lastName}
    </Text>
  );
};

fetchCrmObjectProperties("*").then(properties => console.log(properties));

{
  "property1Name": "property1Value",
  "property2Name": "property2Value"
}

import React, { useState } from 'react';
import {
  Divider,
  Button,
  Input,
  Flex,
  hubspot
} from '@hubspot/ui-extensions';

hubspot.extend(({ actions }) => (
  <Extension
    refreshObjectProperties={actions.refreshObjectProperties}
  />
));

const Extension = ({
  refreshObjectProperties,
}) => {

// Your extension logic goes here
// Refresh all properties of the object on the page
        refreshObjectProperties();
      }
    });
  };

return (
// Your extension body
)

export type onCrmPropertiesUpdateAction = (
 properties: string[] | '*',
 callback: (
   properties: Record<string, string>,
   error?: { message: string }
   ) => void
) => void;

onCrmPropertiesUpdate(["firstname", "lastname"], properties => console.log(properties));

onCrmPropertiesUpdate("*", properties => console.log(properties));

onCrmPropertiesUpdate(['firstname','lastname'], (properties, error) => {
   if(error) {
    console.log(error.message}
   }
   else {
     console.log(properties)
   }
})

export type OpenIframeModalAction = (
  action: OpenIframeActionPayload,
  onClose?: () => void
) => void;

interface OpenIframeActionPayload {
  uri: string;
  height: number;
  width: number;
  title?: string;
  flush?: boolean;
}

import { Link, Button, Text, Box, Flex, hubspot } from "@hubspot/ui-extensions";

// Define the extension to be run within the HubSpot CRM
hubspot.extend(({ actions }) => <Extension openIframe={actions.openIframeModal} />);

// Define the Extension component, taking in openIframe as a prop
const Extension = ({ openIframe }) => {
  const handleClick = () => {
    openIframe(
      {
        uri: "https://wikipedia.org/", // this is a relative link. Some links will be blocked since they don't allow iframing
        height: 1000,
        width: 1000,
        title: "Wikipedia in an iframe",
        flush: true,
      },
      () => console.log("This message will display upon closing the modal.")
    );
  };

  return (
    <>
      <Flex direction="column" align="start" gap="medium">
        <Text>
          Clicking the button will open a modal dialog with an iframe that displays the content at the provided URL. Get
          more info on how to do this .
          <Link href="https://developers.hubspot.com/docs/platform/create-ui-extensions#open-an-iframe-in-a-modal">
            here
          </Link>
        </Text>

        <Box>
          <Button type="submit" onClick={handleClick}>
            Click me
          </Button>
        </Box>
      </Flex>
    </>
  );
};

window.top.postMessage(JSON.stringify({"action": "DONE"}), "*");

import React from "react";
import { Button, Flex, hubspot, TextArea } from "@hubspot/ui-extensions";

hubspot.extend(({ actions }) => <Extension actions={actions} />);

function Extension({ actions }) {
  const textToCopy = `Copy me!`;

  // Use copy action on event handler
  async function handleOnClick() {
    try {
      // The function is async, make sure to await it.
      await actions.copyTextToClipboard(textToCopy);
      actions.addAlert({
        type: "success",
        message: "Text copied to clipboard.",
      });
    } catch (error) {
      // User error handling. copyTextToClipboard can fail with a `notAllowed` error.
      console.log(error);
      actions.addAlert({
        type: "warning",
        message: "Couldn't copy text.",
      });
    }
  }

  return (
    <Flex direction="column" gap="md">
      <TextArea label="Text" value={textToCopy} />
      <Button onClick={handleOnClick}>Copy text</Button>
    </Flex>
  );
}

function CopyButtonBadExample({ actions }) {
  const textToCopyWithoutUserPermission = `Please don't try this, it will fail`;

  useEffect(() => {
    /**
     * Don't run copyTextToClipboard without explicit interaction.
     * This will fail because the action will run before the page
     * has rendered.
     */
    async function badStuff() {
      try {
        await actions.copyTextToClipboard(textToCopyWithoutUserPermission);
        actions.addAlert({
          type: 'success',
          message: 'text copied to clipboard',
        });
      } catch (error) {
        console.log(error);
        actions.addAlert({
          type: 'warning',
          message: "can't copy value",
        });
      }
    }

    badStuff();
  }, []);

import React from "react";
import { Button, Divider, Flex, hubspot, logger, Text } from "@hubspot/ui-extensions";

logger.warn("Warning in the middle tab, before my extension");

hubspot.extend(({ context }) => <MiddleTabLogging context={context} />);

const MiddleTabLogging = ({ context }) => {
  logger.debug(JSON.stringify(context, null, 2));

  const callFetchSuccess = () => {
    return hubspot
      .fetch("https://jsonplaceholder.typicode.com/posts/1", { method: "GET" })
      .then(response => response.json())
      .then(result => logger.info(JSON.stringify(result, null, 2)))
      .catch(error => logger.error(error.message));
  };

  const callFetchFail = () => {
    return hubspot
      .fetch("https://jsonplaceholder.typicode.com/posts/404", { method: "GET" })
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
      })
      .then(result => logger.info(JSON.stringify(result, null, 2)))
      .catch(error => logger.error(error.message));
  };

  return (
    <Flex direction="column" align="start" gap="small">
      <Text>Test out the logger with the following buttons.</Text>
      <Text variant="microcopy">The browser's developer console will show your events in local dev.</Text>
      <Divider />
      <Text>Test fetch functions</Text>
      <Flex gap="small" wrap="wrap">
        <Button onClick={callFetchSuccess}>Fetch success ✅</Button>
        <Button onClick={callFetchFail}>Fetch error ❌</Button>
      </Flex>
      <Divider />
      <Flex direction="column" gap="small">
        <Text>Test different log levels.</Text>
        <Flex gap="small" wrap="wrap">
          <Button onClick={() => logger.info("Logging an info!")}>logger.info()</Button>
          <Button onClick={() => logger.debug("Logging a debug!")}>logger.debug()</Button>
          <Button onClick={() => logger.warn("Logging a warning!")}>logger.warn()</Button>
          <Button onClick={() => logger.error("Logging an error!")}>logger.error()</Button>
        </Flex>
      </Flex>
      <Divider />
      <Text>
        Deploy the app and crash the card. Use the Trace ID to see what happened in the Log Traces tab in your private
        app's dashboard.
      </Text>
      <Button
        variant="destructive"
        onClick={() => {
          throw new Error("Card crashed");
        }}
      >
        Crash the card
      </Button>
    </Flex>
  );
};