HubSpot UI Extensions: Retrieve Custom Ticket Properties & Context Issues Solved

Hey ESHOPMAN community! As experts in helping businesses supercharge their e-commerce with HubSpot, we often dive deep into the technical nitty-gritty. One area that frequently sparks discussion is HubSpot's UI extensions – those fantastic custom cards and panels that bring external data or custom functionality right into your CRM records. They're a game-changer for RevOps, sales, and support, especially when integrating with your online store. Recently, a fascinating HubSpot Community thread highlighted a common developer challenge: reliably accessing custom ticket properties within a UI extension's context. Let's break it down, learn from the insights, and ensure your extensions pull the data they need.

The Problem: Disappearing Custom Properties

The original poster in the community discussion was trying to build a HubSpot UI extension for tickets. Their goal was straightforward: grab the value of a custom ticket property, let's call it replytoken, directly from the extension's context object. They were using a standard approach:

const replytoken = context.crm?.properties?.replytoken?.value;

However, they ran into a few snags:

Sometimes, context.crm.properties would be undefined.
Other times, the replytoken property simply wouldn't show up in the context, even though it definitely existed on the ticket itself.

They rightly wondered: Were they missing a configuration step? Do custom properties need explicit declaration? Are there any limitations? These are all excellent questions that many developers face when first diving into HubSpot's extensibility.

The Community Weighs In: Clarity from an Expert

After a helpful community manager tagged some HubSpot Top Contributors, an expert jumped in with some crucial clarity. Their response cut straight to the chase:

There are no current limitations on pulling custom properties into UI extension cards.
The key is to mention the property's internal name in your code.
Crucially, the property must be available in HubSpot before you try to call it, otherwise, it will throw an error.

This insight is spot on, but for those new to HubSpot app development, there's a vital underlying step that needs to be explicitly understood. Let's connect the dots.

The Missing Piece: Explicit Manifest Declaration

While the expert correctly states there are no limitations on pulling custom properties, the issue of them not appearing in the context.crm.properties object often boils down to one thing: explicit declaration in your HubSpot app manifest.

Think of it this way: when your UI extension loads, HubSpot doesn't automatically dump every single property for that record type into the context object. That would be inefficient! Instead, you, as the developer, need to tell HubSpot exactly which properties your extension needs access to. This is done in your app's configuration file, typically hubspot-app.json.

Actionable Steps to Ensure Your Custom Properties Load Reliably:

Verify the Custom Property Exists and Get its Internal Name:
First, double-check that your custom ticket property (like replytoken) is indeed created in your HubSpot portal. Go to Settings > Properties, select "Ticket properties," and find your property. Note down its internal name (often lowercase, no spaces, e.g., replytoken, not "Reply Token"). This is the name you'll use in your code and manifest.
Declare the Property in Your UI Extension Manifest:
This is the critical step often overlooked! For a custom property to appear in context.crm.properties, you must explicitly declare it in your UI extension's manifest file (hubspot-app.json). For example, if your extension is defined under crm.ticket.extensions, you'd add a properties array like this:
```
{
  "crm": {
    "ticket": {
      "extensions": [
        {
          "file": "path/to/your/extension.html",
          "name": "My Custom Ticket Extension",
          "properties": [
            "replytoken",
            "hs_ticket_priority",
            "some_other_custom_property"
          ]
        }
      ]
    }
  }
}
```
By listing "replytoken" here, you're telling HubSpot: "Hey, when this extension loads, please include the replytoken property in its context object." Without this declaration, HubSpot won't fetch it.
Accessing the Property in Your Extension's JavaScript:
Once declared in the manifest and deployed, your original code snippet should work reliably:
```
const replytoken = context.crm?.properties?.replytoken?.value;
```
Using optional chaining (?.) is still a best practice, as it gracefully handles cases where context.crm or context.crm.properties might still be undefined (e.g., if the extension is previewed outside a ticket context, or if there's a temporary loading issue). Always build defensively!
Handle Edge Cases and Loading States:
The original poster noted context.crm.properties sometimes being undefined. This can happen during initial loading or if the extension isn't in a CRM record's context. Always ensure your code checks for the existence of these objects before trying to access nested properties. A simple if (context.crm && context.crm.properties && context.crm.properties.replytoken) { ... } can prevent errors.

ESHOPMAN Team Comment

This discussion highlights a classic "gotcha" in platform development: the difference between a property existing and a property being available to a specific component. The community expert was correct in principle, but the crucial step of declaring properties in the app manifest for UI extensions is often the missing link. For e-commerce businesses utilizing HubSpot, leveraging custom ticket properties to track order IDs, product issues, or specific customer requests directly within support tickets is invaluable. Mastering this allows for richer automation, better reporting, and a seamless customer experience, making HubSpot a truly powerful platform for your entire business ecosystem.

Wrapping Up

HubSpot's UI extensions are incredibly powerful, allowing you to tailor your CRM experience to your exact business needs. Whether you're integrating order data from your ESHOPMAN storefront or pulling in custom service details, understanding how to reliably access custom properties is fundamental. By ensuring your properties are correctly created, their internal names are known, and they are explicitly declared in your app's manifest, you can unlock a smoother, more data-rich experience for your RevOps, sales, and support teams. Keep building, keep integrating, and keep making HubSpot work smarter for you!