# Docked View visibility depending on Breakpoint

**URL:** <https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 27, 2023, 4:46am UTC](https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988 "2023-07-27T04:46:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [July 27, 2023, 4:46am UTC](https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988/1 "2023-07-27T04:46:25Z")

</div>

Hey there everybody,

I have created a Page inside my perspective project with two configurated Dock Views: one located on the left-side and another one located at the bottom. As a Main View there is a breakpoint container configurated at 600px. This container has two Embedded Views that display depending on the breakpoint; one is designed for big screens such as computers and the other one is more focused on mobile views.

What I would like to do is that, if the view on the breakpoint container is the big one, the left-located docked view will display and the bottom one will hide. And the other way around when the small view is viewed.

Is there any way to achieve this goal?

Thanks in advance : )

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [July 27, 2023, 6:29am UTC](https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988/2 "2023-07-27T06:29:42Z")

</div>

If you can figure out the screen resolution (and there are other posts on the topic here) then the following functions might be useful.

[https://docs.inductiveautomation.com/display/DOC81/system.perspective.closeDock?src=sidebar](https://docs.inductiveautomation.com/display/DOC81/system.perspective.closeDock?src=sidebar)

[https://docs.inductiveautomation.com/display/DOC81/system.perspective.openDock?src=sidebar](https://docs.inductiveautomation.com/display/DOC81/system.perspective.openDock?src=sidebar)

[https://docs.inductiveautomation.com/display/DOC81/system.perspective.alterDock?src=sidebar](https://docs.inductiveautomation.com/display/DOC81/system.perspective.alterDock?src=sidebar)

---

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [July 27, 2023, 7:41am UTC](https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988/3 "2023-07-27T07:41:47Z")

</div>

Oh, those could be useful. Thanks!

Where would the scripting go? I don't know if it could be passed as an event of some kind or put the script somewhere else (sorry if it's a dumb question, I'm new at perspective haha)

---

<div class="post-metadata">

**Author:** ![vasanth.p](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vasanth.p/32/38099_2.png) [@vasanth.p](https://forum.inductiveautomation.com/u/vasanth.p)\
**Post date:** [July 27, 2023, 9:47am UTC](https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988/4 "2023-07-27T09:47:30Z")

</div>

Atleast in devices where viewport sizes are accessible, this should work:

Get viewport size

```auto
page.props.dimensions.viewport.width

```

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

Use a transform to fire the open/close dock functions as shown.

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

---

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [July 27, 2023, 3:14pm UTC](https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988/5 "2023-07-27T15:14:48Z")

</div>

Wow! That seemed to work flawlessly, thanks a lot!

At the moment the project is viewed on a small screen such as a smartphone, would the expression still working even with what you mentioned about the viewport size?

---

<div class="post-metadata">

**Author:** ![vasanth.p](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vasanth.p/32/38099_2.png) [@vasanth.p](https://forum.inductiveautomation.com/u/vasanth.p)\
**Post date:** [July 27, 2023, 5:26pm UTC](https://forum.inductiveautomation.com/t/docked-view-visibility-depending-on-breakpoint/76988/6 "2023-07-27T17:26:52Z")

</div>

I guess it is working fine already then.
