Dylan Schuster: My name is Dylan Schuster, I'm the Director of Product here at Losant, and today what we're going to be covering is the Connected Product Foundation. This is a brand-new entry in our application template library from which you can start new applications. A pretty robust new application that demonstrates a lot around multitenancy, best practices around constructing your IoT applications, building a really snappy, responsive interface that users will love. As I mentioned, I'll be the emcee today, Dylan Schuster, Director of Product. Most of the talking is going to be done by Brandon Cannaday. He's our Chief Product Officer who's been kind of overseeing the development of the Connected Product Foundation. It was released towards the end of last year, and we're doing this Deeper Dive today to kind of introduce it to everybody, both from a usage perspective and also from a development perspective, if you want to bring it into your IoT solutions and extend it from there.
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.
As far as Losant itself goes, I see that most of the people here today are current users, returning users, a couple of new faces in there just to kind of level set with everybody. We call ourselves an application enablement platform. What we mean by that is that Losant provides enterprises with the building blocks to create their own IoT applications. Our big value proposition is get up and running with a connected product in weeks instead of years, and that's the kind of feedback we get from a lot of our users. We break that down into five key components. End User Experiences over here on the left, which is the ability to expose specific data to your users in any manner that you see fit. That's where we're going to be spending the vast majority of our time today. That's what the Connected Product Foundation really hammers on is a whole framework for building an end user experience.
Other core pillars of the product, the Visual Workflow Engine, it's a drag-and-drop workflow engine for building logical alerting and consuming data from a number of sources. Data visualization is primarily our dashboarding tools, our out-of-the-box dashboard blocks for building custom visualizations to provide to your end users. Devices & Data Sources being the device management as well as the consumption of data from any number of different sources, third-party providers, APIs, cloud services, you name it.
Edge Compute, we're really not going to touch on Edge Compute much today, but it is definitely a very important part of the platform. Our gateway edge agent and embedded edge agents respectively that can be run on your hardware, and the workflows that you build in the Visual Workflow Engine can be built in the cloud and then deployed and run on that hardware to pull data from southbound connectors, industrial protocols, things like that.
Losant is a leader in the smart environment, telecommunications, industrial spaces. We offer this platform to a whole range of customers, including those you see on the screen right here, as well as a number of others in the Fortune 100. If you are interested in learning more, please reach out. We'll be happy to set up some time for a much more in-depth conversation. You can reach us on our website, losant.com, through the forums like I already mentioned, or even through the chat function of this webinar. And with that, I will hand it over to Brandon. If you want to take over from here, Brandon, and just kind of tell everybody about the Connected Product Foundation.
Brandon Cannaday: Will do. Thank you, Dylan. Let me get my screen shared. All right, here we go. If you can't see it, give me a shout. Otherwise, I'm going to continue. So, as Dylan alluded to, today I'm going to cover a brand-new product feature from Losant called the Connected Product Foundation. Been in work, been in development for quite a while, and it's really there to greatly accelerate the time it takes to get a customer-facing product or service out the door. So, let's start going into a little more details.
What exactly is the CPF? I'm going to call it the CPF from now on. First and foremost, it is a pre-built application template. Losant has a number of other application templates, but this one's quite a bit different. Our existing templates are very small. They're very constrained on purpose. They're there to illustrate a very specific piece of functionality implementation. For example, if you want to integrate with our AIML partner, Elipsa, we've got a template for that, but it's really just constrained down to, well, how do I talk between Losant and another service?
The CPF, on the other hand, is much bigger. It is, for the most part, a production-ready turnkey application by itself. It has most of the functionality required for IoT products and services. We've been in business for a long time, we have a lot of customers. We have seen a lot of applications built on Losant, and we have distilled the similarities down into this template, so you get all that functionality right out of the box. And this includes multitenancy. When you onboard customers, you can have as many customers as you want in a single application. This has user management, device management, built-in White Labeling, and a number of other configuration tools.
The second thing it is, is this middle column, it's an architectural foundation. And as we've seen in the past, our customers develop their applications on Losant. A lot of the work is inside Losant Experiences, the customer-facing side of a Losant app, we call it Experiences. And that is a fairly broad web development environment and hosting environment. A lot of different ways you can build applications in that environment. And when we originally set that out, that was fine. We thought customers would come to us. They've got their own internal teams. They like to use Technology X, they like to use Architecture B, and we found that not to be the case. Experiences was quite a struggle. A lot of brilliant engineers in our customers' companies, but web may not be their strongest suit.
So, the CPF lays down this opinionated and standardized approach. We have also been working in Losant for years, we've come across, identified a lot of best practices, a lot of web frameworks we like to use, naming conventions, how do I organize resources, and we put all that into the CPF. And this gives your developers, your team, this foundation and a framework in which to work. Instead of being presented this blank canvas, you're presented a standard opinionated approach, and that's going to make things a lot easier when it comes to actually extending the CPF with your own custom functionality.
And then the last is reusable components. Losant's had the template library for a long time. And there's a lot of modular self-contained functionality in that, but those weren't really built on any standardized architecture. So, this third column, reusable components, piggybacks on this architectural foundation we created, knowing that we want to use the CPF in its architecture. As we move forward at Losant, as we deliver more turnkey functionality through the template, having that CPF architecture behind the scenes gives us a lot more power to give you that functionality out of the box. Instead of a higher level, very lightweight, low touch UI component that can fit in a lot of different ways to build stuff, we can get that a lot more opinionated, it'll make your lives a lot easier. So, what you'll see as we continue developing our library template and our application templates, the CPF, this foundation is going to be a major part of that moving forward.
So, we're past the what, on to the why. Why did we build this? I alluded to it a little bit, that very first bullet point, a production-ready application, very quickly, sometimes instantly deliver POCs, MVPs, and pilots. Even the simplest application when you're presented with just raw Losant Experiences, quite a bit of work. You still might need some level of user management, customers logging in, maybe there's internal customers, and we wanted to give that to you all out of the box. So, the CPF really makes it easy in those early stages when you want to see maybe your logo in the corner, some branding, and you want to see that device data, really get that MVP out the door in as early as just an afternoon or one session.
The second bullet point is a very quick proof-of-value to your internal or external stakeholders. We all know budgets exist and a lot of organizations tranche their IoT projects into separate budgets. And you might get a budget for a POC and then have to come back to your leadership, your stakeholders, and sell them on a widespread or more broad rollout. So, being able to use the CPF to get to that proof-of-value very quickly, present that to your own organization, get the momentum, get the approvals you need to then grow to a large-scale rollout.
And then the last two, I already touched on them very lightly, is that technical foundation. So, we really wanted to make Losant Experiences easier. We wanted to give your team, your developers, when they develop in Losant, a lot more guidance. Where does my JavaScript go? Where does this type of resource go? How should I name this? Where should I put this? We provide a lot of those answers directly in the CPF. So, that framework, that guidance, and then why it's called that foundation, makes it very easy moving forward and ultimately considerably reduces development time for a full-production application.
And then lastly, it's providing a standardized architecture for Losant applications. The CPF is really Losant's now recommended way to build Experiences. A lot of major benefits for this. One, I already talked about the library templates. Knowing that this is the architecture, and this is how Experiences are built gives us a lot of power when it comes to giving you turnkey functionality that you can choose to incorporate into your application. The other one is for ongoing support. The Losant team, Losant success engineers, solution architects, they are experts in Losant. They are not an expert in every possible way to build web applications. So, now if your team comes to us with specific support questions related to the Experience, if we know it's built within the CPF architecture, it gives us a lot more knowledge in order to help you ultimately identify and address any issues that might come up.
So, today's agenda, what I'm going to do is cover these two major parts. First, I'm going to use and show how to use the CPF as that turnkey application. How do we import it? How do you create an application from it? How do you use its building configuration in order to kind of get that off-the-shelf MVP? Then we're going to take that technical deep dive, that's why we named the webinar Deeper Dive, into the actual implementation for the CPF. I'm going to go through some bits of its architecture, and then I'm actually going to do some live coding. Hopefully, that works out. Live coding can sometimes be challenging. I'm going to live code, we're going to add a page, show you how to extend the CPF with new functionality.
So, first, getting started with the CPF. The CPF is designed to be a starting point for new applications. So, with that in mind, it does show up in the list of application templates. So, when you go over here and say add application, it's right there, Connected Product Foundation. Clicking that will bring up a modal, give you some information about it. Now the CPF is a lot bigger than other application templates and that's by design. You can see here it has 56 Experience endpoints, there's a lot going on. We did expand the resource limit for Losant Sandbox accounts, so Sandbox users are able to use the Connected Product Foundation if you want to evaluate that. But just keep that in mind if you do like what I've got here, my Sandbox, I've got other apps in there. I don't have enough to fit it. So, just be aware the CPF does use a few more resources. So, if you are at the end or near the limit of your resources, those can be increased by reaching out to your Losant support.
But I have already started an app from this a couple days ago, and it looks like this. As soon as you click go, you're going to be presented with this page and the application readme. Pro tip, if you're not using application readmes, these are really valuable. Our templates put usually kind of setup instructions, but this is a really important place to put information about your application so your other developers know what's going on. So, definitely make use of this for notes and common information that if you onboard a new developer, they can go to here and see what's going on. So, the very first thing we have to do when we create an app from the CPF is follow just a few steps, and then we basically get an app we can start exploring and using.
The first is the system administrator. The CPF has the concept of a system admin, kind of your superuser, and it's the only user that you manage directly through the Losant interface. All other user management is done right through the CPF interface, but not the system administrator. So, there's some steps here, I'll show that real quick. We'll go to Users & Groups down here. Find the system administrator user. Click that. And when you import or start from an application template, a template can include Experience users, but it will not include any passwords. Those passwords are removed. That's kind of a security measure. We don't want to set default passwords because that's a security problem, and we certainly don't want to persist passwords if you export an app and import it into a new app. That can be some sensitive information. So, there won't be a password set. You just click Change Password and give it whatever password you want. Probably something strong because a system administrator does have pretty high privileges.
The next thing to do is enable some workflows. The CPF comes with a simulator. We wanted to give this to you out of the box, show how some device data works, show some of the connections that the CPF makes. So, there are two application workflows. A simulator, which is replaying Turbofan. This is actually an open-source dataset provided by NASA, kind of cool data. It's live data. We're replaying that back onto the devices. And then Check Thresholds is a simple workflow that's just creating some events in the background. As you can see, we've got nine events up here. So, every once in a while an event will be created. That way you can just kind of see how events work inside CPF also.
Anytime an application workflow is imported, it is disabled by default. That is another safety measure. A lot of people get caught up on that. It's not just CPF related. Anytime you import either a partial application into an existing application or create a new application from a template, app workflows are always disabled. That's a protection measure. There could be timers. We don't want those to just start running. There could be destructive logic in those workflows. So, it's a user choice to enable these. You can do that right from the table, just little toggles over here, you can just quickly toggle those both on. Once those are running, the simulator is going to start running and start generating data for the example devices. And we do provide, for example, Turbofan out of the box as part of this template.
All right, returning. There's only one more setup step and that is for the password reset token. That's in the application globals. Go down here to Globals. There's a reset token, you'll see this. It will have some placeholder, I change it to just secret value. What this is doing is when someone issues a password reset request – you've probably seen this process before – you type your email address in, then some password link, reset link is sent to that user. But we have to validate that that reset link is correct, and we have to sign it. So, this is basically the signature. We'll sign this token with this secret value, no one gets to see it, and then when a token comes back, it's part of that link. The workflow that handles the password reset will verify. Do these secrets match? Was this assigned appropriately? We know it's a legit reset request. So, you'll definitely want to set this.
And that's really all there is for setup. You can create as many system admins as you want. CPF provides you one. A lot of this information is in the Connected Product Foundation User Guide. So, if you go to docs.losant.com, Connected Product Foundation on the nav, the user guide, a lot of what I'm going to show in the first half of this webinar is kind of just following this user guide. So, definitely check this out, a lot of great information in that.
So, now we can actually switch over to the CPF. And by default, it's going to be hosted at your application's Experience Slug, which is your app ID to .onlosant.com. You can see that. Then go into the edit for the Experience. It'll be listed right here. Clicking on that will bring up the Connected Product Foundation. It'll take you to a login page. I've already logged in. Just log in as that system administrator, email and password, the password you changed it to. And you kind of see this is what we're presented with. This dashboard, don't confuse this with a Losant dashboard. This is kind of the home page for the CPF. It includes some really standard information that most applications have. How many devices, this is just a helpful little chart. If your devices are growing over time, how many you create each day. And then a table of events. This might be your actionable information for the day. Log in, see if you've got some events. And we'll go through all of these over time.
But the very first thing I anticipate you doing going in CPF is probably jumping into the White Label. Let's go ahead and first just make this thing look like my company, then we can start figuring out how to onboard devices and things like that. And when you log in as a system administrator, you'll see some admin tools. All other users, normal users, your end users, they won't see this functionality. This is system admins only. So, going back here, there is built-in White Labeling into the CPF, and I'll show this. I'm not going to go dark theme. I just want to show this picture, that the White Labeling is powerful enough, you can completely switch from a light theme to a dark theme if that happens to be your branding, but let's go and check that out.
The White Label changes the visual style of pretty much everything. The first are some logos, we can jump in here. Let's go just change that little simple, YourLogo, Submit that. And we can see right in the top corner, now it's changed. That's going to be on every page. The other two logos, I'm not going to change those, but this one's on the login page. Or here, we can show this, if I just go to like a random page, we see the 404 page. That's where those logos are used. And then the Favicon, that's in the tab itself. My mic seems to be toggling on and off, I'm going to unplug that. All right. Switch to a different mic. Looks like my little USB dongle plug is a little weak, so we should be good to go now.
Next up is the company name. So, by default, it was just shipped with Losant. This name is displayed, similar pages, the login page, that 404 page at the bottom. Next is a copyright statement, things like that. And then you can also change your page title. So, looking up here, it's this. We've got CPF, a pipe, and then the actual title of the page. So, you can actually change this. So, we'll just change it to your company. Actually, we'll just do ACME, a little shorter, hit Submit. And we can see now we've got ACME on all the page titles. The template here, the actual title of the page comes from the underlying Experience page itself. There's a little bit of information on it here. Our Experience pages support tags, and we're using a title tag.
So, that's part of that opinionated standardized architecture I was talking about. Like when somebody approaches Experiences, a question is going to be, "Well, how do I set the title of a tag?" So, we laid down the implementation, just say, well, set a title tag on the page, and then that's going to get picked up automatically anytime we view a page and displayed here inside your template. So, you can move around that page title wherever you want. This is just what we provide out of the box. Then you've got all the colors. You can change pretty much every color there is. The user guide does have a helpful, let's go down to White Label, does have a pretty helpful diagram of what all the colors are, what they point to. Text dark is kind of all this body text. Success is this green color. And then there's a list of where all these colors apply. So, you can use that to figure out what am I actually changing.
But I'll do an example here. The YourLogo up here, it's got more of a brown-tan color. So, maybe the color scheme are tans and browns. So, what I'll do is change background dark. I'll just show how this works. Instead of this gray color, let's change it to more kind of kind of a tan color. And if we hit Submit, yeah, hopefully that comes through. You can see all this color here is now this brown color. If I return to the home page, you can see it's all this too. So, very easy to change the styling of your application. This is going to bug me, so I'm going to change it back to its standard.
All right, up next, fonts. All fonts in the CPF, they're the same font. Some are bold, some might be italic, things like that. But we support one font, and we've already incorporated Google Fonts into the CPF, which means you can choose any font you want available in Google Font, and these are free to use for commercial uses as well. So, there's no problem using this in your own application, no licensing considerations. One thing it doesn't support are the Noto family of fonts, so you can use every font but not Noto. Just keep that in mind if you choose one of these Noto fonts, they're not going to work, but there's millions of other ones.
Let's do something kind of silly to show you how this works. We'll pick a Dancing Script. So, how you do it, choose your font, grab just the name, put the name here. You must hit Preview. The page won't accept it unless you hit Preview. Behind the scenes, that's just confirming, "Okay, we found the font, we are able to load it," and then you can do a quick check here, hit Submit. And you can see now we've got a very useful, kind of hard-to-read application, but you can change the font. That would really bug me, so I'm definitely going to change that back.
And then last is the links. This is on the login page in the footer of, again, that password reset page, 404 page, things like that. You'll want to change these. This is just people using your application, they can access your terms of service and privacy policy. Again, if we go to a 404 page, we can see those down here, pretty standard footer. That's where that company name would be replaced. And then your privacy policy in terms of service links would be replaced there. So, that's White Labeling. That's kind of what I think most people are going to start with, kind of come in here, get your logos on there, start changing this to match your company.
Then after that, you probably want to onboard some of your own devices. Clicking our Devices that come with the CPF, here's the list. They are divided in customers and sites, I'll get into that in a moment. Clicking on one brings up some information, just some properties you can change, the end user can change. There are Dashboards. You've got a Data Explorer, which is really nice. It gives your users a bit more control over exploring the data outside of the more opinionated dashboard that you might create. Then there are also any Events tied to that device. But these are our simulated devices. You're probably going to remove these pretty much immediately. When you get started with CPF, you want to get your own devices.
So, the CPF, going back to that kind of standard approach, it uses device recipes quite a bit for figuring out, how do I register devices, and what do I do when I click on a device? Which dashboard am I looking at? So, let's start by figuring out how to just register a new device. There is device registration interface built into CPF, and one of the first things you'll do is choose a recipe. And when you do choose a recipe, you'll get some device tags. And you may notice, I only have a Turbofan, how do I register my own devices? Well, you'll be required to first create a device recipe that represents your device. If you already have devices in your application, pro tip here, really helpful button here, Convert to Recipe. That will create a recipe from the details of this device. So, if you've already onboarded one, you don't have to take the manual process of going to the recipe editor and adding all of your attributes and tags. You can click that button, and it'll create a recipe from the attributes and tags of your existing device.
Well, let's go ahead and create one, show how that works. The recipe is done inside the Losant portal. The CPF doesn't have an interface to edit recipes. You can add one, certainly, if you want. CPF is designed to be extended. But let's go ahead and add a family of devices called a Generator. And they'll have, we'll just add a model, and we'll put in a placeholder. We'll say THE-MODEL_ID. Save that, and we'll add some attributes to it. Output, Generators have outputs, they have manifold_temperature, why not? Both numbers, do that. And that's kind of the minimum we need for a recipe. Now, if I come in here, click on Register Device, refresh the page, we'll see the Generator has shown up.
But one thing you'll have to configure, and I already configured this earlier, is which tags are available. If I go in here and add a new tag to this, let's call it, I don't know, site_id, you might have some identifier for a site that it's at, separate from how the CPF thinks about sites. If I add site_id, come in here and refresh, and choose Generator again, we'll notice site_id is not in this list, and I'll show how to make it visible next. But we treat all information as opt-in. That's the best security practice. So, nowhere in the CPF is data just kind of arbitrarily presented to you, you have to explicitly opt into it, and tags are one of those. Tags can contain very sensitive information or information you don't want the end user to define. You might have some internal tags required for the implementation. There might be some authentication tokens on there because you might be talking to some other service. You just don't want to expose that.
So, down here in the Admin tools, in the Device Tags section is how we set that up, and this is where these recipes come in. I already created an entry for the Generator recipe that had the model, which is why it showed up, but I don't have site_id anywhere. So, site_id is not opted in, your users won't be able to see it. There is a default entry. So, if you do have a lot of devices, families of devices that all share the same tags, you don't have to duplicate that tag down every single recipe, you can just add it once. So, for example, if all my recipes have model, just put it on default, and that'll be available for all recipes. So, for registering devices, just to reiterate, you'll have to create a recipe within the Losant platform, then go to the Device Tags and expose the specific device tags you might want that user to set when they register a device.
So, what I can do is we'll go ahead and create one, My Generator. We do support device images. This is another great example of that opinionated approach. A lot of different places. Where do I upload images? Where do I store it? So, the CPF lays out implementation. They are put into the application files. They're named with a timestamp, they're put in a folder, and then they're associated with the device on a device tag. So, that's a really nice just kind of standard implementation that we put out there. Then we choose Generator, we'll say the model is ABCDEF, something like that.
Then we get into Tenancy. This will be the next step in what we talk about here. The CPF has a tenancy hierarchy that I call two tier – customers and sites. But if you look at the whole tree, it obviously looks like there's four tiers in here. But the main multitenancy model is the center two tiers. At the very top is you, your organization, your developers, your system administrators. They have access to everything. So, in here, I'm signed in as a system administrator, I can choose any customer I want, I can choose any device I want. If someone were signed in as a customer, they don't even see the customer dropdown, that's hidden. It defaults to their own customer ID. They don't get to choose someone else's customer. And the CPF maintains this security. So, if...
Well, let's back up a little bit. So, within a customer, that's your primary tenant, when you sell a license of your product, you will create a customer within the CPF to represent that tenant. Then we subdivide customers into sites, one or more sites. You certainly don't have to. This is just a very common hierarchy that we've seen play out over and over again. And then devices ultimately are assigned to a single site. So, you end up with this tree. What happens is users can sign in, they can be assigned to a customer, or they can be assigned to a site, and they'll see everything at or below their spot in the tenancy hierarchy. So, sign in as a system administrator. The CPF will make sure and allows me to access all customers, all sites. If I were to have a user and sign in to just this site, I would have no idea this other site exists because it's not beneath me in the hierarchy, even though I'm part of the same company. The customer admin chose to put me at this site. If I'd signed into this customer, I'd have access to all sites and all devices, and certainly I wouldn't have access to any other customers.
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.
So, let's just really quickly create a placeholder dashboard so we can show how that works. We'll say Generator. And the very important thing to remember here is the CPF behind the scenes is going to set the context variable because all devices created from the same recipe will share the same dashboard. And dashboards support a concept called context, which allows me to pass in, well, which device am I looking at? And all the dashboard blocks allow you to select the context variable as a device. In this case, your dashboard must have a device ID context variable. It can have others, it can have as many as you want, but the CPF will automatically set this one. Whoops, there we go. We'll go ahead and save that. And then all I'm going to do is let's just add, oh, I don't know. Where's that divider thing? I can search, right? Divider. Section header. And I'm just going to say ctx.deviceid.name. No, we'll do .id so we can see it coming in. So, let's add that. So, there's no telemetry data on this, I just wanted to add this to show this is some device-specific information supplied by the context variable.
So, now I have a dashboard. If I refresh this page, we'll see I can set the Generator dashboard, save these changes, and then you'll see these everywhere in the CPF. If you're logged in as system administrator, you'll see these tips. So, what I just said about the device ID context variable, those are kind of scattered through the CPF interface itself just to be helpful. Now we go to Devices, go to Generator, go to Dashboard, and we can see it is now displaying that dashboard. So, the dashboards are created by you, created by your developers, the organization, and then presented to your end users through this interface. So, your end users can't change the blocks or anything like that. They're constrained to the dashboard that you provide for them. If they want to see more information, they certainly have the dashboard...or the Data Explorer available to them.
Okay, we mentioned a little bit about customers and sites. These are very simple. I'm not going to go through this, but you can add a customer. This, again, is kind of your primary tenant. If you sell a license to your connected product to a new customer, some manufacturer, whoever you sell to, create a customer to represent them. Then you'll create one or more sites. As you add a site, you'll see the customer dropdown here. Then you can add users. So, when you add a user, give them their email, whatever other information you want, and then you can choose the customer and/or site that they belong to. If you want a user to be at the customer level and have access to all sites under that customer, you just leave this set to All Sites.
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.
Then finally, Events, just quickly on Events. This wraps Losant's built-in concept of events, which are there to capture exceptional occurrences. Inside the Losant portal itself, you'll see all of your events, but you don't want to invite your users into the Losant portal to see them. So, the CPF provides a user interface. It kind of wraps that structure. Clicking on one of the events, you have the whole history of that, and then you have the ability to progress it through the life cycle and add comments. Only Editors and Admins can change these or add comments, Viewers can view it all, and these follow the same tenancy rules as the device. So, all events are associated to a device, and if a user is unable to see a device based on their location and tenancy hierarchy, it will also not be able to access events associated with other people's devices.
Okay, so that is kind of the 10,000-foot view. I'm going fast, we've got a lot to cover, but this is recorded. You can go back and rewatch any of these segments later. So, now what I want to do is get into... Oh, no. What I want to do first is talk about this device table. One last piece of configuration that almost everyone will be required to do is modify the device table. We can see we've got the connected status, name, and then we've got a serial number, and an attribute that are unlikely part of your devices. So, how do I change this table, add my own attributes in there?
First, let's go to our device and let's report a manifold temperature of 400 degrees just so we have some data. Actually, let's give it some weird precision. That happens a lot. Your underlying equipment might give you far more precision than is real or you want to display, so this will be a good use case to demonstrate. Now I've got an attribute with a value, but I don't see it in my table. Down here, the other nav item is the Devices Table. We can click that, and this provides configuration over that table. So, for every column that's in there, you can provide your own template. In this case, like the name column, it's a link. It gives you the ID in the link, switches the tab to properties, and then there's the actual name. There's a number of variables available based on the type of column, help control your template. Let's go ahead and add a attribute, we'll call it Manifold Temp. The order, we smooth it up a little. Lower numbers are higher, so it just moved up here. Attribute name – this is the actual attribute name that's on the device itself. It needs to match this.
And then the Cell Template. By default, value is for a device attribute, that's down here. This is just the actual most recently reported value for that. So, it's going to be 400 and a whole bunch of decimal places. Actually, if we go and save that, return to the Devices table, and we can see, there's my Manifold Temp column now, and there's kind of a useless amount of precision. So, the powerful part of this supporting template is we can use all of our nice helpers. Let's reduce that to two decimal places of precision. So, there's a link right here in the inline help to Template. Clicking that brings you up to our big template help documentation, which has tons of helpers, you can do all kinds of stuff, here's the one I'm using, the format helper, to change the display for this column. We'll go ahead and save that. We'll go back to the Devices list, and now you can see I just have two decimal places of precision. So, kind of helpful tool to just clean up information for display. Cool. All right.
So, that was the very fast overview of the CPF, its out-of-the-box configuration, and the Experience you can get with no code. Now I want to switch to let's talk about how we modify it. CPF is designed, it's intended to be changed. We know we can't develop a template that solves every known use case. Every application is slightly different. We laid down a great foundation, very serviceable product out of the box with the intention that you would get in there and modify the underlying source code. So, the very first thing to know is the CPF, as Dylan mentioned, as we very first started, it's mostly in Experiences, it's mostly web resources, a bunch of Experience resources, and it's built on these main three web frameworks.
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, there's a Stimulus, what's called a controller behind the scenes. When I change this dropdown, there's JavaScript picking up on the backend, setting up some query parameters, and then sending that to a Turbo frame request back to Losant to reload this. So, there's a lot of Turbo, a lot of Stimulus controllers inside the CPF also. So, if you're looking for developers to help build a CPF-based application, anybody familiar with web tech will be able to pick these up pretty easily. If this is something you want to tackle yourself, definitely go check out all of their educational material. All three of these libraries have pretty good community support.
All right, now let's get into some naming convention. Now we're going to get into some of the guts. When we look at the CPF, we go into the Experience, you'll see lots of resources. I think there's well over 100 in here. We look at all the pages, and you'll see some have like elements, some are page. What do all these mean? Why is some named some and some named the other? Again, it goes back to our standardized approach. When you see a resource name, I wanted you to immediately know what that resource was for and what it was doing. So, there is a consistent naming convention throughout this template.
And the first, you'll see everything is prefixed with cpf. That's just to distinguish or separate CPF resources from your own. As you add new pages and new functionality to CPF, I wouldn't recommend that you name them cpf. Name them with your own prefix. I really like seeing stuff grouped. I'm a visual person and grouping all the CPF stuff together and grouping your own resources together somewhere else really helps just find stuff quickly. So, if your company name is Acme, I'd probably prefix these with acme. Then if you see page, that is either an Experience page or the workflow providing context to that page. So, when I look at a site page, CPF page site, sites, that is this whole page. And then there's a workflow named the same. If we go to sites back here, you'll see there's the page and there's the workflow. They're named the same. This lets me know this workflow is dedicated to providing context to this page. I know they're related because they're named the same.
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.
Then two others you'll see are js and css. These are kind of self-explanatory. Anything prefixed with js is JavaScript. So, I had mentioned there is JavaScript behind the scenes for the Sites table whenever I change a filter. This is the file holding that. We'll go back here. There is the JavaScript and the CSS related to that Turbo frame. And I'm not going to try to provide an exhaustive educational overview of Stimulus, but you can see this is just JavaScript, update filters, does some work, and then ultimately right here is where it changes the Turbo frame URL and causes it to reload behind the scenes. Okay. So, we are a little behind. What I wanted to do is add a page. And I think I can do this quick enough where we still have some time for Q&A. But just talking about the naming convention is not very helpful. Seeing it in action is certainly more helpful. And it also lets me talk about the very last admin interface.
One of the things a lot of asset tracker applications want is kind of a full-screen map. The CPF doesn't include a full-screen map, so let's just add that as a new page. So, the very first thing I'm going to do is go to Navigation and add a new nav item for a map. And we're going to say Add Item, we'll call it Map. No parent, it'll be top level. The CPF also includes material icons, so you can set the icon to any icon available in this collection. Just type its name or actually its identifier. You can find that, this is a little tricky. So, let's say I wanted Add Circle as my icon. When you click on the icon you want, you'll scroll down till you see Inserting the icon. That is its actual ID. They're very similar to names, almost always just the actual name, lowercase with underscores replacing spaces. But that's what you'll have to add.
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.
So, we go here. We use the endpoint wizard to display an Experience page. We're going to make a page for map, we create the page. This goes back to that CPF naming convention. This will be a page, I'm going to name it map. And you could do CPF here, but this is where I'd probably recommend a different prefix. So, that's what I'm going to name the page. I'm going to name the workflow the same way so I know these are related. This is the workflow for that page. Configure access, any authenticated user's fine. If they're not authenticated, where do you go? Just back to /login, /login is provided by CPF. So, if they're not logged in, they're just going to redirect it to login. Create all those. Looking good.
So, now we go to the page. We need to change a couple of things. So, the properties, I mentioned it briefly, but the title tag on the page is what controls what shows up in the browser tab. So, we can add a title tag. And also the CPF provides a couple layouts. The main layout includes that side nav and that top nav. Puts the page over here. It includes all this stuff as in the layout, and the page is just the stuff in this area here. All right. Save that. Now we've got a page. Now if we click on Map, we actually get this, and this is just your placeholder stuff.
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.
Then, I'll get to this in a moment, but we need some data, some actual points to display. Let's go ahead and save that. So, I've got a controller, I'm referencing a controller that doesn't exist. So, let's add some JavaScript. So, it'll be acme-js-page-map. So, now back to the naming convention, I know this is the JavaScript for my map page. And I, again, just going to copy/paste all of this. And this is all really standard Stimulus stuff. I would recommend going through the material, but I'm registering a new controller. That's that same name. Whenever that controller connects, basically whenever that div shows up on the page, it's going to run this. And here's where I'm creating the map, and I'm going through all those points, adding markers to it. So, all of this information just comes from Google's documentation. They have really basic, simple examples that you can extend from. In this case, this is where I took, how do I add a marker? So, I took it all from that to create that.
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.
So, let us very quickly, we have to go to the workflow. Here is our base workflow. If we just refresh this, we'll see it gets triggered. We need some points. And I'm going to add a Device Get. And I'm going to do a little quick hack here that does not have authentication. You would want to use an advanced query here and choose devices that have a location tag and are also underneath this tenant. But for right now, I'm just getting every device with the location tag. We'll do that. Let's return those. So, refresh again, and we'll see. That takes just a moment for the new workflow to run. There we go. So, I got working devices, there's my four devices. So, now let's pull the data points off of that function node. And like any good chef, I have done this already. So, what this function node is doing is iterating through the devices, basically using map, and pulling out the location tags, and then converting those to points. So, we save that, refresh the page again, page data points, and there we go. We've got all of just the GPS points. Okay.
So, now, oh no, last thing we have to do, this is here on the workflow, but we're not passing that to the page. There's a really great webinar called like Building Experiences if you're new to all this context, I'm going quick, but there's a really good one that goes really deep into all this context and things like that. So, I'm rendering my endpoint reply, I'm rendering my page, but I need to actually pass all this data to it. So, I'm pageData, passing it onto the page for render. Click that, refresh, and there we go. So, now one thing I did skip over because I did this earlier is I did already load inside the layout. Layout usually has header information. I did load the maps API here with your API key, I'm not going to show that, but you'll need to get an API key from Google Cloud, and you can use this Google map. So, I know that was fast, but like I said, it is recorded, but I wanted to show how quickly it is to add a new nav item. In this case, it's a full-page Google map that is backed by a Stimulus controller, it's all the JavaScript adding these pins. All right. I know I'm over, but I think we do have some questions and we'll get into that. I'll pass it back to you, Dylan.
Dylan Schuster: All right, Brandon. Thanks a lot. Just a time check for everybody. It's currently 2:04. I see some of our participants have dropped off. No hard feelings if you have to go. Like I said, this is being recorded. Let me just share my screen really quickly here to get this up and I'll give Brandon a second to catch his breath. We do have, it looks like these are pretty much all the same question. I'll go ahead and cover this really quickly right here.
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.
Okay, on to Q&A. And again, we're going to only do one or two questions here since we're so over. Brandon, this question came in a couple of different forms, and you touched on it a little bit with the Google Fonts. Somebody wants to know, do we have to purchase any kind of additional license from Losant? I think they mean Losant, but it could also mean the third-party services you mentioned – Bootstrap, Turbo, Stimulus – in order to use the Connected Product Foundation.
Brandon Cannaday: Yeah, that's a good question. So, Losant is not doing any additional license fees for CPF. So, this is just available to all Losant users and customers. No additional fees there. Out of the box, everything that's included into the CPF is open source and under a permissive license. So, there won't be any additional fees required there. And we're also pretty strict on the open-source licenses we choose. Not all are created equal. So, the frameworks that we have chosen, Google Fonts, material icons, Bootstrap, things like that, are very friendly for commercial purposes. Now, what I just showed with the Google Maps, if you're incorporating some other services, there might be fees. Losant doesn't give all of our customers a license to Google Maps. Our dashboarding does have Maps, so we do cover the costs for those. But when you want to get into extremely custom stuff, you might be incorporating some technology with additional license fees, but nothing with the out-of-the-box CPF.
Dylan Schuster: Great. We'll do one more question here. I'm actually going to combine two related questions into one here. How are we maintaining source control and release structures around CPF? And kind of going a further step with that, what do we have planned next? What is on the roadmap for CPF moving forward?
Brandon Cannaday: Great questions. So, the CPF, Losant will continue to do feature additions, bug fixes, things like that. So, certainly that source control release structure, I think there's an implied question in that about what happens to my applications when you update the CPF. And what's happening is when you create an app from the CPF, you are getting a copy of all of those resources at that moment in time. Since the CPF is designed to be modified, the base CPF and customers' applications developed on it will diverge very quickly. So, there's really no chance of merging stuff back in, and we might ship functionality you actually don't want. So, when you start an app, you're getting a snapshot of CPF that moment in time. The CPF is part of Losant's template library, and that is in GitHub, so you can actually see all of the commits there. And it'll release from time to time. If there is new functionality or bug fixes, they shouldn't be too overly difficult to kind of port back into your application if you hit the same thing. But I wouldn't expect like, "Oh, cool, whole new feature." It's not just going to magically show up in your version of it.
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.
Dylan Schuster: Great. Thanks a lot. Okay, everyone, 10 after. Great presentation today, really covered a lot with the Connected Product Foundation, and it is a lot to cover. So, I do highly recommend going back and watching this Deeper Dive webinar again as you're curious, develop your applications on there. There are a couple of questions we didn't get to. A couple of them are anonymous attendees who posted these questions. If you want to send those questions to us at hello@losant.com, we can get answers to those. A couple of other ones, we actually have the names, we'll try to reach out and get answers for those. But I want to thank everybody one more time for spending the hour with us, the hour-plus with us, going over this brand-new application template, this really exciting new feature that we're giving to our Losant users. And with that, I'm going to bid everybody adieu and stay connected. Thanks a lot.