Create UI Extensions in your project-built private app

​

Prerequisites

​

Set up extension files

• example-card.json: the card configuration.
• Example.jsx: the React file that serves as the front-end.
• package.json: metadata about the extension’s front-end. This file is required and can be used to include dependencies for your React front-end.

​

example-card.json

{
  "type": "crm-card",
  "data": {
    "title": "Example Card",
    "description": "This is an example Private App card",
    "uid": "get_started_card",
    "location": "crm.record.tab",
    "module": {
      "file": "Example.jsx"
    },
    "previewImage": {
      "file": "assets/example-card-preview.png",
      "altText": "Example app card UI extension, demonstrating a card with a title, description, and a button"
    },
    "objectTypes": [
      {
        "name": "contacts"
      }
    ]
  }
}

​

Extension location

• crm.record.tab: places the extension in the middle column of CRM record pages, either in one of HubSpot’s default tabs or in a custom tab. When objectType is set to company, the card will also be available in the sales workspace target accounts preview panel.

• crm.record.sidebar: displays the extension in the right sidebar of CRM record pages. Extensions in the sidebar cannot use CRM data components. When objectType is set to deals, the card will also be available in the sales workspace deals sidebar.

• crm.preview: displays the app card in the preview panel that you can access throughout the CRM. When using this location, the extension will be available when previewing the objectTypes specified in the JSON config file. This includes previewing records from within CRM record pages, index pages, board views, and the lists tool. Learn more about customizing previews.
• helpdesk.sidebar: displays the card in the ticket sidebars within help desk. This includes both the ticket preview panel on the help desk home page and the right sidebar of the ticket view in help desk. To add a card to this location, you’ll need to configure your help desk settings to include the card.

​

Supported objects

"objectTypes": [
 {
  "name": "p_Cats"
 }
]

​

Example.jsx

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

hubspot.extend(() => <Extension />);

const Extension = () => {
  const handleSubmit = () => {
    hubspot
      .serverless('my-function-name', {
        propertiesToSend: ['hs_object_id'],
        parameters: { extra: 'data' },
      })
      .then((response) => {
        // handle response, which is the value returned from the function on success
      })
      .catch((error) => {
        // handle error, which is an Error object if the function failed to execute
      });
  };
  return <Button onClick={handleSubmit} label="Click me" />;
};

​

package.json

{
  "name": "hubspot-example-extension",
  "version": "0.1.0",
  "author": "HubSpot",
  "license": "MIT",
  "dependencies": {
    "@hubspot/ui-extensions": "latest",
    "react": "^18.2.0"
  }
}

​

Start local development

hs project dev

​

Adding cards to the UI

• Log in to your HubSpot account.
• In your HubSpot account, navigate to Contacts > Contacts. Then, click the name of a contact to view its record.
• At the top of the contact record, click Customize tabs. A new tab will open showing the record editor sidebar.
• In the right sidebar, click Default view to edit the default contact record view.
• For the purposes of this tutorial, click the + plus icon tab at the top of the editor to add a new tab.
• In the dialog box, enter a name for your new tab, then click Done.
• With the new tab added, click the Add cards dropdown menu.
• In the right panel, under Card types, click Apps.
• Select the checkbox next to the example extension that’s part of your public app.
• Click the X at the top of the right panel to close it.
• In the top right, click Save and exit.
• Navigate back to the contact record, then refresh the page. You should now see your new tab, which will contain your new card. With the local development server running, you’ll see a Developing locally tag displayed at the top of the card.

​

Additional resources

• Consult the UI components overview for a full listing of all available components you can use.
• Learn more about configuring UI extensions using the UI extensions SDK.