# Close a dock when opening another - detect when a dock is open?

**URL:** <https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 1, 2024, 1:42pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661 "2024-10-01T13:42:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 1, 2024, 1:42pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/1 "2024-10-01T13:42:41Z")

</div>

I would like to close the right dock when the dock down is open.  
Is there a way to detect when a dock is open ?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/9/c91326ae2faafd9b93fba7d8bd4fb2198c336510.png)

---

<div class="post-metadata">

**Author:** ![rbabcock](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rbabcock/32/13425_2.png) [@rbabcock](https://forum.inductiveautomation.com/u/rbabcock)\
**Post date:** [October 1, 2024, 1:51pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/2 "2024-10-01T13:51:07Z")

</div>

Can you add a system.perspective.closeDock to the event that opens the bottom dock?

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 1, 2024, 2:02pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/3 "2024-10-01T14:02:48Z")

</div>

bottom dock is open by the user with the dock handle...

---

<div class="post-metadata">

**Author:** ![rbabcock](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rbabcock/32/13425_2.png) [@rbabcock](https://forum.inductiveautomation.com/u/rbabcock)\
**Post date:** [October 1, 2024, 2:31pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/4 "2024-10-01T14:31:18Z")

</div>

Unfortunately, I don't think you can achieve this using the dock handle.

> [@How do you tell if dock is open on a page?](https://forum.inductiveautomation.com/t/how-do-you-tell-if-dock-is-open-on-a-page/39293/):
>
> How do you tell if dock is open on a page?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 1, 2024, 2:54pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/5 "2024-10-01T14:54:21Z")

</div>

You could use some js injection for that i guess, if you want to dabble into that

---

<div class="post-metadata">

**Author:** ![Keegan\_Stewart](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/keegan_stewart/32/67844_2.png) [@Keegan\_Stewart](https://forum.inductiveautomation.com/u/Keegan_Stewart)\
**Post date:** [October 1, 2024, 3:06pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/6 "2024-10-01T15:06:01Z")

</div>

You could try using a custom property that indicates when a each dock is open. When opening a new dock write zeros to the other values and force them to close based on the value.

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 1, 2024, 3:10pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/7 "2024-10-01T15:10:59Z")

</div>

When the dock is open by the user with the handle, you can't detect anything...  
OnStartup is only executed the fisrt time the dock is loaded.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/3/53ea3aa9ede58ce1f9e9e16d742fdf49926e711d.png)

As @victordcq I think that only a JS hack can be used to achieve this.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [October 2, 2024, 1:32am UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/8 "2024-10-02T01:32:28Z")

</div>

This would definitely be a nice feature to have: a prop to flag if the dock is in view or not

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 2, 2024, 7:10am UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/9 "2024-10-02T07:10:19Z")

</div>

Do you need to know what the dock is named or just if a top dock is open?  
Im guessing a name too since you have 2 right docks eh...

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 2, 2024, 7:37am UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/10 "2024-10-02T07:37:44Z")

</div>

Perhaps just knowing when a dock is open could be enought, because in that case we can call closeDock for all dock.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 2, 2024, 8:52am UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/11 "2024-10-02T08:52:23Z")

</div>

Eh its not much different. i was trying to get it to work in session props, but i didnt find a way to edit session props from client.

Get this component into one of your shared docks.  
Your docks will have to have a dock-id.  
Should generate a list in the view.custom (of the dock you placed this in) with all the open dock id's.  
You can make a onchange script on this custom prop to handle the rest:)

> **markdown component**
>
> ```python
> [
> {
> "type": "ia.display.markdown",
> "version": 0,
> "props": {
> "style": {
> "flex": "--neutral-40"
> },
> "markdown": {
> "escapeHtml": false
> }
> },
> "meta": {
> "name": "Markdown"
> },
> "position": {
> "x": 122,
> "y": 181,
> "height": 200,
> "width": 200
> },
> "custom": {    
> },
> "propConfig": {
> "props.source": {
> "binding": {
> "type": "expr",
> "config": {
> "expression": "\"openDocks\""
> },
> "transforms": [
> {
> "code": "\t#make the propName the key to write too in the view.custom \n\tpropName = value\n\tcode = \"\"\"<img style='display:none' src='/favicon.ico' onload=\\\"\n\t\t\t\tconst view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.closest('[data-component-path]').getAttributeNode('data-component-path').value.split('.')[0]).value; \t\t\n\t\t\t\tfunction getOpenDocks(){\n\t\t\t\t\tconst openDocks = [];\n\t\t\t\t\tfor (const side of ['top','right','bottom','left']){\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\tArray.from(document.querySelectorAll('.docked-view-'+side)).filter(x=> !x.style.getPropertyValue(side).startsWith('-')).forEach(d => {\n\t\t\t\t\t\t\t\tconst id = d.querySelector('[data-dock-id]').getAttribute('data-dock-id');\n\t\t\t\t\t\t\t\tif(id){\n\t\t\t\t\t\t\t\t\topenDocks.push(id);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t});\t\t\t\t\t\t\n\t\t\t\t\t}\n\t\t\t\t\tview.custom.write('\"\"\"+propName+\"\"\"',openDocks);\n\t\t\t\t};\n\t\t\t\tconst callbackDock = (mutationList, observer) => {\n\t\t\t\t\tgetOpenDocks();\n\t\t\t\t};\n\t\t\t\tconst observerDocks = new MutationObserver(callbackDock); \n\t\t\t\tconst docks = document.querySelectorAll('.docked-view');\n\t\t\t\tdocks.forEach(dock => observerDocks.observe(dock, { attributes: true, childList: false, subtree: false }));\t\n\t\t\t\tgetOpenDocks();\t\n\t\\\"></img>\"\"\".replace(\"\\n\", \"\").replace(\"\\t\", \"\")\n\treturn code\n\t",
> "type": "script"
> }
> ]
> }
> }
> }
> }
> ]
> 
> ```

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 2, 2024, 9:26am UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/12 "2024-10-02T09:26:05Z")

</div>

Thanks a lot,  
I've pasted a markdown with your example in my dock left.  
All the dock have dock-id.

I display the custom prop, but the list stay empty ?  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/e/eeec2608652f338ec47be8f3b8beef421b4bf582.png)

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 2, 2024, 10:13am UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/13 "2024-10-02T10:13:32Z")

</div>

its in the view.custom, not on the markdown

  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/e/3e0b7bfb7899141f0a9e2f7a26253ad092ff0c9b.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/2/921b618a0779aa094b3008fc3e8b5a48a7543829.png)

oh i did copy some random xx custom prop on the markdown, that does nothing, ill edit it out to avoid confusion

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 2, 2024, 12:40pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/14 "2024-10-02T12:40:30Z")

</div>

Sorry, I probably missing something obvious,  
my openDocks list stay empty...

Dock id "left" is an example or I can use another dock id name ?

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/59479e530902135ae5b4acb4c2168186bcad154c.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 2, 2024, 1:02pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/15 "2024-10-02T13:02:12Z")

</div>

the id can be whatever

Could you run this code in the inspector (ctrl+shift+i) console of your browser

```python
				for (const side of ['top','right','bottom','left']){					
					Array.from(document.querySelectorAll('.docked-view-'+side)).forEach(d=>console.log(d,d.children[0]));
                    
				}			

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/0/30d0cd48a1088c65ffcdad795f01a35d89641901.png)

run it a couple of times with different docks open/closed (and note which are open/closed for the different runs)

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 2, 2024, 1:45pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/16 "2024-10-02T13:45:26Z")

</div>

> [@victordcq](#):
>
> ```python
> for (const side of ['top','right','bottom','left']){					
> Array.from(document.querySelectorAll('.docked-view-'+side)).forEach(d=>console.log(d,d.children[0]));
>                     
> }	
> 
> ```

It seems not to follows the docks opened and closed.  
Perhaps it' becouse , I have several right dock ?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/0/20f90926e8311bb3311f5b0370c30bb11e819213.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 2, 2024, 1:51pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/17 "2024-10-02T13:51:59Z")

</div>

The left and top seem weird, do these have an id too?  
Could you press on the arrow of one of these?(twice)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d5ab65547f4cb8100bdd360488ce1f2a99a08f86.png)  
and maybe the right one too i guess

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 2, 2024, 2:11pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/18 "2024-10-02T14:11:20Z")

</div>

Yes all my docks have an id: left, top, down, help, dock-notif

perhaps I need to change the "reserved" ids.

```python

for (const side of ['top','right','bottom','left']){					
	Array.from(document.querySelectorAll('.docked-view-'+side)).forEach(d=>console.log(d,d.children[0]));
}
VM29:2 <div class=​"docked-view docked-view-top " style=​"height:​ 112px;​ top:​ 0px;​ left:​ 0px;​ z-index:​ 11000;​">​…​</div>​ <span>​</span>​
VM29:2 <div class=​"docked-view docked-view-right " style=​"width:​ 500px;​ right:​ -500px;​ top:​ 112px;​ height:​ calc(100% - 282px)​;​ z-index:​ 11000;​">​<div class=​"toggle-wrapper wrapper-right" data-dock-id=​"help" style=​"top:​ 0px;​ height:​ calc(100% - 282px)​;​ right:​ 100%;​">​flex<div data-view-index=​"0" class=​"view-toggle toggle-right toggle-visible ia_dockedView__handle react-draggable" style=​"touch-action:​ none;​ margin-top:​ 0px;​ transform:​ translate(0px, 0px)​;​">​…​</div>​</div>​<div class=​"toggle-wrapper wrapper-right" data-dock-id=​"dock-notif" style=​"top:​ 0px;​ height:​ calc(100% - 282px)​;​ right:​ 100%;​">​flex<div data-view-index=​"1" class=​"view-toggle toggle-right toggle-visible ia_dockedView__handle react-draggable" style=​"touch-action:​ none;​ margin-top:​ 112px;​ transform:​ translate(0px, 0px)​;​">​…​</div>​</div>​<div class=​"content-wrapper view-parent">​flex<div data-component=​"ia.container.flex" data-component-path=​"R[0]​.0" class=​"psc-STD/​bgDock flex-container responsive-container ia_container--primary view" style=​"overflow:​ auto;​ flex-flow:​ column;​ place-content:​ stretch flex-start;​ align-items:​ stretch;​ display:​ none;​">​<div data-component=​"ia.container.flex" data-component-path=​"R[0]​.0:​0" class=​"flex-container responsive-container ia_container--primary" style=​"overflow:​ auto;​ flex-flow:​ row;​ place-content:​ stretch flex-end;​ align-items:​ stretch;​ flex:​ 0 1 40px;​">​…​</div>​flex<div data-component=​"ia.container.flex" data-component-path=​"R[0]​.0:​1" class=​"flex-container responsive-container ia_container--primary" style=​"overflow:​ auto;​ flex-flow:​ row;​ place-content:​ stretch flex-start;​ align-items:​ stretch;​ flex:​ 1 1 200px;​">​…​</div>​flex<div data-component=​"ia.container.flex" data-component-path=​"R[0]​.0:​2" class=​"flex-container responsive-container ia_container--primary" style=​"overflow:​ auto;​ flex-flow:​ row;​ place-content:​ stretch flex-start;​ align-items:​ stretch;​ flex:​ 0 1 25%;​">​</div>​flex</div>​<div data-component=​"ia.container.flex" data-component-path=​"R[1]​.0" class=​"psc-STD/​bgDock flex-container responsive-container ia_container--primary view" style=​"overflow:​ auto;​ flex-flow:​ column;​ place-content:​ stretch flex-start;​ align-items:​ stretch;​ display:​ none;​">​…​</div>​<div class=​"dock-border">​</div>​flex</div>​</div>​ <div class=​"toggle-wrapper wrapper-right" data-dock-id=​"help" style=​"top:​ 0px;​ height:​ calc(100% - 282px)​;​ right:​ 100%;​">​…​</div>​flex
VM29:2 <div class=​"docked-view docked-view-bottom dock-cover-shadow-bottom" style=​"height:​ 170px;​ bottom:​ 0px;​ left:​ 0px;​ z-index:​ 11010;​">​<div class=​"toggle-wrapper wrapper-bottom" data-dock-id=​"down" style=​"width:​ 100%;​ left:​ 0px;​ bottom:​ 100%;​">​…​</div>​flex<div class=​"content-wrapper view-parent">​…​</div>​flex</div>​ <div class=​"toggle-wrapper wrapper-bottom" data-dock-id=​"down" style=​"width:​ 100%;​ left:​ 0px;​ bottom:​ 100%;​">​…​</div>​flex
VM29:2 <div class=​"docked-view docked-view-left " style=​"width:​ 200px;​ left:​ 0px;​ top:​ 112px;​ height:​ calc(100% - 282px)​;​ z-index:​ 11000;​">​<span>​</span>​<div class=​"content-wrapper view-parent">​…​</div>​flex</div>​ <span>​</span>​
undefined

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 2, 2024, 2:32pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/19 "2024-10-02T14:32:00Z")

</div>

uh this format is terrible to read, just a screenshot like i did is fine 🙂

Just checked and the double dock does indeed behave differently, but not in the way you see, so there is something else going on too xd

---

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [October 2, 2024, 2:42pm UTC](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661/20 "2024-10-02T14:42:09Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba757cfc8b9f6dc55427b8b8b7c0dea14b3e41e9.png)

[Next page](https://forum.inductiveautomation.com/t/close-a-dock-when-opening-another-detect-when-a-dock-is-open/96661.md?page=2)