Create custom cards with projects (BETA)

When configuring a serverless function, note that you need to call the sendResponse function which takes in an object with two available properties:

• sections: an array that contains component objects. In the Getting Started template, components are defined first with constants, then later inserted into the sections array. You can also build components within the sections array itself, or use a combination of both.
• messages: an object that defines a floating success or error banner. For example, a success alert that appears on successful form submission.

In the custom card's JSON file, you can configure positioning either within the middle pane or right sidebar of a record by setting the location property. To see an example, follow the quickstart guide to create an extension that displays in the middle pane.

By default, when creating a custom card for the middle pane, it will be added to the Custom tab. However, you can add it to the Overview tab by clicking Customize this tab on a record page.

In addition, when customizing a tab, you can create views based on teams to control which users can view which extensions.

Components are the UI elements that make up the content of the custom card, such as forms and tables. Components should be included in the sections array of your serverless function. Standard components can be used by cards in all locations, while other components can only be used by cards in the middle pane.

You can find a full list of available components in the components reference guide.

When a custom card fails to load, an error message will appear on the CRM record.

• To navigate to the app's CRM card logs, click the link in the error message.
• On the Logs tab, click the error to view more information, including the type of error, the error message, and full log details.

Learn more about debugging serverless functions.

To enable your extension to interact with data, either externally or within HubSpot, you can add actions through components, such as a button or image, with the onClick property.

Using the UI Extensions Playground, you can view the payload of different actions types by using the Action details tab:

• In your HubSpot account, navigate to CRM Development in the main navigation bar. 
• In the left sidebar menu, click UI Extensions Playground.
• In the UI Extensions Playground, click the button component to add it to the middle pane.
• In the right pane, set the type of action. For example, SERVERLESS_ACTION_HOOK.
• In the middle pane, click the button to trigger the event.
• In the right pane, click the Action details tab to view the action output.

Below, learning more about the available types of actions.

Call a serverless function included in the project. You'll reference the name of the function within the targetFunction field of the extension's JSON config file. The name of the function should match the function's name within the serverless.json file as well as the function that gets called in the JavaScript file. 

To see an example of a serverless action hook, use the quickstart guide to download and view the Getting Started project template files.

Open a modal dialog within an iframe to display content.

To see an example of using an iframe, check out HubSpot's extension example library on GitHub.

Submits a form to the specified serverless function with a form's current state. This action type should only be used with forms. To see an example of a simple form with a submit action, check out HubSpot's extension example library on GitHub.

Using the payload object, you can retrieve the end user's submitted value. For example, to retrieve the value submitted for an input with a name of example_select_input, use payload.formState.example_select_input. 

Events are added to the serverless context when a user's action triggers a serverless function. Events will be included in the serverless functions context under event if the serverless function was triggered by a specific user event, similar to web events.

To see an example of a project that uses a form and event, check out HubSpot's extension example library on GitHub.

To use events, you'll first set up a for submit type action within a button component that triggers a serverless function:

Then, in the serverless function you can reference the event within the context argument. The example below checks for a SUBMIT event, then creates a task in Asana using the values in the submitted form:

If your extension includes an action that's triggered by user input, such as a button, you can display a notification to indicate whether the action succeeded or failed. After the action completes, you can trigger the notification by providing a message in a sendResponse call.

To see examples of success and error banners, check out HubSpot's extension example library on GitHub.

For example, if your extension has a button that triggers an API call, you could specify the success and error handling within a separate serverless function (e.g., handle-response.js), then reference that serverless function within the original JavaScript file (e.g., crm-card.js)