A collection of app cards, built with HubSpot’s UI Extensions, representing various industries designed to get you started and spark your creativity, including:
- Education: Enhance administrative efficiency by tracking student recruitment progress, managing communication, and providing insights into course enrollment and student performance.
- Manufacturing: Streamline operations by managing furniture returns, reviewing product details and images, and tracking manufacturing order production status with progress indicators and detailed steps.
- Professional Services: Track client interactions, manage service delivery schedules, and monitor project timelines by providing project snapshots, displaying project status and milestones, and logging billed hours with progress indicators.
- Healthcare: Improve patient management with tools such as a patient referral form to streamline patient referrals.
A student's progress through the recruitment process, displayed in a progress bar, accompanied by student details in a property list, and related financial assistance within a table.
Please note, this card utilizes a CRM Property List, a CRM data component that queries HubSpot for data properties. To see this component in your portal, replace the toObjectTypeId and toObjectType properties on the <CrmPropertyList /> component with your desired object selections.
A collection of course statistics accompanied by a table of a student's current and past courseload
A form used to initiate a furniture return after purchase, accompanied by a table of associated furniture pieces
Displays furniture properties in a property list with an image of the piece
Please note, this card utilizes a CRM Property List, a CRM data component that queries HubSpot for data properties. To see this component in your portal, replace the toObjectTypeId and toObjectType properties on the <CrmPropertyList /> component with your desired object selections.
Manufacturing order production status displayed with progress bars and further details in a step indicator and table
A form used to initiate a patient referral
There are a few things that must be set up before you can make use of this project.
- You must have an active HubSpot account.
- You must have the HubSpot CLI installed and set up.
- Clone this project to your local machine for local development
git clone https://github.com/hubspotdev/ui-extensions-examples
- Navigate to the app card extensions directory
cd samples-by-industry
- If you haven’t already done so, install the HubSpot CLI globally with NPM
npm install -g @hubspot/cli@latest
- Connect your HubSpot account with the HubSpot CLI. This will prompt you to open your browser and copy/paste your account’s personal access key.
hs account auth
- Install project dependencies with the HubSpot CLI
hs project install-deps
- Upload the project to your connected HubSpot account. This should automatically trigger a deployment of the project as well.
hs project upload
- Start the local development server. If the project did not previously exist on the connected HubSpot account, this will prompt you to install the app onto your connected HubSpot account. Connect the app, and select
Return Home.
hs project dev
- Add the app card(s) to a Contact record by going to
Settings>Integrations>Connected Appsand selecting the desired app. Navigate toApp Cardsand find all app cards available with the project. To add a card to a record view, selectManage Locationand add the card to your desired view and location. Navigate to a Contact record where the card was recently added and ensure there is aLocal Developmentbadge next to the title of the card. You’re ready to start coding!
When making changes to configuration files ({CARD_NAME}-hsmeta.json and app-hsmeta.json), be sure to stop the development server and use hs project upload to update the project before restarting the development server.
To learn more about building public app cards, visit the HubSpot app cards landing page and check out the HubSpot app cards developer documentation.
Created By: Bree Hall