Achal from HubSpot walks through how to find, install, and deploy sample projects in a sandbox to build custom cards. The tutorial shows what UI extensibility looks like in practice so developers can see the cards in action before building their own.
If you're looking for resources to be able to learn more about UI extensibility, you've come to the right place. Hi, my name is Achal and I'm an Associate Product Manager on the HubSpot team. And today I'll be talking more about sample projects and how you as a developer can use them to be able to visualize what UI extensibility does quickly and easily. In today's video, I'm going to be covering what samples are, why you'd use them and how to use them. So we'll end by doing a quick demo of what it looks like to actually install the sample into your portal. So let's get started. You should be seeing my screen now. And this is on ls. This is essentially my sandbox environment and it has a bunch of different cards in here already. This is my CRM development space, this is my deals deals page, it's my CRM development space. And so to find sample projects, you can just scroll on the left handbar and you can find this top here. So we're going to click on sample projects and as you can see, here is a list of the sample projects. Some of these are also marked as beginner, which are especially beginner friendly and easy, easier to use. So today let's do one of the beginner ones. Let's do Manage, Layout, select and box. I especially like this sample because it has a bunch of different visual components, which especially is great to be able to show off what UX and ability can do. So let's look into this. So this has two different kinds of cards. One is a playground card and one is a Flexion box example card and it has a bunch of different kinds of learnings as well. So let's start. So I'm going to click on this source code in GitHub and it's going to open up the repo for all the samples and essentially all I need to do is follow the instructions on this page. So this is the first card, this is the second card, um, and here's the quick start guide. Cool. So step one, updating your cli. I've already done this step, so if you need to do it, please go ahead. I'm going to start with step two directly because I'm already where I need to be, especially in terms of the folder I want to be in. Okay, cool. Subject. So let's run this command in the directory that we want to be in. So I'm going to run this here and it's going to create Flex inbox So as you could see earlier, there was no Flex inbox neurals. There should be a Flex inbox directory that's been created. Also note here that in the CLI itself, every time you run an HSproject create command, you'll also get a prompt to be able to open sample projects. So you can find those directly from here as well. Cool. So now that we have flexinbox ready as a folder, we're going to install the dependencies. So first we're going to walk into this folder on LS just to show you all what's in here. I know there are five different things happening after we run NPM install. This should add some more dependencies. So that's going to take a second there to get going. Meanwhile, let's look at where this sample is going to get uploaded. So here's. I'm seeing this clearly. So this is on the deals page. So I've already opened my deals page here and maybe I'll look to adding it somewhere here. Cool. So now this is already done. We've already finished our NPM install. Now the next step is AHREFS project upload. So let's upload this. So while this is being uploaded. Yes. It doesn't exist. We're gonna create it. If you want to look into locally developing it, then we will have to run AJS project dev. But for now let's just upload it so I can show you all what that looks like. So it says that it's been deployed. Actually, you know what, I'm going to create a new tab and then we are going to add one and two. Here we go. Cool. That looks good to me. Save and exit. And now I want to look at my samples tab. And there we go. A FlexInvox example card exists. Earned. So it does. Playground card. Amazing. And so I'm gonna full screen this. Let's see. There are a bunch of different things happening here. As I mentioned before, a lot of these are very packed with UI components. So these can be awesome for demoing to your client what's possible. And also at the same time, these can be fun to kind of just play around with. Yeah, so that's, that's one kind of sample project. Now a bunch of other sample projects as well. Like here, this is the in app flow. So here there's a bunch of different ones that I have preloaded onto some of my custom cards. I'm going to open my contact page. There we go. So that's going to load some of the example cards multi step flow for example. This is one of my favorites as well. When you click on menu it has a whole enter and flow about how to use panels, hudder use forms, that kind of thing. There's also a couple of simple ones. Display iframe model for example. This is eventually just going to open an iframe model but as you can see a lot of these samples look very different in their form and these are also a great resource to just peek into the backend and see what kind of code is being used, how functions are called, that kind of thing. So that's it. That's all I have for you today. I hope you have a great journey with samples. If you have any feedback or any use cases that you'd like for us to handle or create more sample projects for, we'll be happy to do that. Feel free to leave that in the comments. Thank you so much. Bye bye.
