[00:00] In the course of working with views as templates, it's often useful to design a view specifically for a UDT. Say I had a motor UDT and I had 100 instances of that UDT I was working with. It would be very inconvenient if I needed to design 100 different views, much simple areas to design a single view that accepts parameters to determine which motor to show data for. In this lesson, we'll be looking at how we can create a template view that takes a UDT instance as a parameter and uses it to populate components inside. So instead of motors, I have tanks, which you can see in my tag browser here. Each tank consists of a fill level, a status, and then a name for the tank. I've taken the liberty of designing a view that will accommodate the structure, which we can see here. We're working with a label that will show the tank name, a cylindrical tank that will show the fill level and a multi-state button that will show the status and allow the user to control it. So before we get started on the view, we'll need to configure parameters to get these three pieces of information.

[01:03] So I'll select the view in the project browser, and then I'll find the params section in the bottom right and click add view parameter. For this our view parameter is going to be of object type. We're effectively going to get an object that contains a value for each tag in our UDT. And I'll give my parameter a name of tank UDT. There's an easy way to populate this object with every value we'll need, which is just to set up a temporary binding directly on the parameter. I'll start by changing the direction of the little arrow to bi-directional. This will allow us to configure a binding on the parameter, but it'll also be useful in a moment in allowing us to update our status field inside our view. Next, I'll be clicking the chain link icon here, and we'll add a tag binding with a type of direct, click on my little tag icon and just point it at one of our UDT instances for a moment. So I'll go into my tanks folder, select tank 1, click okay and then click okay here to finish up.

[02:04] And we'll see that we get those three values coming through. Now I don't actually need this binding. It was just to get those values set up, so it could be chain link icon again, select remove binding, and then click okay. So now we have the three fields we need and we're ready to configure bindings inside our view. So let's start with this label here. I'll select the label and we'll bind the text through to the tank name. So chain link, icon, property binding, and then I'll use the property icon, view, params, tank UDT, name, and I'll click through to commit the binding. Next step we have our cylindrical tank. So I'll select that and we'll bind the value on this one, property binding again, property icon, view, params, tank UDT, fill, and I'll click through again. Finally, we have the multi-state button here, which is a bit more complicated. I've already taken the step of binding the indicator value to the control value here. So I just need to bind through on that control value. So chain link icon, property binding, property icon, view, params, tank UDT, status, click okay.

[03:14] And then the one extra thing I want to do here is make this binding bi-directional because if the user changes the status on the button, I want that to get written back to the status tag. So with that done I'll click okay. And that actually completes our view. The important thing here is that that parameter is set to bi-directional. So when the status inside the view changes, it can get written back out. So now we're ready to nest our view somewhere else. I have a view prepared in a tab at the bottom here, and I've already set up an embedded view component inside that view, pointing at the view we just made. The one thing I need to do is bind through the parameter. So I'll find the params property here and select add object member, and then go inside that object and add another object. I'll call it tank UDT. Remember that parameter name has to line up exactly for our setup to work. There is no need to populate that parameter here. I'm just going to click the chain link icon and select a tag binding type of direct. Although any tag binding type would do if our setup called for it and bind through to my favorite tag UDT instance.

[04:15] So maybe take seven and then I want to make this binding bi-directional so that the status changes can get back to the tag and that's it. So once we have that checkbox checked, we can click okay. And any tag members will get passed through inside the view automatically. So if I go into preview mode, we can see the changes I make to the status propagate back through to the tag. One final thing I'd like to demonstrate here is that it's actually possible to drag and drop UDT instances to create our view. For this will need to do a little bit of pre-configuration on the view itself. So I'll find that again, in the tabs at the bottom, and then with the view itself selected in the project browser, you want to find the drop conflict property in here, and that should have two sub properties UDTs and data types. It looks for this interface more in a later video, but for now I'd like to expand UDTs and select add array elements. That'll add a new object. And inside of that object, we have three fields; type, param and action. In the type field I select what UDT I'd like to tie my view to.

[05:16] So I'll expand the drop-down here, go into tags, data types and select my tank type. That'll link the UDT to this template view when the UDT is dropped into another view, now that the link is established, we just have to specify where the UDT data will go inside the view. So I set my param field here to tank UDT, which is the name of the parameter we've created. Finally, there are two action types, bind and path. Bind will pass through the UDT instance on a tag binding like we've seen already, so we'll leave it at that and that's it. So now we can find our way back into the tanks view here. And then in the tag browser, I can find my favorite UDT instance, drag that into the view, select the tank template, and that'll create an instance of the tank template view that's already tied through to the dragged instance.