How can I position a preview button in a UI extension in HubSpot?

Develop, Build & Integrate APIs & Integrations
1

Hi everyone,

I’m currently building a HubSpot UI Extension and would appreciate some guidance regarding the use of the Preview button.

I’m using the following code to render the button:

import { CrmCardActions } from "@hubspot/ui-extensions/crm"; <CrmCardActions

actionConfigs={[

{

type: 'action-library-button',

label: 'Preview',

actionType: 'PREVIEW_OBJECT',

actionContext: { objectTypeId: '0-3', objectId: 14795354663, }, tooltipText: 'Preview this deal record.',

} ]} />

``

This successfully displays the Preview button, but it’s positioned only at the top of the card. I would like to position it more centrally within the card, but I haven’t been able to find a way to do so.

Additionally, is it possible to use the Preview button more than once within a single UI Extension card?

Any insights or suggestions would be greatly appreciated.

Thank you!

2

Hi, @hafizusama :waving_hand: Thanks for the great question! I’d like to invite some of our community experts to the conversation – hey @evaldas @nickdeckerdevs1 @Anton have you worked with modifying this component recently? Or added multiple buttons to a single card?

Thank you very much for taking a look! —Jaycee

3

Thanks @Jaycee_Lewis for the appreciation and tagging other experts for help. :slightly_smiling_face:

4

Thanks @nickdeckerdevs1 :raising_hands: — Jaycee

5

Apologies if I haven’t been very reactive to these tags. I’m in the process of merging deckerdevs with Impulse Creative and I have a lot of wrapping up to do. I’ll also be going on a summer tour of Florida with my 8yo to do his summer bucket list items so I’ll be a bit away from here for the next week and a half, and then starting at Impulse on June 23rd -- so please continue to tag me where you see fit and I’ll do my best to help out.

6

You’re a legend @nickdeckerdevs1 :raising_hands: No worries at all. Sent you a DM — Jaycee

7

You need to check out the flex area -- you can use this to position your content.

I’d also suggest checking out the examples here so you can get a better idea of how this is all used

8

I was able to resolve this using the <CrmActionButton> component. You can use multiple of them inside your UI Extension. Here’s an example where I used in in a <Table>.

 <TableCell>
 <CrmActionButton
 actionType="PREVIEW_OBJECT"
 actionContext={{
 objectTypeId: dictionary.objects.userDefined.ordered_product,
 objectId: product.id,
 }}
 variant="secondary"
 size="xs"
 >
 Preview
 </CrmActionButton>
 </TableCell>

Docs: Accounts Dashboard | HubSpot

9

Thank you very much @BMacMahon :raising_hands: — Jaycee

10

Hi @zataara,

I hope you’re doing well. I regret the delayed response — I was tied up with other priority tasks at the time.

You are right — I managed to achieve it using CRM action buttons instead of CRM card actions.

Thank you so much! :slightly_smiling_face: