Tips, Tricks & Best Practices

OBetzalel
Stratege/Strategin

Create custom UI pages with development

lösung

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! 😀

0 Upvotes
1 Akzeptierte Lösung
Jnix284
Lösung
Koryphäe | Elite Partner
Koryphäe | Elite Partner

Create custom UI pages with development

lösung

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


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
7 Antworten
OBetzalel
Stratege/Strategin

Create custom UI pages with development

lösung

@Jnix284 Thanks for the quick reply,

Im In:

OBetzalel_0-1707413538930.png

 

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!

 

0 Upvotes
Jnix284
Koryphäe | Elite Partner
Koryphäe | Elite Partner

Create custom UI pages with development

lösung

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

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes
OBetzalel
Stratege/Strategin

Create custom UI pages with development

lösung

@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!!!

0 Upvotes
Jnix284
Koryphäe | Elite Partner
Koryphäe | Elite Partner

Create custom UI pages with development

lösung

@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:

Jnix284_0-1707741835943.png

 

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

Jnix284_1-1707741878474.png

 

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

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes
Jnix284
Lösung
Koryphäe | Elite Partner
Koryphäe | Elite Partner

Create custom UI pages with development

lösung

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


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes
OBetzalel
Stratege/Strategin

Create custom UI pages with development

lösung

@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
Koryphäe | Elite Partner
Koryphäe | Elite Partner

Create custom UI pages with development

lösung

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):

Jnix284_2-1707403966716.png

 

or from settings here:

Jnix284_0-1707403945352.png

 

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes