CRM Card Actions

[hafizusama]

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!

[nickdeckerdevs1 · Accepted solution]

You need to check out the flex area -- you can use this to position your content.
https://developers.hubspot.com/docs/reference/ui-components/standard-components/flex

I'd also suggest checking out the examples here so you can get a better idea of how this is all used
https://developers.hubspot.com/docs/guides/crm/ui-extensions/sample-extensions/overview

[zataara · Accepted solution]

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: https://developers.hubspot.com/docs/reference/ui-components/crm-action-components/crm-action-button

[UsamaHM]

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

[Jaycee_Lewis]

Thank you very much @BMacMahon 🙌 — Jaycee

[nickdeckerdevs1 · Accepted solution]

You need to check out the flex area -- you can use this to position your content.
https://developers.hubspot.com/docs/reference/ui-components/standard-components/flex

I'd also suggest checking out the examples here so you can get a better idea of how this is all used
https://developers.hubspot.com/docs/guides/crm/ui-extensions/sample-extensions/overview

[Jaycee_Lewis]

Hi, @hafizusama 👋 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

[hafizusama]

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

[Jaycee_Lewis]

You're a legend @nickdeckerdevs1 🙌 No worries at all. Sent you a DM — Jaycee

[Jaycee_Lewis]

Thanks @nickdeckerdevs1 🙌 — Jaycee

[nickdeckerdevs1]

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.