topic Re: Custom Button that opens a HTML form in APIs & Integrations

Custom Button that opens a HTML form

Stanza — Tue, 13 Sep 2022 23:36:36 GMT

Hi all,

Is it possible to create a custom button on the company card that opens a modal dialog that allows user input?

The user enters data and then clicks ok om the form and it should return back to the company card and refresh the page.

Is this at all possible if so then please point me ot the right documentation.

I am happy to achieve his through custom coding, just want to know if it's possible and whats involved.

Thanks

Re: Custom Button that opens a HTML form

PPaiva — Wed, 14 Sep 2022 23:06:33 GMT

Hi @Stanza

It's possible through the CRM Cards API .

You create an app with a card and add actions to open Iframe modal pages.

Reference docs here:

https://developers.hubspot.com/docs/api/crm/extensions/custom-cards

Best regards

Paulo paiva

www.sollogica.com

Re: Custom Button that opens a HTML form

Stanza — Fri, 16 Sep 2022 03:38:37 GMT

Thanks @PPaiva , I'm actually looking at CRM Development Tools inside my sandbox portal.

I have successfully deployed the CRM card for the iframe sample code located at https://github.com/HubSpot/ui-extensions-examples/tree/main/display-iframe

and I can open up the modal dialog.

What I want to do is when the user finishes entering data on the HTML page and clicks on 'Submit' I want that action to pass the information from the HTML form back into the HubSpot card AND REFRESH the HubSpot card to display the card with the updated values.

From the looks of it I think the HubSpot card DOES gets refreshed when the user closes the model dialog but I just to confirm ?

Can this be done through the onclick action for 'IFRAME ' type ?

Re: Custom Button that opens a HTML form

PPaiva — Tue, 20 Sep 2022 12:08:29 GMT

The form submit is under your control, as the page inside the IFRAME is yours.

From the form postback you send a card Update via Cards API.

After the update is made you close the modal through:

window.parent.postMessage(JSON.stringify({"action": "DONE"}), "*");

The details to close the modal are also in the Card API, on the webhooks tab.

Best regards

Paulo paiva

www.sollogica.com

Re: Custom Button that opens a HTML form

Stanza — Sun, 18 Sep 2022 23:16:20 GMT

Fantastic !. Thanks @PPaiva will check it out.

Re: Custom Button that opens a HTML form

PPaiva — Mon, 19 Sep 2022 13:01:57 GMT

Your welcome @Stanza. Don't forget to mark as solved!