Docked View visibility depending on Breakpoint

Ignition
1

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 : )

2

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.openDock?src=sidebar

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

3

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)

4

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

Get viewport size

page.props.dimensions.viewport.width

image

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

image
image1222×629 52.6 KB

1 Like
5

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?

6

I guess it is working fine already then.