Create custom UI pages with development

[OBetzalel]

Hi,

We would like to develop a page that will be part of the HubSpot platform, for example, a button that will lead us to another page/app in the system, and the user will be able to view a custom table that we will create.

Salesforce has the Visualforce page that is a framework that allows developers to create custom user intefaces / pages for applications.

We want to include HTML tags and use coding to retreive the data from the database and an option to maniulate it (Like a webservice that sits on the platform).

Is it possible to do so? (We know that HubSpot CMS is used to create web pages, but we want to create pages inside the HubSpot system that will be part of the system, to work on Visual Studio code or similar tool to develop).

Thanks! 😀

[OBetzalel]

@Jnix284 Thanks for the quick reply,

Im In:

How do I start developing a custom card? With development that if i click on a button an email will be sent for example, or other stuffs that coding do.

Thanks!

[Jnix284]

@OBetzalel you're welcome, happy to help you get started.

The menu you're accessing is for pre-built cards - this is how you'll customize the record once your custom coded card is complete.

To start with custom cards:

1 - create a project (via the CLI)

2 - create a private app within the project

I highly recommend going through the developer documentation to make sure everything is coded correctly.

[OBetzalel]

@Jnix284 Thanks!!

Just one last question, Is it possible to develop a full page, so for example we can create an action button to go to that page inside the system and create our customized components? so it will not appear in a crm card?

Thanks!!!

[sejal_parikh]

@OBetzalel I'm curious to know your use case for developing a full page in HubSpot. If you had that option, what would you build there? What sort of problems would you solve?

[Jnix284]

@OBetzalel CRM cards are directly related to the object (contact, company, deal, ticket, custom object) and appear on the corresponding record (individual contact, specific company, etc.) so I'm not sure how you could surface the information outside of the record.

It is possible to open the content as a sidebar instead of having visible directly on the view, so it could be possible...

Since you want to display a custom table - is it specific to the record or aggregate data?

Another option would be to use the embed option for dashboards that allow you to add non-report content using external content:

If you can surface your table as a URL or embed code, then you could essentially embed it directly on a dashboard:

So you could create a dashboard that only has this report, which would create a unique page for the table - would that work?

[Jnix284 · Accepted solution]

Hi @OBetzalel you'll want to look into custom CRM cards using React - there are options to customize the middle section of the records directly (rather than a separate page entirely) and you can also create flyouts from the sidebar.

Here are a few resources to get you started:

Create UI Extensions

video from DHUG talking about react cards

CRM card beta - it's out of beta now, this has a lot of helpful resources

reimagining crm records - ideas

Aptitude 8 CRM card resources

[OBetzalel]

@Jnix284  The CRM card beta is something that we can start build in the production environement?

I pressed on "Join the Beta" and I haven't found it in the updates list.

Can we use it now?

[Jnix284]

Hi @OBetzalel, you don't have to join the beta - CRM cards are now live in your account, I only included the beta link because it has a lot of good resources to show you what's possible and how to work with them.

You can access directly from any record here (click customize tabs):

or from settings here: