For the month of June, HubSpot's recent updates for developers highlight enhancements for passing data in custom code, custom workflow actions and webhook actions. The UIE Extensions Beta has added new UI Components and introduced a new API update for the Panel component.

Read more about these updates below. 

Developer Updates for June 2024

Data Passing in Custom Code, Webhook, and Custom Workflow Actions

You can now access data (stored in data tokens) from enrolled records and their associated records to use in the Webhook Action, Custom Code Action, and Custom Workflow Action. This enhancement allows users to dynamically utilize cross-object data within these workflow actions.

Depending on the selected workflow action, you can now use the data panel to use data from various object sources. For example, you can use data from a contact record and its associated deal to send an in-app notification to the deal owner.

See the documentation in our Knowledge Base for more details on adding associated data.

Public Betas

Public Beta: UIE Extensions Beta Updates

This month, the latest public beta for UIE extensions has added new UI components and a vital API update for panels. Please see below for more information.

UI Components Updates

• Transparent Variant for Button Component

A new variant for the Button has been added to the UI components. The ‘transparent’ variant provides a link-like appearance with the same padding and spacing as a normal button. 

This button removes the background and border color, styled like a hyperlink.

• Modal Component

The Modal component renders a popup that can grab the user's focus for a specific task, such as signaling a destructive action or a short form. This component features two subcomponents: ModalBody (required) and ModalFooter (optional). Key properties include a unique ID, width (small, medium, large), title, variant (default, danger), aria-label, onOpen, and onClose.

Modals open via interaction with a parent Button, Link, Tag, or Image component and include a default close button, with additional closing mechanisms available using the closeOverlay action. Only one modal can be opened at a time and can be initiated from panels but not vice versa. Use the default variant for general prompts and the danger variant for confirming irreversible actions.

API Update for Panel Component

• New API for Panels

The Panel component API has been updated for simpler and easier management. A new prop, overlay, allows consistent usage across Panels and Modals. This update simplifies overlay management, reduces the number of functions needed, and handles additional popups like Notes from CrmActionButton more effectively. 

No design changes are needed for existing Panel components. While the older reactions-based panels have not yet been deprecated, we recommend transitioning to the new API for improved efficiency.

For more details and examples, refer to HubSpot's Overlay example project.

If you have any inquiries or concerns, please contact us via the Developer Slack channel, #crm-customization-beta.

Note: The StatusTag component has not yet been launched and will be announced soon when it's available to the public. 

Questions or comments about these updates? Discuss these updates on our developer community forums.