Access More IoT Insights From Losant
Master Losant’s Template Engine With the Template Tester
- Losant Templating is the primary way to access payload data in the Visual Workflow Engine and access context while building End-User Experiences.
- Template Engines are designed to combine templates with a data model to produce result documents.
- All of your templating work can be moved back into Losant so you can continue to build your workflow or experience, and can be shared with other team members easily.
Get More Info About Losant’s Template Tester
- The Losant Template Tester can be used by new and experienced Losant Developers to hone their skills and improve the quality of their work.
- Test, practice, and explore the potential of the Losant Template Engine.
- Get answers to common FAQs with Losant Forums and Documentation.
Taron: Thank you, Heath. Right now, I’m showing a two-paned view of what my next example is. So, if you don't see that, just let me know. However, I want to hop right back into what Heath was demonstrating. The one thing I really like about Templating within the realm of Losant, is that once you kind of learn just how to use the syntax and the helpers, they apply in the workflow engine and the Experience so you can kind of use these all over the place. The one thing I want to show here is a common change we may make to this Experience. Heath covered our Admin Dashboard link and this is only present when a user is in a specific group using this Equal Block Conditional Helper. However, in a normal application, you're not just going to have one link. We may have a link to an About page, a Contact page and as we fill out our application, this could get pretty yieldy. This is fine. However, if you think about things like maintaining consistency of styles across these elements and as the element list grows, making those kind of changes, there's a better way. I want to offer new best practices while building Experience to help you with that. Instead of just copying and pasting all of our list elements here to remove those, at the top of this layout, we have a cool new handlebar helper to talk about — the inline helper. The inline helper is essentially a way for you to create a tiny component on this page to now reuse in different places. For example, this is the inline Component's definition. If I were to look at the usage of this Component — I can copy and paste that here below for you — the usage looks like this. Let's walk through this. With the inline Component, notice this #* syntax and then we have the keyword inline. The next argument is the name of your Component. And then how we reference that name is going to be the double curlies and then the greater than and the nav item. Also, one thing to point out is that inline helpers, you're also able to parse them arguments. With this, we can now say, define a new inline helper called nav item, give it a label and an href and now use that within our inline helper block to reference those values. Now, instead of copying and pasting our navigation like we saw before, I can come here. Actually, we can fix Heath's link and go to admin. We can call that Admin Dashboard, and then we can also add in those other links. I’m not going to change the name just for typing time on the demo. However, if we were to save this. Let's do update, save. Actually, let me remove this hanging one here so it's not just in our page. Update, save. And I refresh, now we can see we can easily get that link. The nice thing is that any change we make to our link styling will now apply to everything on this page because we've defined and used this inline helper with the arguments that we parsed in. This is a really flexible way when you're in the same page, to get that clean component so you can offer some nice reusable things within this page. But that's just within this page. What about across multiple pages? Well, Experiences offer components and that's what I’m going to talk to you about. While you're on your Experience overview page, here's the overview page for my Experience, you may notice down here in the bottom left, you have access to Components. Components are reusable HTML templates that you can now, just like the inline helper, use within one page but Components allow you to take that and operate across multiple pages. To help us kind of go through Components, I want to point you to the Template Library. Losant Template Library is full of UI Components, simulators, resources to help you build all throughout Losant. The one in particular to highlight is the device list Component. Most applications in Losant that we see have a device list on the side and a dashboard. Device list is a very common component that we're going to want potentially across multiple pages. The nice thing about the Template Library is that this is a fully functional and complete Component that you can directly import into your application. The one thing to note is that every item in the template library comes with the readme. This readme provides you instructions about how to use it, so a little usage. And just so I have this, I’m going to copy this on my clipboard, and then also details about its configuration. Once you press import, what you're going to notice is in your Experiences, a new Component called tl-device-list. What I have here is my screen already set up, so we can walk through this Component a little bit easier. Here on the left, I have opened the new Component, the tl-device-list Component that we just imported into our application. Here in the middle, this is the home page context where we have our Each Helper that goes over our list of devices. This is the same Each Helper — and actually, I’m working in the same app, exactly same application that Heath was working in. Here's our result. The nice thing with this kind of three-pane view, we get to see is — the Component, the page and the output. So, let's use this component that we now import into our application. Here, if I refresh — and just to remind you again of what that context is — if we look at the context for this page, we have page data. And, within page data, we have our devices and devices is just a list of the devices for this current Experience user. So, this is available as our context within our Experience. We're able to use that here in our loop. So, because we have pagedata.devices in our context, we can actually use that in our Component. The nice thing about the “this” component that comes from the Template Library, it supports the devices syntax, so you can just parse it an array of devices and it'll just work. But let's look at this syntax here for Component. When we define a Component in that navigation in your Experiences, you have the Component keyword and then the name of the component. So, in this case, we want to reference that tl-device-list. And then this third argument is pretty special because it is... Essentially, what you're defining here is the context of this Component. So, here's our Component and here's our page. Remember, our page context is what we saw in the render log. Our Component context, we're defining it to be page data. What this means is our context for the right side within our Component, within that Component template is now page data and that's going to be an important note to keep in mind. However, let's update this new page now our home page and then I can close my render log. Let's save. If we refresh our layout, boom. Just like that, we're now able to make use of this Component out of the Template Library. However, one awesome feature of this Component is that it supports other arguments that we can parse in. I’m going to get an example here for you. So, Components aren't just the name, the keyword and the new context you're providing it. You're also able to parse in specific arguments. So, in this case, arguments like selected or the link style and the image size and the image and an image file. These arguments, if you were to save our page and refresh, immediately start enhancing and making this, not only a Component that we can reuse through our application but we can also make it flexible for different pages and in different methods that we may want to use the Component. What's really going on behind the scene to get this view and the features that we see from the Component is really, with the component that we imported into this application. If I make this a little bit bigger, since we've defined our Component and now, we parsed in arguments, so as you would imagine, there's probably in this Component, a way to use and manipulate and present those arguments. For example, we can see we have a argument image file that points to our exact image. We can see that we have our device name that points to our name of the device. And then a couple other cool arguments that come with this template is you get this nice selected view, right. But we can see the CSS class being modified also by this argument.selected. However, there's a new helper I want to show you. When you're in an Each loop... Remember, we talked about here, our Each loop. The one thing that Heath mentioned that was extremely important is that what you're doing is — you're giving this Each an object or an array to loop over. Once you do that, inside of the Each loop, the context becomes that individual key value or individual element of that array. That's why, because we're looping over, in this case, devices, we use all of our device properties — so this.name, this.id. That "this," that "this" keyword here is representing the single device. However, if you take a note at how we're referencing the arguments here, args.selected, let's look at how that's being defined. That's really being defined with this With Helper. The With Helper is a nice helper to keep in your toolbox mostly because I like to say it helps you kind of wrangle context and make it make more sense. For example, when we originally use this component within our page, we set the context to pageData.devices. Now, in our Component, this context that we have inside of our blue box here is pagedata.devices. The same way that we reference our current context in any other place in Templating, we use this keyword. However, we can now clean that up. Instead of being like, okay, this, each over this and then we get kind of looped and lost into the "this'" here. However, we can redefine this in a sense, the key word "this." So, we can now use the With helper, the value that we want to almost redefine, and add a new property to context called devices. That way, now we're looping over the array of devices but we can use the device key, the device's keyword here to make them more readable for another developer who may be working in our application. Another method and a very important thing to note is how we're redefining our arguments. Within your Component, you actually get reference to your arguments with the @args keyword. This is very similar to the @key and the @root, is another special keyword that you have available to you within Experiences to help you build. In this case, our arguments like selected, we will be able to reference in our components with @args.selected. However, here's the thing — because we, inside of this Each loop, have redefined the context to an individual device, if we were to use args.selected within our Each loop, so where we're actually using it here, this wouldn't work. Because args as it stands, is not available within this context. It's only available within our entire Component context. In order to parse the arguments into the Each loops context' we can use the with helper and this pipe syntax. Essentially what this is saying is — Hey, inside of my Each loop, make args available with this args keyword. And now, within our template, we're able to easily reference arguments properly within loops and within our application. Just like that, we've now used two very good best practices, the With helper and inline helper. The one thing I do want to show you is, in the Handlebars dock, you can actually see how and learn more about these helpers. So, "if" and "with" and the inline helper actually come from Handlebars itself. What Losant has done is we've added a whole bunch more helpers to help you build throughout Losant. But if you want to look at documentation or even more Templating-specific things, the Handlebars doc is a great, great reference. What I want to quickly do is now recap of all the cool things that we learned today. While Heath was presenting, we learned about helpers and helpers add transformation to your Templating and we can even nest those helpers that we see here and do an add and a multiply like we saw. Then we had Conditional Blocks. In this case, Conditional Blocks allow you to optionally display data. So, we talked about the less than equal to, that we also have not equal. This is a very flexible way to add, not only in your workflows but in your Experiences to kind of conditionally display information like a link. One really cool block that I want to talk about is the "includes." It's very common when you're operating over say, in a list of things like a list of numbers, to want to display something if a number that I have is in this list. You can use the includes helper and it gives you a nice way to say — include this information if this number is in the array. We also covered loops. So, within the realm of Losant, we're looping over devices. We're looping over users to just put stuff on the screen. In this case when you loop, you can loop over an object and then you get access to you know your key and your value. And then you also loop over arrays and then you get access to the index of the array and the value at that index. And then we shifted to Components. Components are a first-class property of Experiences and you can now define your own Components but the component that we use today actually came from the Template Library. But that syntax was, we used the Component keyword, we give that Component a name. We defined that Component's context. So, here, that's a very important thing, remember, we're changing the context inside this Component and we can also parse arguments to be used inside of that Component. And then we cover the with helper. The with helper helps you wrangle this context and make the page data devices be a little bit more readable within that block to be devices and even expose that into your loops as you're looping over the devices. And the inline helper. As the Component is that reusability across multiple pages, the inline helper offers you that re-usability across the same page. The example that we used there was looping over links in a nav. Before we hop into Q&A, what I wanted to do is show you how to go and learn more and really go beyond what we're doing here in this webinar. Really, it's all about our five resources here. First, is Losant Documentation. Heath brought that up. All the helpers and everything that you saw today is in Losant's documentation. Most importantly, we give no feature without documentation, so it's a great resource for you to use as you build. Losant University. Losant University is actually getting some template courses here soon. However, it right now, gives you a really good understanding for you and your team of how to build in Losant and how to get started with your applications quickly. And then you have the Deeper Dive Series. We have more that covers, like Heith mentioned, the Template Library on Experiences specifically and even some of the other application templates that we've produced in the past. A ton of hands-on tutorials in the docs and in the blog and lastly, the forums where you can always ask your questions and we'll be there to help you. A couple other save-the-date things as you're paying attention to me today on this webinar. On February 9th, we're having a webinar called — Using Azure IoT Edge and your Losant Edge Compute as your Complete Edge Deployment and Management Solution. On March 12th, you could join us for a webinar on Multi-tenancy and that's going to be a good topic. Lastly, you can join us for a webinar on Device Positioning Using QR Codes. And just a pro-tip, the QR code is another template in the Template Library, so that'll be a really good thing to pay attention to as well. Now, to hop into Q&A. Looks like we have a couple of questions. Our first question is — what are some other good resources to learn about Handlebars? What I’m going to do I’m going to pass that one to you Heath because Heath, I guess taking away from this webinar and learning about Templating and learning about Losant, what are those pro tips, those good takeaways, those good resources that people can go to get better at Templating?
Heath: Yeah, definitely. I think you showed it there at the end, the Handlebars JS documentation is fantastic. They also have their version of the Template Tester in their documentation. So, any Templating-specific things, I think I would point people towards the Handlebars documentation. But when building or testing inside of Losant, I showed off two of our...my most favorite features, the inline or the in-workflow Payload Tester — I think Taron's getting ready to show that off now — as well as the documentation Payload or Template Tester with the documentation one having the added value of being able to give larger input and see larger output. To learn more about Templating, I think those are really my main resources. Specifically, for Handlebars, I would take it more towards the Handlebars documentation and then when coming into Losant and building with templates and using data within Losant, the Template Tester, the docs and the Payload Tester in workflows are my two favorite choices.
Taron: Awesome. Thank you. And we have another question. Can I define my own template? That is a great question. I’m actually going to cover that. In the presentation, when we got into the realm of Experiences, we talked about those inline helpers. I can pull up the inline helper that you have here. That was in our layout. Really, the way for you to define your own helpers, kind of to obtain that functionality, you have this inline helper, which kind of gives you the ability to define that Component and reuse that logic in multiple places. However, this is very powerful and again this is on the same page but you also have access to Components to get that same reusability. But the most important thing is that all the helpers that you see in the docs, so, Format and Multiply, those are just things that Losant added. So, feel free to let us know on the forums, of any helper or any transformation that may be interesting to you and then we can get that in to the Losant Template Engine.
Heath: Yeah. I think just to add a little bit more to that, Taron. You as a developer can't make your own helper within Losant just on the fly. We have to do that on our side within our Template Engine itself. So, again, just like Taron said, feel free to drop us a line on our forums and we can certainly work with our engineering team to get that in for you. You still there, Taron?
Taron: Yes, I am. Sorry about that. Just to recap, we have all of our resources available to you from the docs to the forums, so you can go and learn more. Be sure to save the date for our webinars. There's going to be a lot of good content coming down the pipeline for you to learn and really become a better user within Losant. Thank you so much for joining us. Again, please reach out if you have any questions. Thank you all very much. Have an awesome day.