Custom App Cards on Sales Hub Professional: Your Guide to UI Extensions

Hey there, ESHOPMAN readers! As experts deeply embedded in the HubSpot ecosystem and the world of e-commerce, we often see brilliant ideas emerge from the HubSpot Community. It’s a goldmine for understanding how to push the boundaries of your CRM, and a recent discussion caught our eye regarding custom UI Extensions and App Cards on Sales Hub Professional. This is a topic near and dear to our hearts because, let’s face it, a perfectly tailored CRM experience makes all the difference, especially when you’re managing complex sales processes alongside your online store, whether you're using a free ecommerce site builder or a more basic platform.

The original poster in the community thread had a fantastic question: Could they build a custom App Card with an editable grid of Deal properties directly on the Deal record, using HubSpot’s React-based Developer Platform, all while on Sales Hub Professional? This isn't just a technical query; it’s about empowering sales teams with data entry efficiency right where they need it most. Let's dive into what the community experts had to say.

The Burning Question: Custom UI Extensions on Sales Hub Professional?

The core of the original poster’s inquiry revolved around four key points:

Can a custom UI Extension/App Card be deployed and used on a production Sales Hub Professional portal?
If Enterprise is required, is it tied to the portal or the developer account?
Are there limitations on Professional (e.g., API calls, number of apps/cards) for a card showing ~15-20 rows with 6 editable fields?
What minimum scope or seat type is needed to install and maintain such an app?

These are crucial considerations for any RevOps leader or developer scoping out custom HubSpot solutions. The good news? The community delivered clear, actionable answers.

Yes, You Can! But Mind the Backend

The short answer, confirmed by multiple community members, is a resounding yes, you can run a React-based app card on a production Sales Hub Professional portal! This is excellent news for businesses leveraging Sales Hub Professional to power their sales operations and integrate with their online store builder.

The Serverless Function Nuance: Professional vs. Enterprise

While the UI Extension itself and HubSpot’s standard Table component do not require an Enterprise subscription, there's a critical distinction to be aware of: HubSpot-hosted serverless functions. If your custom App Card relies on these functions for its backend logic and data processing, then an Enterprise subscription is required for the portal where the app is installed.

However, this doesn't mean Professional users are out of luck. A savvy developer can bypass this limitation by using an external backend. Your app card can communicate with this external backend through hubspot.fetch() or other supported CRM components. This approach allows you to maintain full compatibility with Sales Hub Professional while still building powerful, data-driven custom experiences.

Portal vs. Developer Account: Where the Requirement Lies

Another important clarification from the community is that the Enterprise requirement (if applicable for serverless functions) is tied to the portal where the app is installed, not the developer account used to build and test it. This means you can develop and thoroughly test your custom UI Extension in a developer test account without an Enterprise subscription. However, the production portal's subscription will dictate which features (like HubSpot-hosted serverless functions) the installed app can ultimately utilize.

Permissions and Scopes for Deployment

To successfully deploy and manage your custom App Card, you'll need the right permissions and API scopes. For interacting with Deal data, the following scopes are generally required:

crm.objects.deals.read: To display Deal data within your card.
crm.objects.deals.write: If your external backend will be saving property changes back to HubSpot.

Both of these crucial scopes are readily available on Sales Hub Professional, ensuring your custom solution can read and write the necessary information.

Regarding installation, a Super Admin can certainly install the app. However, a user with HubSpot Marketplace access and the required scope permissions can also perform the installation. To place the custom card on the Deal record layout, a Super Admin or a user with the specific 'Customize record page layout' permission is needed.

Performance and Limitations: Handling Your Data Grid

The original poster's proposed size—a grid of approximately 15-20 rows with six editable fields per row—is not a concern from a UI or API-limit perspective on Sales Hub Professional. HubSpot's platform is robust enough to handle this volume of data within a custom card. A community member advised against saving on every keystroke, suggesting instead to save on commit, by row, or by batching changed values where possible. This is a best practice for optimizing performance and minimizing API calls, regardless of your HubSpot tier.

Designing Your Custom App Card: Best Practices & Considerations

Building an effective custom App Card goes beyond just knowing what's technically possible. Here are some key considerations:

Clarify Your Data Model

Before diving into development, clearly define what each row in your editable grid represents. Is it a separate Deal, a line item associated with the Deal, another associated CRM record (like a custom object), or an external record entirely? HubSpot's native components like CrmPropertyList won't work for multi-row use cases, as it displays properties from a single record. While CrmAssociationTable can display associated CRM records, it doesn't offer the inline editable grid workflow you're aiming for.

For a truly custom editable grid, you'll likely need to compose inputs within HubSpot’s standard Table component yourself or leverage a higher-level component. For instance, a community member mentioned an open-source library, hs-uix, which provides a DataTable component specifically designed for this kind of problem. It handles inline editing, validation, sorting, filtering, and pagination, abstracting away much of the UI complexity:

npm install hs-uix

import { DataTable } from "hs-uix/datatable";

Using such a library can significantly accelerate development, allowing you to focus on the core logic of how each change is saved (your onRowEdit persistence logic).

Saving Strategy for Optimal Performance

As mentioned, how you handle data persistence is crucial. Instead of triggering an API call for every single keystroke, implement a strategy that saves data more efficiently:

Save on Commit: Allow users to make multiple changes and then click a 'Save' button.
Save per Row: Once a user finishes editing a row, save that row's data.
Batch Updates: Collect several changes and send them to your backend in a single API request.

These strategies reduce the load on HubSpot's API and your external backend, leading to a smoother user experience.

Why This Matters for ESHOPMAN Users (and all HubSpotters)

For ESHOPMAN users, the ability to create custom UI Extensions on Sales Hub Professional is a game-changer. Imagine having an editable grid directly on your Deal records that displays specific product configurations, custom line item details, or even real-time inventory checks from your e-commerce platform. This level of customization streamlines sales processes, reduces manual data entry errors, and provides sales teams with immediate access to critical, editable information without ever leaving the HubSpot CRM.

This flexibility empowers RevOps leaders to design workflows that perfectly align with their unique business needs, bridging the gap between sales activities and your storefront operations. It means your sales team can be more efficient, more informed, and ultimately, more effective in closing deals, regardless of whether your online store builder is simple or sophisticated.

Conclusion: Power in Your Hands

The insights from the HubSpot Community confirm that building powerful, custom UI Extensions and App Cards with editable grids is not only possible but entirely viable on Sales Hub Professional. By understanding the nuances of serverless functions and opting for an external backend when necessary, you can unlock a new level of CRM customization.

This capability allows businesses to tailor their HubSpot experience to an unprecedented degree, making sales processes more intuitive and data management more efficient. So, if you've been dreaming of a more personalized HubSpot CRM experience, it's time to explore the possibilities of UI Extensions and empower your team with the tools they need to succeed.