# Dynamically Change/Animate Docked View Handle Icon

**URL:** <https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [December 29, 2022, 3:12pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068 "2022-12-29T15:12:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [December 29, 2022, 3:12pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/1 "2022-12-29T15:12:28Z")

</div>

Using a docked view for an alarm banner. Would be nice to be able to draw attention to the docked view when it's hidden by changing/animating the icon in the handle.

Has anybody done this? Is it possible?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [December 29, 2022, 7:00pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/2 "2022-12-29T19:00:55Z")

</div>

It requires 8.1.19 or newer: [system.perspective.alterDock - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/system.perspective.alterDock)

If you're looking to modify the _color_ of the icon, you'll need 8.1.22 or newer, and you'll need to setup your own css rule to "animate" the color swapping:

> [@New Stylesheet resource](https://forum.inductiveautomation.com/t/new-stylesheet-resource/64787):
>
> Starting with the 10/4/2022 Nightly (8.1.22) build, users will be able to modify a new styling resource: stylesheet.css This new resource is considered an advanced feature and will not be in place by default. To place the resource, expand the Perspective node of the Project Browser, right-click the Styles node, and select "Enable Advanced Stylesheet". [EnableStylesheet] Once in place, the stylesheet allows for inserting CSS just as you would in any normal CSS file. The rules defined in this r…

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 9, 2023, 5:14pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/3 "2023-01-09T17:14:57Z")

</div>

Trying to modify the handle and visibility using this function. I update the properties like so from a button script on the docked view.

```auto
def runAction(self, event):
	if (self.session.custom.dock_behavior == 'auto'):
		#change to manual
		system.perspective.alterDock('nav', {'handle':'show', 'display':'visible'} )
		self.session.custom.dock_behavior = 'manual'
	
	else:
		#change to auto
		system.perspective.alterDock('nav', {'handle':'autoHide', 'display':'onDemand'} )
		self.session.custom.dock_behavior = 'auto'

```

It doesn't seem to update the behavior of the docked view.

The button's text is bound to the custom session prop, so I know the script is firing, but the docked view still acts like it's using onDemand after it's in manual mode. I've tested the settings for manual vs auto mode separately by changing them in the page configuration.

Do I need to close and reopen the docked view after calling alter?  
Do I need to close the docked view, then call alter, then reopen?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 9, 2023, 5:21pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/4 "2023-01-09T17:21:53Z")

</div>

I don't believe changing the `display` setting actually forces the Docked View to immediately become visible, because you can configure multiple Docked Views on a side to be visible, but you'd still only ever show one at a time and we can't just assume the one you've now set to be visible is the one you want displayed. If your goal is to force the display of the "nav" Docked View, you'll probably need to include a call to `system.perspective.openDock(id="nav")`

Changing the `display` property changes HOW the Docked View displays, not its current display state.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 9, 2023, 5:26pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/5 "2023-01-09T17:26:03Z")

</div>

The purpose here is to allow a user on a smaller screen, say a tablet, have the docked view (navigation) auto-hide so it doesn't cover the content. However, on wider displays, say a desktop, to always have the docked view open because they have extra space and it doesn't actually cover any content due to the forced aspect ratio (4:3) of the content.

Calling openDock doesn't seem to do the trick. Same behavior.

```auto
	if (self.session.custom.dock_behavior == 'auto'):
		#change to manual
		system.perspective.alterDock('nav', {'handle':'show', 'display':'visible'} )
		self.session.custom.dock_behavior = 'manual'
	
	else:
		#change to auto
		system.perspective.alterDock('nav', {'handle':'autoHide', 'display':'onDemand'} )
		self.session.custom.dock_behavior = 'auto'
		
	system.perspective.openDock('nav')

```

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 9, 2023, 5:27pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/6 "2023-01-09T17:27:32Z")

</div>

Where does this script live?

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 9, 2023, 5:28pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/7 "2023-01-09T17:28:07Z")

</div>

On a button in the docked view.

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 9, 2023, 5:46pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/8 "2023-01-09T17:46:02Z")

</div>

Odd. I just tried it and it worked.

```auto
	target_dock_id = "re"
	if (self.custom.dock_strategy == 'auto'):
		#change to manual
		system.perspective.alterDock(target_dock_id, {'handle':'show', 'display':'visible'} )
		self.custom.dock_strategy = 'manual'
	
	else:
		#change to auto
		system.perspective.alterDock(target_dock_id, {'handle':'autoHide', 'display':'onDemand'} )
		self.custom.dock_strategy = 'auto'
	system.perspective.openDock(target_dock_id)

```

In my script I changed the `dock_behavior` prop to a custom property of the button - but that shouldn't affect anything. Check your logs to see if you're encountering any errors before the `openDock` call.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 9, 2023, 7:01pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/9 "2023-01-09T19:01:36Z")

</div>

Nothing in my Gateway log or Console log

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 9, 2023, 7:15pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/10 "2023-01-09T19:15:17Z")

</div>

Make sure you've saved your changes. I won't be able to get back to this until much later today or maybe even tomorrow.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 9, 2023, 7:41pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/11 "2023-01-09T19:41:38Z")

</div>

Yep, changes saved. Even created a custom prop on the button and copy-pasted your code. Still not working for me. Ignition 8.1.23

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 11, 2023, 8:53pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/12 "2023-01-11T20:53:05Z")

</div>

Where do print calls from a Perspective script go? I don't see anything in the console:

```auto
def runAction(self, event):
	
	target_dock_id = "nav"
	print(target_dock_id)
	
	auto_dock_props = {'handle':'autoHide', 'display':'onDemand'}
	manual_dock_props = {'handle':'show', 'display':'visible'}
	
	if (self.custom.dock_strategy == 'auto'):
		#change to manual
		print manual_dock_props
		system.perspective.alterDock(target_dock_id, manual_dock_props)
		self.custom.dock_strategy = 'manual'
	
	else:
		#change to auto
		print auto_dock_props
		system.perspective.alterDock(target_dock_id, auto_dock_props)
		self.custom.dock_strategy = 'auto'
		
	system.perspective.openDock(target_dock_id)
	print("reopen dock")

```

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 11, 2023, 9:09pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/13 "2023-01-11T21:09:15Z")

</div>

Python `print` calls go to the wrapper logs I believe (not positive). If you want something logged to the console, use `system.perspective.print()`

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 11, 2023, 9:52pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/15 "2023-01-11T21:52:48Z")

</div>

My script is definitely running, but I don't know why it's not altering the dock.

Ignition 8.1.23  
Perspective 2.1.23

```auto
def runAction(self, event):
	
	system.perspective.print("dock method was " + self.custom.dock_strategy )
	system.perspective.print("")
	
	target_dock_id = "nav"
	auto_dock_props = {'handle':'autoHide', 'display':'onDemand'}
	manual_dock_props = {'handle':'show', 'display':'visible'}
	
	if (self.custom.dock_strategy == 'auto'):
		target_dock_props = manual_dock_props;
		self.custom.dock_strategy = 'manual'
	else:
		target_dock_props = auto_dock_props
		self.custom.dock_strategy = 'auto'
		
	system.perspective.print(target_dock_id)
	system.perspective.print(target_dock_props)
	
	system.perspective.alterDock(target_dock_id, target_dock_props)	
	system.perspective.openDock(target_dock_id)
	system.perspective.print("")
	system.perspective.print("reopen dock")
	system.perspective.print("")
	system.perspective.print("dock method is now " + self.custom.dock_strategy )

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21bd8306004059754b39027e5fa0494f9bcc1d90.png)

dock settings:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f833f86699a5b076b2b9cec41c326b640554596a.png)

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 11, 2023, 10:30pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/16 "2023-01-11T22:30:28Z")

</div>

Could I get some insight into the Docked View settings for the Page Configuration? Do you have multiple Docked Views assigned to that side of the Page? Is there any chance you have more than one Docked View with an ID of "nav" for the Page Configuration (even on other sides)?

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 11, 2023, 10:43pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/17 "2023-01-11T22:43:12Z")

</div>

I have two docked views. One on the north and one on the west. North is for alarms. West is for navigation.

North:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e087f8d42e2bde6fea19266671aa689f06a7211.png)

West:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/d/6dcf7a0520dfc3febefb7fbe15d2f7a3cf815456.png)

Corner priority is left-right

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 12, 2023, 4:47pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/18 "2023-01-12T16:47:36Z")

</div>

Okay, I'll try to replicate with all of this new information sometime today.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 19, 2023, 10:49pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/19 "2023-01-19T22:49:02Z")

</div>

Were you able to replicate the issue?

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 19, 2023, 11:04pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/20 "2023-01-19T23:04:39Z")

</div>

I just tried myself (sorry - I've been swamped) using your exact configurations, and it's working for me.

> [@amarks](#):
>
> It doesn't seem to update the behavior of the docked view.

What is not updating for you? My handle is changing state as expected. I did notice an odd-but-expected behavior where the handle can still be seen while "hidden" in its onDemand state, but that's a side-effect of the Docked View having no backgroundColor assigned - you can see through the Docked View to where the handle has gone to "hide".

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 20, 2023, 3:09pm UTC](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068/21 "2023-01-20T15:09:29Z")

</div>

The dock still auto-closes when I navigate to a different view, even after running the script to alter the dock.

For example, I'll try navigating between my Admin and Reports pages:

When the dock is set to visible (via page configuration), using the navigation buttons does not close the navigation bar (as expected):

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/5/75b957d9e67d19343b96ef40a58e478105ada918.png)  
Navigate to Reports page -\>  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f84ed4365f73b935964ebfcac8c79706d4b1c5cf.png)

But, when I change it to onDemand (again, via page configuration), using the navigation buttons closes the navigation bar (again, as expected):

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/3/a31cffcfc9e4509e29fdf101d26ccfdccebdb19a.png)  
Open dock -\>  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/a/ca801592b3471d04692b590fa4d207f8a9bc76b7.png)  
Navigate to reports page -\>  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5d117bc2e88d12071050b0d43d999c3cc1f8fb06.png)

That all works, but when changing these properties via script on the view the behavior is not updating. I want the docked view to start onDemand and change to visible if the user changes the setting with the button.

- West dock ID is "nav" (onDemand, cover)
- North dock ID is "alm" (onDemand, cover)
- Corner priority is left-right
- My session prop is `dock_behavior` - it can have values of "auto" or "manual" (auto by default)
- My custom view prop on the docked view is `dock_strategy` - it is bidirectionally bound to the session prop
- My button's text is bound directly to show the session prop -  
`"Dock : "+{session.custom.dock_behavior}`
- My button's `onActionPerformed` script checks the current `dock_strategy`, switches the dock strategy and updates the custom view prop

```auto
def runAction(self, event):
	target_dock_id = 'nav'
	auto_dock_props = {'handle':'autoHide', 'display':'onDemand'}
	manual_dock_props = {'handle':'show', 'display':'visible'}
	
	#current strategy is onDemand (auto) - change to visible (manual)
	if (self.custom.dock_strategy == 'auto'):
		target_dock_props = manual_dock_props;
		self.custom.dock_strategy = 'manual'
	#current strategy is visible (manual) - change to onDemand (auto)
	else:
		target_dock_props = auto_dock_props
		self.custom.dock_strategy = 'auto'
	
	system.perspective.alterDock(target_dock_id, target_dock_props)
	system.perspective.openDock(id=target_dock_id)

```

Is there any way to get/read the dock properties directly?

I did notice something just now while I was messing with this. It seems like the handle's behavior might be updating, but the dock itself is not. If I change `manual_dock_props` to hide the handle, instead of show it, the handle does show/autoHide on the button press. However, with the handle on the page configuration set to autoHide, if the handle is hidden (after the button press), and I navigate to a different view the handle comes back.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3d38ec30f15526fdcc619664d25439e5ddcdb178.png)  
Click dock behavior toggle button -\>  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/8547d8ff05c84a6be230c951a1789ec8ff4121e0.png)  
Navigate to reports page -\>  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bcf35bc2f1d92c9fc6559ab9e3e0d8064e57f368.png)

[Next page](https://forum.inductiveautomation.com/t/dynamically-change-animate-docked-view-handle-icon/68068.md?page=2)