Hi There,
Recently I decided to make a very basic HS CRM Card to explore it’s possibilities.
I tried to create a HS UI Extension Card and connect it with Highcharts via React.js.
But I receive the error you see in attachments.
Is HubSopot capable of this right now? or is it something we should wait for future updates. You can find my two main components in attachments. Thx!
Hi @MAsghari ,
Thank you for reaching out to the community! Would you mind confirming what specific steps were taken in order to connect the UI Extension Card to Highcharts via React.js? Our developer documentation here outlines all prerequisites as well as capabilities for creating UI extensions with React.
I would also love to hear from @ChrisoKlepke and @zach_threadint - any ideas as to whether connecting a UI Extension card with Highcharts via React.js is possible?
Hi @MAsghari
The error message you’ve received indicates you’ve referenced a “div” element (e.g. <div><Text>Example</Text></div>) in your React app. HubSpot’s UI Extensions feature does not support “div” elements. Instead, you may wish to use HubSpot’s “Flex” component, which “renders an empty div container set to display=flex”. Whether or not you’ll be able to get something to work with Highcharts, I’m not 100% sure, but at least this should get you past the issue you’re currently experiencing. A good starting point is also to review all standard components that HubSpot makes available to developers working on UI Extensions.
I hope that proves helpful. Please let me know if you have any follow-up questions.
Hi Zach,
Thanks for your answer. Yes you are correct, HubSpot UI Extension seems not to support div element. But that is not the only part of story. I tried to place the Highcharts inside and <iframe> got the same error complaining about iframe tag.
For me this error messages sounds weired a lot, beucase almost all the usefull third party packages use and element like <div> or <iframe> in their JSX files, and it is super weired that HubSpot UI extension can’t render that.
Do you agree with me?
Can you guide me how I can show charts in HubSpot UI extension? Is it possible to have custom charts or we are only limitted to the HubSpot UI components?
Hi @MAsghari,
My view here is that HubSpot is trying to find the right balance between offering flexibility to developers while still keeping a reasonable amount of control over what’s being processed and rendered directly within their systems.
You should be able to reference a Highcharts dependency via a UI Extension iframe modal. In this case, you’d have your own backend configured to render your Highcharts resources on a website that you manage, and then display that in HubSpot via a UI Extension iframe modal.
I hope that proves helpful. Please let me know if you have any follow-up questions.
