UI extensions with React (BETA)

[JoelV]

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!

[MichaelMa · Accepted solution]

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.

[MichaelMa · Accepted solution]

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-tabl...

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.

[MichaelMa · Accepted solution]

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-tabl...

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.

[MichaelMa · Accepted solution]

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.

[JoelV]

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 🙂 

[MichaelMa · Accepted solution]

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