Just before we get going here, let's level set with everybody about what Losant is, and also do a couple housekeeping items. First and foremost, this is being recorded. The replay will be made available to all of you a couple of different ways after this webinar. Hopefully later today, possibly tomorrow morning, we'll get the link replay out to everybody via email. We'll also post it up on our YouTube page, and also make the replay available on losant.com on the Deeper Dive webpage. If you do have questions you'd like to ask over the course of this webinar, there's a couple key features here in the Zoom conference, if you're not familiar with Zoom. Number one is a Q&A feature. If you click that Q&A button, you can type your question in there anytime. There's also a Chat function where you can also post questions. I will be monitoring both of those channels while Brandon is talking and kind of putting together a list of questions that we'll go over with Q&A, time permitting at the end. If you have to leave early, no problem. Like I said, this is being recorded and we will get the recording out to you, any parts that you miss. If we do not have time to get to your particular question, we will do our best to reach out to you directly and answer your question. Whatever you have, go ahead and put it in those channels, and we'll try to get to it at the end. You can also find us in the Losant forums at forums.losant.com. Got a whole team monitoring that channel. We're happy to help any way we can.
Some resources for Q&A/Further Learning, hopefully, everybody can see my screen up here. Losant documentation, docs.losant.com. You'll find a Guide for CPF there, which covers in detail everything that Brandon went over in today's Deeper Dive, as well as a lot of other resources, accessing payload data, some how-to guides for some more advanced concepts. We've got Losant University, which takes a very deep dive into the five pillars of the Losant platform. You will not see anything on CPF specifically there, but a lot of the concepts that make CPF happen are already covered in Losant University. Of course, the Deeper Dive Series is a circular reference back to here. Brandon also mentioned that there are a number of other really good Deeper Dives around building tenancy models and Experiences, building out your first application Experience, a lot of really useful information there. We do have a number of hands-on tutorials on our blog also, losant.com/blog and search for the tutorial topic. And of course, also our public forums at forums.losant.com. If you have a question about how to do something in Losant, there's a pretty good chance it's already been asked and answered there. I definitely recommend checking there first, and if you can't find the answer you're looking for, post the question up. We've got a whole team of people here who monitor it, bounce the ideas off of each other, and get back with the best answer for you.
And, oh, the roadmap. So, I guess two major areas of roadmap development. One is CPF itself, features and functionality in there. And I didn't really cover, but you'll notice when you create a user in the CPF, a little message is going to pop up, and it's going to instruct you to send that user to the forgot password flow. You'll create an email for the user, then you just have to send the user over there to get a password. That's not the greatest experience, but we had to draw a line somewhere. So, one of the quickest things is probably going to be some additional functionality about onboarding users, things like that. Then you'll also see in our other application templates, a number of those have Experiences wrapped around them, like the industrial equipment monitor, the asset tracker one. We're going to be porting, moving all of those over to CPF-based applications. So, any app template that has an Experience with users, those are all going to move over to a CPF. And then we're going to see some partner templates come online, some great partner engagements we've already got lined up, some really awesome applications, all built with the CPF. Those are also going to be, just like CPF, all of the implementation is open to you. You can import that; you can check it out. So, all of those that we create will also be additional excellent references and learning opportunities to figure out how to do stuff within the CPF itself.
The first is Bootstrap. Very popular, probably a really high percentage of websites you visit on a daily basis are built with Bootstrap. It provides the main CSS framework and the grid system for responsive layout. So, when you view the CPF on mobile, you can simulate that. Make this small, you can see it does kind of move around so that it looks good on phones, looks good on other smaller devices. The second tool you may never have heard of before, Turbo, part of the Hotwire stack. We use that for asynchronously loading partial page content, and I'll go into the details on that later. But Losant's Experiences are server-side rendered, and we still want the page to feel reactive.So, for example, if I go to Sites and I change the customer, just the table reload, you notice the whole page didn't reload. That's because the site's table and most tables, all tables inside the CPF, are built with Turbo. It's a Turbo frame. It allows just that piece of the page to reload with content. And it works very well with Losant, how it thinks about server-side rendering and how the workflows work and context and things like that. And the other one is Stimulus. Stimulus is the JavaScript framework, it's also part of the Hotwire stack. So, obviously it works very well with Turbo, and it just provides an opinionated approach to, well, how do I do JavaScript? How do I add interactivity to my pages?
So, for example, I'd say add_circle. You can see now there's my little Add Circle. But I want a globe. And so we'll go /map. Let's move the Order down 1. Then you've got some options. So, you can automatically hide these nav items based on the user's level and the tenancy hierarchy. For example, all these admin ones, they'll have zero, which means a system administrator. So, if you're signed in as somebody assigned to a customer site, you just won't see any of these. And the same with role. For example, register device is reserved for just admins. So, if I were to choose just Admin, they'd be the only people to see the map. In this case, I want everyone to see the map, so I'm going to just leave these blank, which allows everyone to access this page or just to view the nav item. Very important to understand is these only hide the visibility of the nav item. They do not provide authentication or rather authorization over the URL itself. Somebody could still just type that in the browser and get there. So, these are just a visual blocker. So, we save changes to the nav. And we can see immediately it's available. So, it kind of shows another level of configuration. Without code, you can change the nav. But if I click it, we get a 404 page. So, we haven't actually defined any endpoint to capture this or any page to render.
Then the CPF does have roles. The names are fairly self-explanatory. Viewer, if you add a user and give them viewer permissions, they can just look at stuff, they can't edit anything. Editor allows them to change the properties of existing resources, they won't be able to add new resources, and they also cannot see any other users. Neither Viewer or Editor is allowed to see other users in the application, only Admins. Then Admin allows users to create new resources. The register device nav won't show up if they're not an admin. The users menu here won't even show up. It's hidden automatically if they're not an admin. User management is only an admin. And you can create admins at customers. So, a customer admin, they can create their own sites and they can add their own users to those sites. And a site admin, if I were to do it like this, this user will be added to a site. They can't create other sites, but they can add users to their own site, and they can register devices to their own site. It's really important to understand, roles are a very complicated part of applications. I do just want to reiterate, the CPF is a starting point. Everything I mentioned here can be modified. It's designed to be modified. We just laid down kind of a starting approach. If you've got another role, you can change these things.
So, now we can figure out, well, how do I get a Google map in here, and Google maps are all configured with JavaScript. So, we also have to create a Stimulus controller. So, first, let's look at my page. This is the placeholder content. I'm going to... Originally I was going to talk to this more, but I'm going to have to be like a cooking show here because we are short on time and just copy/paste some stuff. So, what I'm doing here is creating a full height and width div, a hundred percent, which is going to fill all the available space. These classes are all provided by Bootstrap, so that's like width 100, height 100. Then we get into Stimulus stuff. So, I'm setting the controller, which I haven't created yet, Stimulus controller. Whenever this element lands on the page, this controller will find it and know, hey, I'm supposed to be the JavaScript that runs this element here. There's a concept of targets in Stimulus, reference targets. This makes it easy to reference other child elements on the page. In this case, I created a target. How this naming convention works, it's name of the controller, which maps here, -target, and then I can name it. And this will let me just access this element by a friendlier name, rather than using like get element ID and all that stuff.
So, going down here, we'll go and assign this to Customer 1 and Site 1.1. Go ahead and Submit that. And now my Generator exists, it's here, I got some properties. As a system administrator, I can reassign, move around this device if I chose to, change all the properties. This is the Losant ID, you can't change that, but that's helpful if you need that. If this device were to connect over MQTT or something, you can immediately get that device ID, which is required for the authentication. And you'll also see the device models are the tags down here. So, this uses the same logic to opt into which tags are available, and if you have added them to the device tags admin page, your users can modify them. Then we have, oh, let's click on that device that we just created, My Generator. Click on it. We'll go to the dashboard, we'll see an error. There's no dashboard configured for this device. That's because just like tags, there is dashboard configuration. Which dashboard should be displayed when I click a device? That's done through this association. So, Turbofan is displaying the Turbofan Dashboard Generator. There's no dashboard for it yet. And there's also default, again, if you've got a lot of recipes that can use all the same dashboard, you can set it as the default.
Then you'll see element every once in a while. Elements are those turbo frames, they're partial content. So, we look at this, I talked about it briefly, the Sites table is a Turbo frame. It's allowed to load asynchronously from the page around it. So, let's look at Sites table, and you'll see there's the workflow for that element, and there's the page for that element. And you might think, well, it's a page. How's it just partial content? Experience page doesn't have to render a full page. In this case, what it's rendering, you can see here, it starts with this Turbo frame. This is an element that was provided by that library. And that's all it's providing. It's just a partial piece of content. So, when this table needs to refresh, what it's doing behind the scenes, it's hitting this endpoint, CPF elements endpoint, invoking this workflow, grabbing, it's passing all those search parameters, the workflows responsible for querying the correct information display, and then passing context to this page to render out. And then the Turbo library swaps the content of just this piece of the page. So, it gives you that nice interactivity you see with like React or client-side applications, but still works really well with Losant.
One thing I have to do is set the content type. So, back to this standardized approach, there was always a question, where do I put JavaScript? If you tag a component with the content type of text JavaScript, that will automatically be by other workflows and stuff in the CPF bundled together and served to the end application. So, we are dividing controllers into...dividing all the JavaScript in separate files for composability. And then the CPF will combine those all back together into one JavaScript file. And then Turbo is nice enough to cache all that for us. So, as we navigate pages, we're only ever loading that JavaScript one time. So, cool. So, now we have the HTML, we've connected a controller, the controller's loaded. Let's go and see, do we have a nice on connect? Let's just console.log("Hello") just to make sure our controller's working. Go back here, bring this up, refresh. And it blew up. Yep. That is because we, oh, there's the Hello. So, we got that. We know our controller's hooked up now, but we are expecting some data points on our payload. Right here, pointsValue, that's where it exploded. So, I'm not setting this anywhere on the page, I'm using handlebar helper to pull that from context.
官网：https://www.losant.com/deeper-dive-webinar-replay-cpf-intro
资料来源：企业官网公司介绍页面（复核日期：2026-10-29）。