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>
    </>
  );
};

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>
  );
};