Version:

This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off
Take topic challenge

Supplemental Videos

Description

Learn how to use the dock action to show or hide a docked view.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] In this lesson, we'll talk about the Dock Action. So, in my Designer here, I have a couple of views ready to go. I have one titled West Dock and I would like to have another component show or hide this dock based off of user interaction. So, we'll use this view called the Dock Action here, and then from this view, I want to show or hide the West Dock. There is an action for that, the Dock Action. So, we'll get started by adding a component. We'll head over to the Perspective Component Palette, and under the Input category, I'll grab a button just because it's really easy to use and trigger. Now, before I dive in and start configuring the action, there's one thing you'll want to take care of real quick. When you're using the Dock Action, you'll need to specify a dock ID. So, what I mean by that is if we head over to the cog icon or the home of the Perspective section, we can see that I have my West Dock view already configured as a dock under the shared settings. If we edit this dock, there is a dock ID. So, if you're trying to conditionally show or hide the dock and you're not using a handle, you'll need a value here just to be able to single out and call that one dock. So, you can type whatever you'd like in here. I'll just call this west. Now, you may want to play around with some of the other settings, too. You may want to change the content to cover, especially if you're designing for a smaller device, so that way we're not warping and pushing all of your other components on your primary view out of the way. Also, again, if you're designing for a smaller screen here, you may not want the dock to be immediately visible, so you could set this to On Demand. But the important part here is the dock ID, so we'll hit OK, and let's configure the action. So, we'll go to our Dock Action view or whatever view you're configuring this on. We'll select our button, we'll right click, go down to Configure Events, and under Mouse Events, I'll select onClick since I'm using a button here. We'll hit the plus icon and we'll select the Dock Action. With the Dock Action, there aren't too many settings you have to configure. So, here you can specify if you wanted to open, close, or toggle the state of the dock. So, if it's closed, open it. If it's open, close it. In this case, we'll toggle it. And we need that dock ID under the identifier area, so if you recall, I called mine west. Now, I am statically typing in an identifier here, but we do see there's a little icon to the right, which allows us to browse the various properties within our session or within this one view. So, basically, this gives you a way to dynamically change the identifier in some way. We'll leave that alone for right now. We'll stick with the static identifier, and I'll just click okay. And we'll save our project. And let's get a session open, so I'll go back to the home of the Perspective Module here. And for my Dock Action, I'll go ahead and right-click. We'll launch the URL. So, if I press my button, we see the dock appear. If I press it again, it goes away. So, now we're toggling the dock with this one action. So that should give you a good idea of how to get to started with a docked action. Again, the identifiers are really the important part here. You want to make sure you're giving unique dock IDs to all of your docks in your project.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.