[00:00]
In this video, we'll take a look at passing parameters to a Page. So by "pass parameters", we mean the Page URL here, we can add parameters here. Our primary View can see whatever parameters we passed in and components inside the View can bind or use the values of those in some useful way. So you can see, I already have a Page, I've called it Tank and it has a primary View of Tank. I'm going to switch over to that View and I'm going to head over to the Component Palette here, under the Display category. Let's grab a Cylindrical Tank and place that on the View. So to start with, I would like to be able to pass a parameter into the URL as a number, and then show that number on the tank. So the way this works is that if you select your View, so not the root container, but the View itself, and then if you check the Property Editor, there's a special category of properties called the Params category. These properties here are exposed on the View, meaning that the Page can directly pass something to this. So if I hit the little plus button here, and add a new value property, I'll name this new property Level, and give it a value of 50 just to start with. Now let's make it so that the value on the Tank is looking at the Level property. I'll select my Tank, I'll find the value property, hit the little binding icon, and let's just do a basic Property Binding. I'll hit the little Property Browser button. We'll go down to the View. We'll go down to the Params folder. We'll expand, and we'll find the Level property. I'll hit OK. We can see in the preview that it's working. So I'll hit OK on the binding. So now that our component is looking at that Level property, we can do something with that. Let's head back to the cog icon so we can take a look at our Page configuration. The way you add parameters to the Page URL is by clicking in here, putting a slash down, typing a colon, the colon's important because this denotes that the next little string of text I'm going to type, is a reference to a parameter. Type our parameter, which is Level. So now, if we navigate to this Page URL, and if there's something after /Tank, our Page will try to take that something and place it into the Level property that's on the View. So let's save our project. I'm going to launch this Page. I'll right-click on it and launch the URL. We'll open up our browser here. Now because I'm launching it from the Page configuration, it's trying to put our parameter in the URL, but I can simply replace that with a number and hit Enter, which will reload the Page. And now my Tank is looking at whatever number I typed up here in the URL. So it's entirely possible for you to copy this or add some buttons, go to a separate Page with a different number and have two different Tanks with different values. Now you might be thinking, this is kind of a contrived example, right? I don't want the actual value of my display to be tied to something that's in the URL, which is true in most cases, you wouldn't want to populate any sort of display component like this with something in the URL. But when you start thinking about using indirect tag bindings and expressions, suddenly these parameters become considerably more interesting. The Page itself can act like a template, allowing you to design one Page but show different information simply by changing the URL just slightly.