topic Re: UI extensions with React (BETA) in APIs & Integrations

UI extensions with React (BETA)

JoelV — Tue, 15 Jul 2025 14:33:26 GMT

Hello

I noticed that it's possible to create custom app cards with the UI extension and I'm currently trying to figure out if this could solve a problem for one of our clients.

Initial situation: In the company overview is a card called product history (see screenshot). Unfortunately, this card can't be altered in any way. The client would like to have a card similar to the product history but with the possibility to filter certain properties stored on the article. The client doesn't have any prodcuts - only articles as the deals get imported via API with articles connected to the deals.

Has someone already done something similar? Would the UI extension be the right tool to achieve this?

Many thanks!

Re: UI extensions with React (BETA)

MichaelMa — Tue, 15 Jul 2025 16:49:36 GMT

Is the Product History card a built-in Hubspot card or a card someone else built? There wasn't a screenshot so hard to tell what you want to see however, I feel like the caveat of whether or not it's possible comes down to: can you pull the data you need via the API?

The APIs are robust but there are clear limits on certain types of data that it can pull. Most notable right now are teh engagement data is a bit cumbersome to retrieve.

If you can pull the data, then it comes down to how you want it to be displayed. The UI Extensions are robust but limited in how they display things to keep things "Hubspot". I know I have some design annoyances I've encountered when building my custom cards.

Re: UI extensions with React (BETA)

MichaelMa — Tue, 15 Jul 2025 17:26:09 GMT

I found the product history card and it's a Hubspot card. This is one of the cases where you can probably create something similar but not exactly the same and the custom version is probably going to be less optimized.

The Table component would be the same:

https://developers.hubspot.com/docs/reference/ui-components/standard-components/table#paginated-tables

The search (or just use a text component):

https://developers.hubspot.com/docs/reference/ui-components/standard-components/search-input

The dropdowns:

https://developers.hubspot.com/docs/reference/ui-components/standard-components/dropdown

The main issue is simply retrieving the data. You would need to:

1. Pull the schema data for Deals to get the stages.

2. Likely do a GraphQL request to pull the Company -> Deal -> Line Item data and then display the data in the table.

3. The search and filter (dropdown) wouldn't be as responsive, probably, as th Hubspot version but it's possible to replicate.

Re: UI extensions with React (BETA)

JoelV — Fri, 18 Jul 2025 07:47:33 GMT

Thank you Micheal, much appreciated!

I'm trying to get my head around this. If the responsivness isn't as smooth as the HubSpot version it's not a big deal as long as the client sees what he'd like to see 🙂

Re: UI extensions with React (BETA)

MichaelMa — Fri, 18 Jul 2025 15:37:12 GMT

When I started building cards, I tried to start with one of the example projects to get a feel for things.

https://github.com/HubSpot/ui-extensions-examples/tree/main

The Deals Summary project is a good example on how to pull data although I would recommend using GraphQL over the individual API requests (mostly because GraphQL is more efficient to retrieve lots of associated data).

https://github.com/HubSpot/ui-extensions-examples/tree/main/deals-summary